Feature 調整樣式
此範例示範如何在同一資料層中調整點、線、面與圓形的顯示樣式，包含以下功能：
- 變更/還原樣式：使用
map.data.setStyle({...})一次變更線寬、透明度與填色 - 清空並回到預設樣式：使用
map.data.setStyle({})移除已套用的自訂樣式
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="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-hexagon-fill"></i>
</label>
</div>
<div>
<input
type="checkbox"
class="btn-check"
id="toggleBtnDefault"
autocomplete="off"
/>
<label
class="btn btn-outline-primary"
for="toggleBtnDefault"
data-bs-toggle="tooltip"
data-bs-placement="left"
data-bs-title="回到預設樣式"
>
<i class="bi bi-gear-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.539489, lat: 25.043539 },
zoom: 14,
});
// Bootstrap 提示訊息初始化
const tooltipList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
[...tooltipList].map((tooltip) => new bootstrap.Tooltip(tooltip));
// 將藍色線條加入資料層
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: 10,
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: 10,
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: 10,
strokeColor: "#DEB887",
id: 3,
},
});
// 將左上的座標點加入資料層
map.data.add({
geometry: new mapPlus.Data.Point({
lng: 121.52344273535077,
lat: 25.047738045570924,
}),
properties: { id: 4 },
});
// 將中上的綠色多邊形加入資料層
map.data.add({
geometry: new mapPlus.Data.Polygon([
[
{ lng: 121.5366316419258, lat: 25.04843241829805 },
{ lng: 121.53648492590236, lat: 25.04493869783461 },
{ lng: 121.54219657216049, lat: 25.04469051801719 },
{ lng: 121.54090283425433, lat: 25.048422667727493 },
],
]),
properties: {
fillColor: "PaleGreen",
strokeWeight: 10,
strokeColor: "LimeGreen",
id: 5,
},
});
// 將右上的座標點加入資料層
map.data.add({
geometry: new mapPlus.Data.Point({
lng: 121.55305046036266,
lat: 25.045764018256193,
}),
properties: { id: 6 },
});
// 將左下的綠色多邊形加入資料層
map.data.add({
geometry: new mapPlus.Data.Polygon([
[
{ lng: 121.52225419281643, lat: 25.041035044764342 },
{ lng: 121.52110552016177, lat: 25.037042101709034 },
{ lng: 121.52727354398672, lat: 25.034082972950685 },
{ lng: 121.5287424696262, lat: 25.039473741237558 },
],
]),
properties: {
fillColor: "PaleGreen",
strokeWeight: 10,
strokeColor: "LimeGreen",
id: 7,
},
});
// 將中下的座標點加入資料層
map.data.add({
geometry: new mapPlus.Data.Point({
lng: 121.53554486242585,
lat: 25.036656919945415,
}),
properties: { id: 8 },
});
// 將右下的綠色多邊形加入資料層
map.data.add({
geometry: new mapPlus.Data.Polygon([
[
{ lng: 121.54881096991483, lat: 25.0378725451842 },
{ lng: 121.54871579901152, lat: 25.033312945049317 },
{ lng: 121.55346639302968, lat: 25.03321918583258 },
{ lng: 121.55342126831317, lat: 25.03460635234474 },
{ lng: 121.5544914913757, lat: 25.035501753482535 },
{ lng: 121.55449750188853, lat: 25.037701856883217 },
],
]),
properties: {
fillColor: "PaleGreen",
strokeWeight: 10,
strokeColor: "LimeGreen",
id: 9,
},
});
// 將左上的黃色圓形加入資料層
map.data.add({
geometry: new mapPlus.Data.Circle({
lng: 121.52744273535077,
lat: 25.048738045570925,
radius: 200,
}),
properties: {
strokeWeight: 10,
fillColor: "#F1E68C",
strokeColor: "#ffcf0f",
fillOpacity: 1,
id: 10,
},
});
// 將右上的黃色圓形加入資料層
map.data.add({
geometry: new mapPlus.Data.Circle({
lng: 121.54795046036266,
lat: 25.046864018256194,
radius: 300,
}),
properties: {
strokeWeight: 10,
fillColor: "#F1E68C",
strokeColor: "#ffcf0f",
fillOpacity: 1,
id: 11,
},
});
// 將中下的黃色圓形加入資料層
map.data.add({
geometry: new mapPlus.Data.Circle({
lng: 121.53954486242586,
lat: 25.037656919945416,
radius: 120,
}),
properties: {
strokeWeight: 10,
fillColor: "#F1E68C",
strokeColor: "#ffcf0f",
fillOpacity: 1,
id: 12,
},
});
const toggleStyle = (checkboxElement) => {
if (checkboxElement.getAttribute("checked")) {
/* ══════════════════════════════════════════════════════════════════════════
* 當點擊第一個按鈕時變更樣式：
- 調整 strokeWeight 可變更線條/多邊形/圓形外框寬度。
- 調整 strokeOpacity 可變更線條/多邊形/圓形外框透明度。
- 調整 fillColor 可變更多邊形/圓形填色。
══════════════════════════════════════════════════════════════════════════ */
// 變更樣式
map.data.setStyle({
// 線條寬度
strokeWeight: 15,
// 線條透明度
strokeOpacity: 1,
// 多邊形/圓形填色
fillColor: "darkslategray",
});
checkboxElement.removeAttribute("checked");
} else {
// 依 ID 還原不同 Feature 的樣式
map.data.setStyle((feature) => {
const { id } = feature.properties;
const style =
id === 1
? { strokeWeight: 15, strokeColor: "#20D0E4", strokeOpacity: 0.6, }
: id === 2
? { strokeWeight: 15, strokeColor: "#F0E68C", strokeOpacity: 0.6, }
: id === 3
? { strokeWeight: 15, strokeColor: "#DEB887", strokeOpacity: 0.6, }
: id === 5 || id === 7 || id === 9
? {
fillColor: "PaleGreen",
strokeWeight: 10,
strokeColor: "LimeGreen",
}
: {
fillColor: "#F1E68C",
strokeWeight: 10,
strokeColor: "#ffcf0f",
};
return style;
});
checkboxElement.setAttribute("checked", true);
}
};
const toggleBtnSetStyle = document.getElementById("toggleBtnSetStyle");
toggleBtnSetStyle.setAttribute("checked", true);
toggleBtnSetStyle.addEventListener("click", () => {
toggleStyle(toggleBtnSetStyle);
});
const togglePolygonStyle = (checkboxElement) => {
if (checkboxElement.getAttribute("checked")) {
// 清空樣式
map.data.setStyle({});
checkboxElement.removeAttribute("checked");
} else {
// 依 ID 還原不同 Feature 的樣式
map.data.setStyle((feature) => {
const { id } = feature.properties;
const style =
id === 1
? { strokeWeight: 15, strokeColor: "#20D0E4", strokeOpacity: 0.6, }
: id === 2
? { strokeWeight: 15, strokeColor: "#F0E68C", strokeOpacity: 0.6, }
: id === 3
? { strokeWeight: 15, strokeColor: "#DEB887", strokeOpacity: 0.6, }
: id === 5 || id === 7 || id === 9
? {
fillColor: "PaleGreen",
strokeWeight: 10,
strokeColor: "LimeGreen",
}
: {
fillColor: "#F1E68C",
strokeWeight: 10,
strokeColor: "#ffcf0f",
};
return style;
});
checkboxElement.setAttribute("checked", true);
}
};
const toggleBtnDefault = document.getElementById("toggleBtnDefault");
toggleBtnDefault.setAttribute("checked", true);
toggleBtnDefault.addEventListener("click", () => {
togglePolygonStyle(toggleBtnDefault);
});
</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.539489, lat: 25.043539 },
zoom: 14,
});
// Bootstrap 提示訊息初始化
const tooltipList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
[...tooltipList].map((tooltip) => new bootstrap.Tooltip(tooltip));
// 將藍色線條加入資料層
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: 10,
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: 10,
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: 10,
strokeColor: "#DEB887",
id: 3,
},
});
// 將左上的座標點加入資料層
map.data.add({
geometry: new mapPlus.Data.Point({
lng: 121.52344273535077,
lat: 25.047738045570924,
}),
properties: { id: 4 },
});
// 將中上的綠色多邊形加入資料層
map.data.add({
geometry: new mapPlus.Data.Polygon([
[
{ lng: 121.5366316419258, lat: 25.04843241829805 },
{ lng: 121.53648492590236, lat: 25.04493869783461 },
{ lng: 121.54219657216049, lat: 25.04469051801719 },
{ lng: 121.54090283425433, lat: 25.048422667727493 },
],
]),
properties: {
fillColor: "PaleGreen",
strokeWeight: 10,
strokeColor: "LimeGreen",
id: 5,
},
});
// 將右上的座標點加入資料層
map.data.add({
geometry: new mapPlus.Data.Point({
lng: 121.55305046036266,
lat: 25.045764018256193,
}),
properties: { id: 6 },
});
// 將左下的綠色多邊形加入資料層
map.data.add({
geometry: new mapPlus.Data.Polygon([
[
{ lng: 121.52225419281643, lat: 25.041035044764342 },
{ lng: 121.52110552016177, lat: 25.037042101709034 },
{ lng: 121.52727354398672, lat: 25.034082972950685 },
{ lng: 121.5287424696262, lat: 25.039473741237558 },
],
]),
properties: {
fillColor: "PaleGreen",
strokeWeight: 10,
strokeColor: "LimeGreen",
id: 7,
},
});
// 將中下的座標點加入資料層
map.data.add({
geometry: new mapPlus.Data.Point({
lng: 121.53554486242585,
lat: 25.036656919945415,
}),
properties: { id: 8 },
});
// 將右下的綠色多邊形加入資料層
map.data.add({
geometry: new mapPlus.Data.Polygon([
[
{ lng: 121.54881096991483, lat: 25.0378725451842 },
{ lng: 121.54871579901152, lat: 25.033312945049317 },
{ lng: 121.55346639302968, lat: 25.03321918583258 },
{ lng: 121.55342126831317, lat: 25.03460635234474 },
{ lng: 121.5544914913757, lat: 25.035501753482535 },
{ lng: 121.55449750188853, lat: 25.037701856883217 },
],
]),
properties: {
fillColor: "PaleGreen",
strokeWeight: 10,
strokeColor: "LimeGreen",
id: 9,
},
});
// 將左上的黃色圓形加入資料層
map.data.add({
geometry: new mapPlus.Data.Circle({
lng: 121.52744273535077,
lat: 25.048738045570925,
radius: 200,
}),
properties: {
strokeWeight: 10,
fillColor: "#F1E68C",
strokeColor: "#ffcf0f",
fillOpacity: 1,
id: 10,
},
});
// 將右上的黃色圓形加入資料層
map.data.add({
geometry: new mapPlus.Data.Circle({
lng: 121.54795046036266,
lat: 25.046864018256194,
radius: 300,
}),
properties: {
strokeWeight: 10,
fillColor: "#F1E68C",
strokeColor: "#ffcf0f",
fillOpacity: 1,
id: 11,
},
});
// 將中下的黃色圓形加入資料層
map.data.add({
geometry: new mapPlus.Data.Circle({
lng: 121.53954486242586,
lat: 25.037656919945416,
radius: 120,
}),
properties: {
strokeWeight: 10,
fillColor: "#F1E68C",
strokeColor: "#ffcf0f",
fillOpacity: 1,
id: 12,
},
});
const toggleStyle = (checkboxElement) => {
if (checkboxElement.getAttribute("checked")) {
/* ══════════════════════════════════════════════════════════════════════════
* 當點擊第一個按鈕時變更樣式：
- 調整 strokeWeight 可變更線條/多邊形/圓形外框寬度。
- 調整 strokeOpacity 可變更線條/多邊形/圓形外框透明度。
- 調整 fillColor 可變更多邊形/圓形填色。
══════════════════════════════════════════════════════════════════════════ */
// 變更樣式
map.data.setStyle({
// 線條寬度
strokeWeight: 15,
// 線條透明度
strokeOpacity: 1,
// 多邊形/圓形填色
fillColor: "darkslategray",
});
checkboxElement.removeAttribute("checked");
} else {
// 依 ID 還原不同 Feature 的樣式
map.data.setStyle((feature) => {
const { id } = feature.properties;
const style =
id === 1
? { strokeWeight: 15, strokeColor: "#20D0E4", strokeOpacity: 0.6, }
: id === 2
? { strokeWeight: 15, strokeColor: "#F0E68C", strokeOpacity: 0.6, }
: id === 3
? { strokeWeight: 15, strokeColor: "#DEB887", strokeOpacity: 0.6, }
: id === 5 || id === 7 || id === 9
? {
fillColor: "PaleGreen",
strokeWeight: 10,
strokeColor: "LimeGreen",
}
: {
fillColor: "#F1E68C",
strokeWeight: 10,
strokeColor: "#ffcf0f",
};
return style;
});
checkboxElement.setAttribute("checked", true);
}
};
const toggleBtnSetStyle = document.getElementById("toggleBtnSetStyle");
toggleBtnSetStyle.setAttribute("checked", true);
toggleBtnSetStyle.addEventListener("click", () => {
toggleStyle(toggleBtnSetStyle);
});
const togglePolygonStyle = (checkboxElement) => {
if (checkboxElement.getAttribute("checked")) {
// 清空樣式
map.data.setStyle({});
checkboxElement.removeAttribute("checked");
} else {
// 依 ID 還原不同 Feature 的樣式
map.data.setStyle((feature) => {
const { id } = feature.properties;
const style =
id === 1
? { strokeWeight: 15, strokeColor: "#20D0E4", strokeOpacity: 0.6, }
: id === 2
? { strokeWeight: 15, strokeColor: "#F0E68C", strokeOpacity: 0.6, }
: id === 3
? { strokeWeight: 15, strokeColor: "#DEB887", strokeOpacity: 0.6, }
: id === 5 || id === 7 || id === 9
? {
fillColor: "PaleGreen",
strokeWeight: 10,
strokeColor: "LimeGreen",
}
: {
fillColor: "#F1E68C",
strokeWeight: 10,
strokeColor: "#ffcf0f",
};
return style;
});
checkboxElement.setAttribute("checked", true);
}
};
const toggleBtnDefault = document.getElementById("toggleBtnDefault");
toggleBtnDefault.setAttribute("checked", true);
toggleBtnDefault.addEventListener("click", () => {
togglePolygonStyle(toggleBtnDefault);
});
</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>