線條的增刪
此範例示範如何在地圖上新增和刪除線條 Feature，包含以下功能：
- 刪除線條（依 ID）：使用
map.data.removeFeatureById()方法透過已知 id 直接移除 Feature - 新增線條：使用
map.data.add()方法新增多個 LineString Feature - 刪除線條（依條件）：使用
map.data.removeFeature()方法透過接收 Feature 物件移除 - GeoJSON 查看：使用
map.data.toGeoJson()方法查看整個資料層的 GeoJSON 格式內容
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/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;
height: fit-content;
}
#toGeoJson {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 50%;
height: 100%;
overflow: auto;
background: rgba(255, 255, 255, 0.8);
display: none;
}
</style>
</head>
<body>
<div id="map"></div>
<pre id="toGeoJson"></pre>
<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>
<input
type="checkbox"
class="btn-check"
id="toggleBtnSetStyle"
autocomplete="off"
/>
<label
class="btn btn-outline-primary"
for="toggleBtnSetStyle"
data-bs-toggle="tooltip"
data-bs-placement="left"
data-bs-title="增刪單個線條"
>
<i class="bi bi-gear-fill"></i>
</label>
</div>
<div>
<input
type="checkbox"
class="btn-check"
id="toggleMultiBtnSetStyle"
autocomplete="off"
/>
<label
class="btn btn-outline-primary"
for="toggleMultiBtnSetStyle"
data-bs-toggle="tooltip"
data-bs-placement="left"
data-bs-title="增刪多個線條"
>
<i class="bi bi-hexagon-fill"></i>
</label>
</div>
<div>
<input
type="checkbox"
class="btn-check"
id="toggleBtnToGeoJson"
autocomplete="off"
/>
<label
class="btn btn-outline-primary"
for="toggleBtnToGeoJson"
data-bs-toggle="tooltip"
data-bs-placement="left"
data-bs-title="顯示資料層geojson內容"
><i class="bi bi-file-text-fill"></i>
</label>
</div>
</aside>
<script type="module">
// Bootstrap 提示訊息 初始化
const tooltipList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
const tooltipInit = [...tooltipList].map(
(tooltip) => new bootstrap.Tooltip(tooltip)
);
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: { lng: 121.539489, lat: 25.043539 },
zoom: 14,
});
map.data.add({
// 接收內容包含經緯度的物件
geometry: new mapPlus.Data.LineString([
{ lng: 121.519633, lat: 25.045716 },
{ lng: 121.535425, lat: 25.041954 },
{ lng: 121.543594, lat: 25.041654 },
{ lng: 121.557682, lat: 25.041332 },
]),
properties: {
strokeWeight: 20,
strokeColor: "#20D0E4",
id: 1,
},
});
// 將黃色線條加進資料層
map.data.add({
geometry: new mapPlus.Data.LineString([
{ lng: 121.533018, lat: 25.051893 },
{ lng: 121.532708, lat: 25.033877 },
]),
properties: {
strokeWeight: 20,
strokeColor: "#F0E68C",
id: 2,
},
});
// 將棕色線條加進資料層
map.data.add({
geometry: new mapPlus.Data.LineString([
{ lng: 121.544062, lat: 25.051843 },
{ lng: 121.543635, lat: 25.03336 },
]),
properties: {
strokeWeight: 20,
strokeColor: "#DEB887",
id: 3,
},
});
const toggleStyle = (checkboxElement) => {
if (checkboxElement.getAttribute("checked")) {
/* ══════════════════════════════════════════════════════════════════════════
* 刪除線條（依 ID）：
- 可調整 removeFeatureById() 中的 ID 來刪除其他 ID 的線條。
══════════════════════════════════════════════════════════════════════════ */
// 點擊第一個按鈕第一下，刪除 ID 為 1 的藍色線條
map.data.removeFeatureById(1);
checkboxElement.removeAttribute("checked");
} else {
/* ══════════════════════════════════════════════════════════════════════════
* 新增線條：
- 可調整 properties 中的 strokeWeight 來改變筆觸寬度。
- 可調整 properties 中的 strokeColor 來改變筆觸顏色。
══════════════════════════════════════════════════════════════════════════ */
// 點擊第一個按鈕第二下，將 ID 為 1 的藍色線條加回來
map.data.add({
geometry: new mapPlus.Data.LineString([
{ lng: 121.519633, lat: 25.045716 },
{ lng: 121.535425, lat: 25.041954 },
{ lng: 121.543594, lat: 25.041654 },
{ lng: 121.557682, lat: 25.041332 },
]),
properties: {
strokeWeight: 20,
strokeColor: "#20D0E4",
id: 1,
},
})
checkboxElement.setAttribute("checked", true);
}
};
const toggleBtnSetStyle = document.getElementById("toggleBtnSetStyle");
toggleBtnSetStyle.setAttribute("checked", true);
toggleBtnSetStyle.addEventListener("click", () => {
toggleStyle(toggleBtnSetStyle);
});
const toggleMultiStyle = (checkboxElement) => {
if (checkboxElement.getAttribute("checked")) {
/* ══════════════════════════════════════════════════════════════════════════
* 刪除線條（依條件）
══════════════════════════════════════════════════════════════════════════ */
// 點擊第二個按鈕第一下，移除藍及黃兩個線條
map.data.setStyle((f) => {
if (f.getProperty("id") <= 2) map.data.removeFeature(f);
});
checkboxElement.removeAttribute("checked");
} else {
// 點擊第二下，將移除的線條加回地圖上
map.data.add({
geometry: new mapPlus.Data.LineString([
{ lng: 121.519633, lat: 25.045716 },
{ lng: 121.535425, lat: 25.041954 },
{ lng: 121.543594, lat: 25.041654 },
{ lng: 121.557682, lat: 25.041332 },
]),
properties: {
strokeWeight: 20,
strokeColor: "#20D0E4",
id: 1,
},
});
map.data.add({
geometry: new mapPlus.Data.LineString([
{ lng: 121.533018, lat: 25.051893 },
{ lng: 121.532708, lat: 25.033877 },
]),
properties: {
strokeWeight: 20,
strokeColor: "#F0E68C",
id: 2,
},
});
checkboxElement.setAttribute("checked", true);
}
};
const toggleMultiBtnSetStyle = document.getElementById("toggleMultiBtnSetStyle");
toggleMultiBtnSetStyle.setAttribute("checked", true);
toggleMultiBtnSetStyle.addEventListener("click", () => {
toggleMultiStyle(toggleMultiBtnSetStyle);
});
const toggleToGeoJson = (checkboxElement) => {
if (checkboxElement.getAttribute("checked")) {
// 取得資料層 Geojson 的資料，並顯示內容
map.data.toGeoJson((data) => {
const element = document.getElementById("toGeoJson");
element.style.display = "block";
element.innerHTML = JSON.stringify(data, null, 2);
});
checkboxElement.removeAttribute("checked");
} else {
document.getElementById("toGeoJson").style.display = "none";
checkboxElement.setAttribute("checked", true);
}
};
const toggleBtnToGeoJson = document.getElementById("toggleBtnToGeoJson");
toggleBtnToGeoJson.setAttribute("checked", true);
toggleBtnToGeoJson.addEventListener("click", () => {
toggleToGeoJson(toggleBtnToGeoJson);
});
</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">
// Bootstrap 提示訊息 初始化
const tooltipList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
const tooltipInit = [...tooltipList].map(
(tooltip) => new bootstrap.Tooltip(tooltip)
);
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: { lng: 121.539489, lat: 25.043539 },
zoom: 14,
});
map.data.add({
// 接收內容包含經緯度的物件
geometry: new mapPlus.Data.LineString([
{ lng: 121.519633, lat: 25.045716 },
{ lng: 121.535425, lat: 25.041954 },
{ lng: 121.543594, lat: 25.041654 },
{ lng: 121.557682, lat: 25.041332 },
]),
properties: {
strokeWeight: 20,
strokeColor: "#20D0E4",
id: 1,
},
});
// 將黃色線條加進資料層
map.data.add({
geometry: new mapPlus.Data.LineString([
{ lng: 121.533018, lat: 25.051893 },
{ lng: 121.532708, lat: 25.033877 },
]),
properties: {
strokeWeight: 20,
strokeColor: "#F0E68C",
id: 2,
},
});
// 將棕色線條加進資料層
map.data.add({
geometry: new mapPlus.Data.LineString([
{ lng: 121.544062, lat: 25.051843 },
{ lng: 121.543635, lat: 25.03336 },
]),
properties: {
strokeWeight: 20,
strokeColor: "#DEB887",
id: 3,
},
});
const toggleStyle = (checkboxElement) => {
if (checkboxElement.getAttribute("checked")) {
/* ══════════════════════════════════════════════════════════════════════════
* 刪除線條（依 ID）：
- 可調整 removeFeatureById() 中的 ID 來刪除其他 ID 的線條。
══════════════════════════════════════════════════════════════════════════ */
// 點擊第一個按鈕第一下，刪除 ID 為 1 的藍色線條
map.data.removeFeatureById(1);
checkboxElement.removeAttribute("checked");
} else {
/* ══════════════════════════════════════════════════════════════════════════
* 新增線條：
- 可調整 properties 中的 strokeWeight 來改變筆觸寬度。
- 可調整 properties 中的 strokeColor 來改變筆觸顏色。
══════════════════════════════════════════════════════════════════════════ */
// 點擊第一個按鈕第二下，將 ID 為 1 的藍色線條加回來
map.data.add({
geometry: new mapPlus.Data.LineString([
{ lng: 121.519633, lat: 25.045716 },
{ lng: 121.535425, lat: 25.041954 },
{ lng: 121.543594, lat: 25.041654 },
{ lng: 121.557682, lat: 25.041332 },
]),
properties: {
strokeWeight: 20,
strokeColor: "#20D0E4",
id: 1,
},
})
checkboxElement.setAttribute("checked", true);
}
};
const toggleBtnSetStyle = document.getElementById("toggleBtnSetStyle");
toggleBtnSetStyle.setAttribute("checked", true);
toggleBtnSetStyle.addEventListener("click", () => {
toggleStyle(toggleBtnSetStyle);
});
const toggleMultiStyle = (checkboxElement) => {
if (checkboxElement.getAttribute("checked")) {
/* ══════════════════════════════════════════════════════════════════════════
* 刪除線條（依條件）
══════════════════════════════════════════════════════════════════════════ */
// 點擊第二個按鈕第一下，移除藍及黃兩個線條
map.data.setStyle((f) => {
if (f.getProperty("id") <= 2) map.data.removeFeature(f);
});
checkboxElement.removeAttribute("checked");
} else {
// 點擊第二下，將移除的線條加回地圖上
map.data.add({
geometry: new mapPlus.Data.LineString([
{ lng: 121.519633, lat: 25.045716 },
{ lng: 121.535425, lat: 25.041954 },
{ lng: 121.543594, lat: 25.041654 },
{ lng: 121.557682, lat: 25.041332 },
]),
properties: {
strokeWeight: 20,
strokeColor: "#20D0E4",
id: 1,
},
});
map.data.add({
geometry: new mapPlus.Data.LineString([
{ lng: 121.533018, lat: 25.051893 },
{ lng: 121.532708, lat: 25.033877 },
]),
properties: {
strokeWeight: 20,
strokeColor: "#F0E68C",
id: 2,
},
});
checkboxElement.setAttribute("checked", true);
}
};
const toggleMultiBtnSetStyle = document.getElementById("toggleMultiBtnSetStyle");
toggleMultiBtnSetStyle.setAttribute("checked", true);
toggleMultiBtnSetStyle.addEventListener("click", () => {
toggleMultiStyle(toggleMultiBtnSetStyle);
});
const toggleToGeoJson = (checkboxElement) => {
if (checkboxElement.getAttribute("checked")) {
// 取得資料層 Geojson 的資料，並顯示內容
map.data.toGeoJson((data) => {
const element = document.getElementById("toGeoJson");
element.style.display = "block";
element.innerHTML = JSON.stringify(data, null, 2);
});
checkboxElement.removeAttribute("checked");
} else {
document.getElementById("toGeoJson").style.display = "none";
checkboxElement.setAttribute("checked", true);
}
};
const toggleBtnToGeoJson = document.getElementById("toggleBtnToGeoJson");
toggleBtnToGeoJson.setAttribute("checked", true);
toggleBtnToGeoJson.addEventListener("click", () => {
toggleToGeoJson(toggleBtnToGeoJson);
});
</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;
height: fit-content;
}
#toGeoJson {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 50%;
height: 100%;
overflow: auto;
background: rgba(255, 255, 255, 0.8);
display: none;
}
</style>