Feature 的順序調整
此範例示範如何控制資料層 feature 的前後順序，包含以下功能：
- 調整同類型 Feature 順序：使用
map.data.setStyle()設定zIndex，交換多邊形上下層順序 - 交換資料層圖層順序：使用
map.swapLayers()交換線條與多邊形圖層 - 與 POI 圖層交換：使用
map.swapLayers()交換資料層與 POI 圖層
info
詳細使用說明請參考「資料層」。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Feature 的順序調整</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;
}
</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>
<input
type="checkbox"
class="btn-check"
id="toggleBtnZorder"
autocomplete="off"
/>
<label
class="btn btn-outline-primary"
for="toggleBtnZorder"
data-bs-toggle="tooltip"
data-bs-placement="left"
data-bs-title="將淺綠色多邊形往上移"
><i class="bi bi-layers-fill"></i>
</label>
</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-filter-circle-fill"></i>
</label>
</div>
<div>
<input
type="checkbox"
class="btn-check"
id="toggleBtnDataLayerSwap"
autocomplete="off"
/>
<label
class="btn btn-outline-primary"
for="toggleBtnDataLayerSwap"
data-bs-toggle="tooltip"
data-bs-placement="left"
data-bs-title="淺綠色多邊形與poi圖層交換"
><i class="bi bi-flag-fill"></i>
</label>
</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: { lng: 121.521221, lat: 25.025789 },
zoom: 16.5,
});
// Bootstrap 提示訊息 初始化
const tooltipList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
[...tooltipList].map((tooltip) => new bootstrap.Tooltip(tooltip));
// 將淺綠色多邊形加進地圖
map.data.add({
geometry: new mapPlus.Data.Polygon([
[
{ lng: 121.519018, lat: 25.02641 },
{ lng: 121.519034, lat: 25.025088 },
{ lng: 121.521683, lat: 25.024107 },
{ lng: 121.523315, lat: 25.025878 },
{ lng: 121.522366, lat: 25.027047 },
],
]),
properties: {
fillColor: "PaleGreen",
fillOpacity: 0.8,
id: 1,
},
});
// 將深綠色多邊形加進地圖
map.data.add({
geometry: new mapPlus.Data.Polygon([
[
{ lng: 121.51995462852591, lat: 25.025617866336162 },
{ lng: 121.51980338007291, lat: 25.025138193693877 },
{ lng: 121.52038136523652, lat: 25.02489346203282 },
{ lng: 121.52039757042922, lat: 25.024815147797838 },
{ lng: 121.52070006733726, lat: 25.024731938867987 },
{ lng: 121.5207702898328, lat: 25.02494240840406 },
{ lng: 121.52064064830142, lat: 25.0249962493903 },
{ lng: 121.52074868291123, lat: 25.025422081810575 },
],
]),
properties: {
fillColor: "LimeGreen",
strokeOpacity: 0,
id: 2,
},
});
// 將黃色線條加進地圖
map.data.add({
geometry: new mapPlus.Data.LineString([
{ lng: 121.521115, lat: 25.02681 },
{ lng: 121.522838, lat: 25.025389 },
]),
properties: { strokeColor: "#F0E68C", strokeWeight: 8, id: 3 },
});
map.data.add({
geometry: new mapPlus.Data.LineString([
{ lng: 121.520932, lat: 25.026777 },
{ lng: 121.521407, lat: 25.025796 },
{ lng: 121.521661, lat: 25.025786 },
{ lng: 121.521848, lat: 25.025194 },
{ lng: 121.522414, lat: 25.02492 },
]),
properties: { strokeColor: "#F0E68C", strokeWeight: 8, id: 4 },
});
map.data.add({
geometry: new mapPlus.Data.LineString([
{ lng: 121.521153, lat: 25.026279 },
{ lng: 121.520653, lat: 25.025996 },
{ lng: 121.520492, lat: 25.025631 },
{ lng: 121.521544, lat: 25.025074 },
{ lng: 121.521872, lat: 25.024784 },
{ lng: 121.522043, lat: 25.024515 },
]),
properties: { strokeColor: "#F0E68C", strokeWeight: 8, id: 5 },
});
map.data.add({
geometry: new mapPlus.Data.LineString([
{ lng: 121.519046, lat: 25.026018 },
{ lng: 121.519628, lat: 25.026048 },
{ lng: 121.519844, lat: 25.026114 },
{ lng: 121.520487, lat: 25.025632 },
]),
properties: { strokeColor: "#F0E68C", strokeWeight: 8, id: 6 },
});
map.data.add({
geometry: new mapPlus.Data.LineString([
{ lng: 121.52265, lat: 25.026618 },
{ lng: 121.5224, lat: 25.024929 },
]),
properties: { strokeColor: "#F0E68C", strokeWeight: 8, id: 7 },
});
map.data.add({
geometry: new mapPlus.Data.LineString([
{ lng: 121.521571, lat: 25.026879 },
{ lng: 121.521619, lat: 25.026689 },
{ lng: 121.522068, lat: 25.026196 },
{ lng: 121.522187, lat: 25.026289 },
]),
properties: { strokeColor: "#F0E68C", strokeWeight: 8, id: 8 },
});
// 將深綠色圓形加進地圖
map.data.add({
geometry: new mapPlus.Data.Circle({
lng: 121.521289,
lat: 25.025796,
radius: 50,
}),
properties: {
strokeWeight: 0,
fillColor: "#6FE26A",
fillOpacity: 1,
id: 9,
},
});
// 將座標點加進地圖
map.data.add({
geometry: new mapPlus.Data.Point({
lng: 121.522289,
lat: 25.026796,
}),
properties: { id: 10 },
});
const toggleZorder = (checkboxElement) => {
/* ══════════════════════════════════════════════════════════════════════════
* 當點擊第一個按鈕時，將下層淺綠色多邊形往上移。
- 可調整 zIndex 來查看圖層在不同位置的呈現。
══════════════════════════════════════════════════════════════════════════ */
if (checkboxElement.getAttribute("checked")) {
// 點擊第一下，將下層淺綠色多邊形往上移
map.data.setStyle((feature) => {
if (feature.getProperty("id") === 1) return { zIndex: 5 };
});
checkboxElement.removeAttribute("checked");
} else {
// 點擊第二下，將淺綠色多邊形往下移
map.data.setStyle((feature) => {
if (feature.getProperty("id") === 1) return { zIndex: 0 };
});
checkboxElement.setAttribute("checked", true);
}
// 重新繪製地圖以立即顯示圖層順序變化
map.redraw();
};
const toggleBtnZorder = document.getElementById("toggleBtnZorder");
toggleBtnZorder.setAttribute("checked", true);
toggleBtnZorder.addEventListener("click", () => {
toggleZorder(toggleBtnZorder);
});
const toggleStyle = (checkboxElement) => {
/* ══════════════════════════════════════════════════════════════════════════
* 當點擊第二個按鈕時，交換線條與多邊形圖層。
- 可調整圖層 id 參數："pointLayer"（點）、"lineLayer"（線）、"fillLayer"（多邊形）
══════════════════════════════════════════════════════════════════════════ */
if (checkboxElement.getAttribute("checked")) {
// 點擊第一下，交換線條與淺綠色多邊形圖層
map.swapLayers("lineLayer", "fillLayer");
checkboxElement.removeAttribute("checked");
} else {
// 點擊第二下，交換回來
map.swapLayers("lineLayer", "fillLayer");
checkboxElement.setAttribute("checked", true);
}
// 重新繪製地圖以立即顯示圖層順序變化
map.redraw();
};
const toggleBtnSetStyle = document.getElementById("toggleBtnSetStyle");
toggleBtnSetStyle.setAttribute("checked", true);
toggleBtnSetStyle.addEventListener("click", () => {
toggleStyle(toggleBtnSetStyle);
});
const toggleDataLayerSwap = (checkboxElement) => {
/* ══════════════════════════════════════════════════════════════════════════
* 當點擊第三個按鈕時，交換 POI 與淺綠色多邊形圖層。
══════════════════════════════════════════════════════════════════════════ */
if (checkboxElement.getAttribute("checked")) {
// 點擊第一下，交換 POI 與淺綠色多邊形圖層
map.swapLayers("fillLayer", "poi_school_all");
checkboxElement.removeAttribute("checked");
} else {
// 點擊第二下，交換回來
map.swapLayers("fillLayer", "poi_school_all");
checkboxElement.setAttribute("checked", true);
}
// 重新繪製地圖以立即顯示圖層順序變化
map.redraw();
};
const toggleBtnDataLayerSwap = document.getElementById(
"toggleBtnDataLayerSwap"
);
toggleBtnDataLayerSwap.setAttribute("checked", true);
toggleBtnDataLayerSwap.addEventListener("click", () => {
toggleDataLayerSwap(toggleBtnDataLayerSwap);
});
</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: { lng: 121.521221, lat: 25.025789 },
zoom: 16.5,
});
// Bootstrap 提示訊息 初始化
const tooltipList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
[...tooltipList].map((tooltip) => new bootstrap.Tooltip(tooltip));
// 將淺綠色多邊形加進地圖
map.data.add({
geometry: new mapPlus.Data.Polygon([
[
{ lng: 121.519018, lat: 25.02641 },
{ lng: 121.519034, lat: 25.025088 },
{ lng: 121.521683, lat: 25.024107 },
{ lng: 121.523315, lat: 25.025878 },
{ lng: 121.522366, lat: 25.027047 },
],
]),
properties: {
fillColor: "PaleGreen",
fillOpacity: 0.8,
id: 1,
},
});
// 將深綠色多邊形加進地圖
map.data.add({
geometry: new mapPlus.Data.Polygon([
[
{ lng: 121.51995462852591, lat: 25.025617866336162 },
{ lng: 121.51980338007291, lat: 25.025138193693877 },
{ lng: 121.52038136523652, lat: 25.02489346203282 },
{ lng: 121.52039757042922, lat: 25.024815147797838 },
{ lng: 121.52070006733726, lat: 25.024731938867987 },
{ lng: 121.5207702898328, lat: 25.02494240840406 },
{ lng: 121.52064064830142, lat: 25.0249962493903 },
{ lng: 121.52074868291123, lat: 25.025422081810575 },
],
]),
properties: {
fillColor: "LimeGreen",
strokeOpacity: 0,
id: 2,
},
});
// 將黃色線條加進地圖
map.data.add({
geometry: new mapPlus.Data.LineString([
{ lng: 121.521115, lat: 25.02681 },
{ lng: 121.522838, lat: 25.025389 },
]),
properties: { strokeColor: "#F0E68C", strokeWeight: 8, id: 3 },
});
map.data.add({
geometry: new mapPlus.Data.LineString([
{ lng: 121.520932, lat: 25.026777 },
{ lng: 121.521407, lat: 25.025796 },
{ lng: 121.521661, lat: 25.025786 },
{ lng: 121.521848, lat: 25.025194 },
{ lng: 121.522414, lat: 25.02492 },
]),
properties: { strokeColor: "#F0E68C", strokeWeight: 8, id: 4 },
});
map.data.add({
geometry: new mapPlus.Data.LineString([
{ lng: 121.521153, lat: 25.026279 },
{ lng: 121.520653, lat: 25.025996 },
{ lng: 121.520492, lat: 25.025631 },
{ lng: 121.521544, lat: 25.025074 },
{ lng: 121.521872, lat: 25.024784 },
{ lng: 121.522043, lat: 25.024515 },
]),
properties: { strokeColor: "#F0E68C", strokeWeight: 8, id: 5 },
});
map.data.add({
geometry: new mapPlus.Data.LineString([
{ lng: 121.519046, lat: 25.026018 },
{ lng: 121.519628, lat: 25.026048 },
{ lng: 121.519844, lat: 25.026114 },
{ lng: 121.520487, lat: 25.025632 },
]),
properties: { strokeColor: "#F0E68C", strokeWeight: 8, id: 6 },
});
map.data.add({
geometry: new mapPlus.Data.LineString([
{ lng: 121.52265, lat: 25.026618 },
{ lng: 121.5224, lat: 25.024929 },
]),
properties: { strokeColor: "#F0E68C", strokeWeight: 8, id: 7 },
});
map.data.add({
geometry: new mapPlus.Data.LineString([
{ lng: 121.521571, lat: 25.026879 },
{ lng: 121.521619, lat: 25.026689 },
{ lng: 121.522068, lat: 25.026196 },
{ lng: 121.522187, lat: 25.026289 },
]),
properties: { strokeColor: "#F0E68C", strokeWeight: 8, id: 8 },
});
// 將深綠色圓形加進地圖
map.data.add({
geometry: new mapPlus.Data.Circle({
lng: 121.521289,
lat: 25.025796,
radius: 50,
}),
properties: {
strokeWeight: 0,
fillColor: "#6FE26A",
fillOpacity: 1,
id: 9,
},
});
// 將座標點加進地圖
map.data.add({
geometry: new mapPlus.Data.Point({
lng: 121.522289,
lat: 25.026796,
}),
properties: { id: 10 },
});
const toggleZorder = (checkboxElement) => {
/* ══════════════════════════════════════════════════════════════════════════
* 當點擊第一個按鈕時，將下層淺綠色多邊形往上移。
- 可調整 zIndex 來查看圖層在不同位置的呈現。
══════════════════════════════════════════════════════════════════════════ */
if (checkboxElement.getAttribute("checked")) {
// 點擊第一下，將下層淺綠色多邊形往上移
map.data.setStyle((feature) => {
if (feature.getProperty("id") === 1) return { zIndex: 5 };
});
checkboxElement.removeAttribute("checked");
} else {
// 點擊第二下，將淺綠色多邊形往下移
map.data.setStyle((feature) => {
if (feature.getProperty("id") === 1) return { zIndex: 0 };
});
checkboxElement.setAttribute("checked", true);
}
// 重新繪製地圖以立即顯示圖層順序變化
map.redraw();
};
const toggleBtnZorder = document.getElementById("toggleBtnZorder");
toggleBtnZorder.setAttribute("checked", true);
toggleBtnZorder.addEventListener("click", () => {
toggleZorder(toggleBtnZorder);
});
const toggleStyle = (checkboxElement) => {
/* ══════════════════════════════════════════════════════════════════════════
* 當點擊第二個按鈕時，交換線條與多邊形圖層。
- 可調整圖層 id 參數："pointLayer"（點）、"lineLayer"（線）、"fillLayer"（多邊形）
══════════════════════════════════════════════════════════════════════════ */
if (checkboxElement.getAttribute("checked")) {
// 點擊第一下，交換線條與淺綠色多邊形圖層
map.swapLayers("lineLayer", "fillLayer");
checkboxElement.removeAttribute("checked");
} else {
// 點擊第二下，交換回來
map.swapLayers("lineLayer", "fillLayer");
checkboxElement.setAttribute("checked", true);
}
// 重新繪製地圖以立即顯示圖層順序變化
map.redraw();
};
const toggleBtnSetStyle = document.getElementById("toggleBtnSetStyle");
toggleBtnSetStyle.setAttribute("checked", true);
toggleBtnSetStyle.addEventListener("click", () => {
toggleStyle(toggleBtnSetStyle);
});
const toggleDataLayerSwap = (checkboxElement) => {
/* ══════════════════════════════════════════════════════════════════════════
* 當點擊第三個按鈕時，交換 POI 與淺綠色多邊形圖層。
══════════════════════════════════════════════════════════════════════════ */
if (checkboxElement.getAttribute("checked")) {
// 點擊第一下，交換 POI 與淺綠色多邊形圖層
map.swapLayers("fillLayer", "poi_school_all");
checkboxElement.removeAttribute("checked");
} else {
// 點擊第二下，交換回來
map.swapLayers("fillLayer", "poi_school_all");
checkboxElement.setAttribute("checked", true);
}
// 重新繪製地圖以立即顯示圖層順序變化
map.redraw();
};
const toggleBtnDataLayerSwap = document.getElementById(
"toggleBtnDataLayerSwap"
);
toggleBtnDataLayerSwap.setAttribute("checked", true);
toggleBtnDataLayerSwap.addEventListener("click", () => {
toggleDataLayerSwap(toggleBtnDataLayerSwap);
});
</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;
}
</style>