繪圖控制指令
此範例示範如何以自訂按鈕操作畫筆工具，包含以下功能：
- 建立自訂畫筆工具：使用
mapPlus.DrawControl建立畫筆工具實例，並關閉預設按鈕以及啟用自訂按鈕管理
info
詳細使用說明請參考「DrawControl」。
warning
注意：須在按鈕上分別賦予指定 ID（custom-point / custom-line / custom-polygon / custom-circle / custom-select / custom-clear），自訂按鈕的功能才會被啟用。
<!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/mapPlus-1.3.9.loader.js" crossorigin="anonymous" referrerpolicy="origin"></script>
<!-- Bootstrap CDN -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css"
/>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
crossorigin="anonymous"
></script>
<style>
body { margin: 0; padding: 0; }
#map { width: 100vw; height: 100vh; }
#toolbar {
position: absolute;
top: 16px;
right: 16px;
width: fit-content;
z-index: 10;
}
</style>
</head>
<body>
<div id="map"></div>
<aside id="toolbar" class="d-flex flex-column align-items-center gap-3 bg-white p-2 pb-3 rounded-2 shadow">
<div class="pb-2 border-bottom border-secondary-subtle">
<img
src="https://kw3dmap.autoking.com.tw/kingway-logo.png"
alt="Kingway map"
width="44"
height="44"
/>
</div>
<div class="btn-group-vertical" role="group">
<!-- 繪圖指令按鈕 -->
<!--
須在按鈕上分別賦予指定 id（custom-point、custom-line、custom-polygon、custom-circle、custom-select、custom-clear），自訂按鈕的功能才會被啟用
-->
<button
id="custom-point"
class="btn btn-outline-primary"
data-bs-toggle="tooltip"
data-bs-trigger="hover"
data-bs-placement="left"
data-bs-title="畫點"
>
<i class="bi bi-geo-alt-fill"></i>
</button>
<button
id="custom-line"
class="btn btn-outline-primary"
data-bs-toggle="tooltip"
data-bs-trigger="hover"
data-bs-placement="left"
data-bs-title="畫線"
>
<i class="bi bi-slash-lg"></i>
</button>
<button
id="custom-polygon"
class="btn btn-outline-primary"
data-bs-toggle="tooltip"
data-bs-trigger="hover"
data-bs-placement="left"
data-bs-title="畫面"
>
<i class="bi bi-pentagon"></i>
</button>
<button
id="custom-circle"
class="btn btn-outline-primary"
data-bs-toggle="tooltip"
data-bs-trigger="hover"
data-bs-placement="left"
data-bs-title="畫圓"
>
<i class="bi bi-circle"></i>
</button>
<button
id="custom-select"
class="btn btn-outline-primary"
data-bs-toggle="tooltip"
data-bs-trigger="hover"
data-bs-placement="left"
data-bs-title="選擇模式"
>
<i class="bi bi-cursor-fill"></i>
</button>
<button
id="custom-clear"
class="btn btn-outline-primary"
data-bs-toggle="tooltip"
data-bs-trigger="hover"
data-bs-placement="left"
data-bs-title="清除全部"
>
<i class="bi bi-trash"></i>
</button>
</div>
</aside>
<script type="module">
const map = await new mapPlus(document.getElementById("map"), {
accessKey: 'get_your_key', // 聯絡勤崴國際，取得專屬key
accessToken: 'get_your_token', // 聯絡勤崴國際，取得專屬token
style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt', // 樣式
center: [121.52251734614822, 25.026224105188575],
zoom: 12,
});
// Bootstrap 提示訊息初始化
const tooltipList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
[...tooltipList].map((tooltip) => new bootstrap.Tooltip(tooltip));
/* ══════════════════════════════════════════════════════════════════════════
* 建立自訂畫筆工具：
- 可調整 showMeasureValue，顯示測量值。
- 可調整 continuousDrawing，啟用連續繪圖模式。
══════════════════════════════════════════════════════════════════════════ */
const drawControl = new mapPlus.DrawControl({
// 不顯示預設畫筆工具按鈕
useButton: false,
// 是否顯示測量值
showMeasureValue: false,
// 是否啟用連續繪圖模式
continuousDrawing: false,
// 需要啟用自訂按鈕管理功能
enableCustomButtonManagement: true,
});
// 添加畫筆工具到地圖
map.addControl(drawControl);
</script>
</body>
</html>
<script src="https://kw3dmap.localking.com.tw/openapi/loader/mapPlus-1.3.9.loader.js" crossorigin="anonymous" referrerpolicy="origin"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
crossorigin="anonymous"
></script>
<script type="module">
const map = await new mapPlus(document.getElementById("map"), {
accessKey: 'get_your_key', // 聯絡勤崴國際，取得專屬key
accessToken: 'get_your_token', // 聯絡勤崴國際，取得專屬token
style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt', // 樣式
center: [121.52251734614822, 25.026224105188575],
zoom: 12,
});
// Bootstrap 提示訊息初始化
const tooltipList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
[...tooltipList].map((tooltip) => new bootstrap.Tooltip(tooltip));
/* ══════════════════════════════════════════════════════════════════════════
* 建立自訂畫筆工具：
- 可調整 showMeasureValue，顯示測量值。
- 可調整 continuousDrawing，啟用連續繪圖模式。
══════════════════════════════════════════════════════════════════════════ */
const drawControl = new mapPlus.DrawControl({
// 不顯示預設畫筆工具按鈕
useButton: false,
// 是否顯示測量值
showMeasureValue: false,
// 是否啟用連續繪圖模式
continuousDrawing: false,
// 需要啟用自訂按鈕管理功能
enableCustomButtonManagement: true,
});
// 添加畫筆工具到地圖
map.addControl(drawControl);
</script>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css"
/>
<style>
body { margin: 0; padding: 0; }
#map { width: 100vw; height: 100vh; }
#toolbar {
position: absolute;
top: 16px;
right: 16px;
width: fit-content;
z-index: 10;
}
</style>