3D虛線
此範例示範如何建立 3D 虛線，包含以下功能：
- 新增 3D 虛線（指定座標 Z 值）：使用
map.three.add3dDashLine方法，並直接於座標中指定 Z 值建立 3D 虛線 - 新增 3D 虛線（統一固定高度）：使用
map.three.add3dDashLine方法，並透過zCoordinate套用整條虛線高度
info
詳細使用說明請參考「add3dDashLine」。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>3D虛線</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>
<div id="map"></div>
<script type="module">
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.564, 25.0385],
pitch: 60,
zoom: 15,
});
map.on("style.load", () => {
/* ════════════════════════════════════════════════════════════════════════
* 新增 3D 虛線（指定座標 Z 值）：
- 可調整個別座標中的 Z 值，設定為不同高度。
- 可調整 color/width，更換虛線顏色/寬度。
- 可調整 dashSize/gapSize，更換虛線大小/間隔。
════════════════════════════════════════════════════════════════════════ */
map.three.add3dDashLine({
coordinates: [
[121.56, 25.033, 200], // 第三個參數為 Z 值
[121.56, 25.036, 400],
[121.566, 25.036, 400],
[121.566, 25.033, 200],
],
// 虛線顏色
color: "#990000",
// 虛線寬度
width: 8,
// 虛線大小
dashSize: 2,
// 虛線間隔
gapSize: 1,
});
/* ════════════════════════════════════════════════════════════════════════
* 新增 3D 虛線（統一固定高度）：
- 可調整 zCoordinate，統一設定固定高度。
════════════════════════════════════════════════════════════════════════ */
map.three.add3dDashLine({
coordinates: [
[121.562, 25.037],
[121.562, 25.034],
[121.568, 25.034],
[121.568, 25.037],
],
// 統一固定高度
zCoordinate: 300,
color: "#000099",
width: 8,
dashSize: 1,
gapSize: 2,
});
});
</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="module">
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.564, 25.0385],
pitch: 60,
zoom: 15,
});
map.on("style.load", () => {
/* ════════════════════════════════════════════════════════════════════════
* 新增 3D 虛線（指定座標 Z 值）：
- 可調整個別座標中的 Z 值，設定為不同高度。
- 可調整 color/width，更換虛線顏色/寬度。
- 可調整 dashSize/gapSize，更換虛線大小/間隔。
════════════════════════════════════════════════════════════════════════ */
map.three.add3dDashLine({
coordinates: [
[121.56, 25.033, 200], // 第三個參數為 Z 值
[121.56, 25.036, 400],
[121.566, 25.036, 400],
[121.566, 25.033, 200],
],
// 虛線顏色
color: "#990000",
// 虛線寬度
width: 8,
// 虛線大小
dashSize: 2,
// 虛線間隔
gapSize: 1,
});
/* ════════════════════════════════════════════════════════════════════════
* 新增 3D 虛線（統一固定高度）：
- 可調整 zCoordinate，統一設定固定高度。
════════════════════════════════════════════════════════════════════════ */
map.three.add3dDashLine({
coordinates: [
[121.562, 25.037],
[121.562, 25.034],
[121.568, 25.034],
[121.568, 25.037],
],
// 統一固定高度
zCoordinate: 300,
color: "#000099",
width: 8,
dashSize: 1,
gapSize: 2,
});
});
</script>
<style>
body { margin: 0; padding: 0; }
#map { width: 100vw; height: 100vh; }
</style>