路徑移動行程
此範例示範如何設定模型移動行程，包含以下功能：
- 建立自訂 3D 模型：透過
THREE.js建立自訂 3D 模型 - 設定排程路徑任務：使用
setPathScheduler()依時段切換多段路徑，並於scheduleOnEnd方法中重新計算時間，自動接續下一輪行程
info
詳細使用說明請參考「路徑移動」。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>路徑移動行程</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://kw3dmap.localking.com.tw/openapi/loader/mapThree-1.3.9.loader.js" crossorigin="anonymous" referrerpolicy="origin"></script>
<style>
body { margin: 0; padding: 0; }
#map { width: 100vw; height: 100vh; }
</style>
</head>
<body>
<script type="importmap">
{
"imports": {
"three": "https://cdnjs.cloudflare.com/ajax/libs/three.js/0.172.0/three.module.min.js"
}
}
</script>
<div id="map"></div>
<script type="module">
import * as THREE from "three";
const map = await new mapThree(document.getElementById("map"), {
accessKey: 'get_your_key',
accessToken: 'get_your_token',
style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt',
center: [121.565, 25.0385],
pitch: 60,
zoom: 14.5,
});
map.on("style.load", async () => {
// 建立自訂 3D 模型
const geometry = new THREE.BoxGeometry(100, 100, 100);
const material = new THREE.MeshBasicMaterial({ color: "#DD0000" });
const mesh = new THREE.Mesh(geometry, material);
const model = await map.three.add3dModel({
obj: mesh,
coordinates: [121.565, 25.0334, 0],
anchor: "center",
});
const setModelSchedule = (hour, minute) => {
/* ════════════════════════════════════════════════════════════════════════
* 設定排程路徑任務：
- 可調整 trackHeading，設定模型是否面向路徑方向。
- 可調整 schedule 中每個任務各自的參數：
- 可調整 departure，設定出發時間。
- 可調整 arrival，設定到達時間。
- 可調整 path，設定路徑座標位置。
════════════════════════════════════════════════════════════════════════ */
model.setPathScheduler({
// 模型是否面向路徑方向
trackHeading: false,
// 任務時程
schedule: [
{
// 任務 ID
id: "task_1",
// 出發時間
departure: hour + ":" + minute + ":00",
// 到達時間
arrival: hour + ":" + minute + ":10",
// 路徑
path: [
[121.561, 25.0334, 0],
[121.569, 25.0334, 0],
],
},
{
id: "task_2",
departure: hour + ":" + minute + ":15",
arrival: hour + ":" + minute + ":25",
path: [
[121.569, 25.0334, 0],
[121.569, 25.0334, 500],
],
},
{
id: "task_3",
departure: hour + ":" + minute + ":30",
arrival: hour + ":" + minute + ":40",
path: [
[121.569, 25.0334, 500],
[121.561, 25.0334, 500],
],
},
{
id: "task_4",
departure: hour + ":" + minute + ":45",
arrival: hour + ":" + minute + ":55",
path: [
[121.561, 25.0334, 500],
[121.561, 25.0334, 0],
],
},
],
// 時程表結束時執行的回調函式
scheduleOnEnd: () => {
const now = new Date();
now.setMinutes(now.getMinutes() + 1);
const nextHour = now.getHours().toString().padStart(2, "0");
const nextMinute = now.getMinutes().toString().padStart(2, "0");
setModelSchedule(nextHour, nextMinute);
},
});
};
// 設定第一個行程
const hour = new Date().getHours().toString().padStart(2, "0");
const minute = new Date().getMinutes().toString().padStart(2, "0");
setModelSchedule(hour, minute);
});
</script>
</body>
</html>
<script src="https://kw3dmap.localking.com.tw/openapi/loader/mapThree-1.3.9.loader.js" crossorigin="anonymous" referrerpolicy="origin"></script>
<script type="importmap">
{
"imports": {
"three": "https://cdnjs.cloudflare.com/ajax/libs/three.js/0.172.0/three.module.min.js"
}
}
</script>
<script type="module">
import * as THREE from "three";
const map = await new mapThree(document.getElementById("map"), {
accessKey: 'get_your_key',
accessToken: 'get_your_token',
style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt',
center: [121.565, 25.0385],
pitch: 60,
zoom: 14.5,
});
map.on("style.load", async () => {
// 建立自訂 3D 模型
const geometry = new THREE.BoxGeometry(100, 100, 100);
const material = new THREE.MeshBasicMaterial({ color: "#DD0000" });
const mesh = new THREE.Mesh(geometry, material);
const model = await map.three.add3dModel({
obj: mesh,
coordinates: [121.565, 25.0334, 0],
anchor: "center",
});
const setModelSchedule = (hour, minute) => {
/* ════════════════════════════════════════════════════════════════════════
* 設定排程路徑任務：
- 可調整 trackHeading，設定模型是否面向路徑方向。
- 可調整 schedule 中每個任務各自的參數：
- 可調整 departure，設定出發時間。
- 可調整 arrival，設定到達時間。
- 可調整 path，設定路徑座標位置。
════════════════════════════════════════════════════════════════════════ */
model.setPathScheduler({
// 模型是否面向路徑方向
trackHeading: false,
// 任務時程
schedule: [
{
// 任務 ID
id: "task_1",
// 出發時間
departure: hour + ":" + minute + ":00",
// 到達時間
arrival: hour + ":" + minute + ":10",
// 路徑
path: [
[121.561, 25.0334, 0],
[121.569, 25.0334, 0],
],
},
{
id: "task_2",
departure: hour + ":" + minute + ":15",
arrival: hour + ":" + minute + ":25",
path: [
[121.569, 25.0334, 0],
[121.569, 25.0334, 500],
],
},
{
id: "task_3",
departure: hour + ":" + minute + ":30",
arrival: hour + ":" + minute + ":40",
path: [
[121.569, 25.0334, 500],
[121.561, 25.0334, 500],
],
},
{
id: "task_4",
departure: hour + ":" + minute + ":45",
arrival: hour + ":" + minute + ":55",
path: [
[121.561, 25.0334, 500],
[121.561, 25.0334, 0],
],
},
],
// 時程表結束時執行的回調函式
scheduleOnEnd: () => {
const now = new Date();
now.setMinutes(now.getMinutes() + 1);
const nextHour = now.getHours().toString().padStart(2, "0");
const nextMinute = now.getMinutes().toString().padStart(2, "0");
setModelSchedule(nextHour, nextMinute);
},
});
};
// 設定第一個行程
const hour = new Date().getHours().toString().padStart(2, "0");
const minute = new Date().getMinutes().toString().padStart(2, "0");
setModelSchedule(hour, minute);
});
</script>
<style>
body { margin: 0; padding: 0; }
#map { width: 100vw; height: 100vh; }
</style>