圓形調整外觀
此範例示範如何在地圖上調整圓形 Feature 的外觀，包含以下功能：
- 變更圓形位置與樣式：使用
map.data.setStyle()配合條件判斷，並搭配setGeometry()變更指定圓形位置與樣式 - 套用預設樣式：使用
map.data.setStyle({})清空自訂樣式
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;
}
</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-circle-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.5227224646543, lat: 25.02701676669362 },
zoom: 15.8,
});
// Bootstrap 提示訊息 初始化
const tooltipList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
[...tooltipList].map((tooltip) => new bootstrap.Tooltip(tooltip));
// 將左上圓形加進資料層
map.data.add({
geometry: new mapPlus.Data.Circle({
lng: 121.518793,
lat: 25.027923,
radius: 80,
}),
properties: {
strokeWeight: 5,
fillColor: "#F0E68C",
strokeColor: "#DAA520",
fillOpacity: 1,
id: 0,
},
});
// 將左下圓形加進資料層
map.data.add({
geometry: new mapPlus.Data.Circle({
lng: 121.520326,
lat: 25.025145,
radius: 70,
}),
properties: {
strokeWeight: 5,
fillColor: "#F0E68C",
strokeColor: "#DAA520",
fillOpacity: 1,
id: 1,
},
});
// 將中間圓形加進資料層
map.data.add({
geometry: new mapPlus.Data.Circle({
lng: 121.522127,
lat: 25.026536,
radius: 60,
}),
properties: {
strokeWeight: 5,
fillColor: "#F0E68C",
strokeColor: "#DAA520",
fillOpacity: 1,
id: 2,
},
});
// 將右上圓形加進資料層
map.data.add({
geometry: new mapPlus.Data.Circle({
lng: 121.524411,
lat: 25.02805,
radius: 75,
}),
properties: {
strokeWeight: 5,
fillColor: "#F0E68C",
strokeColor: "#DAA520",
fillOpacity: 1,
id: 3,
},
});
// 將右下圓形加進資料層
map.data.add({
geometry: new mapPlus.Data.Circle({
lng: 121.526622,
lat: 25.025525,
radius: 120,
}),
properties: {
strokeWeight: 5,
fillColor: "#F0E68C",
strokeColor: "#DAA520",
fillOpacity: 1,
id: 4,
},
});
const toggleStyle = (checkboxElement) => {
if (checkboxElement.getAttribute("checked")) {
/* ══════════════════════════════════════════════════════════════════════════
* 變更右上圓形位置與樣式：
- 可調整 fillColor，變更圓形填色。
- 可調整 strokeOpacity，變更圓形外框透明度。
══════════════════════════════════════════════════════════════════════════ */
// 點擊第一個按鈕第一下，變更右上圓形位置與樣式
map.data.setStyle((fea) => {
if (fea.getProperty("id") === 3) {
// 取得圓形當前的座標點陣列
const currentCoords = fea.getGeometry();
// 取得當前中心點
const center = fea.getCenter();
// 新中心點位置
const newCenter = { lng: 121.523352, lat: 25.028969 };
// 計算偏移量
const offsetLng = newCenter.lng - center[0];
const offsetLat = newCenter.lat - center[1];
// 將所有座標點移動到新位置
const newCoords = currentCoords[0].map((point) => ([
point[0] + offsetLng,
point[1] + offsetLat,
]));
// 變更圓形的位置
fea.setGeometry([newCoords]);
// 變更右上圓形的填色為橘色，及外框透明度為 0
return {
fillColor: "orange",
strokeOpacity: 0,
};
// 變更右上圓形的填色為藍色，及外框透明度為 1
// return {
// fillColor: "skyblue",
// strokeOpacity: 1,
// };
}
});
checkboxElement.removeAttribute("checked");
} else {
// 點擊第一個按鈕第二下，恢復右上圓形位置與樣式
map.data.setStyle((fea) => {
if (fea.getProperty("id") === 3) {
// 取得圓形當前的座標點陣列
const currentCoords = fea.getGeometry();
// 取得當前中心點
const center = fea.getCenter();
// 原始中心點位置
const originalCenter = { lng: 121.524411, lat: 25.028050 };
// 計算偏移量
const offsetLng = originalCenter.lng - center[0];
const offsetLat = originalCenter.lat - center[1];
// 將所有座標點移動回原始位置
const originalCoords = currentCoords[0].map((point) => ([
point[0] + offsetLng,
point[1] + offsetLat,
]));
fea.setGeometry([originalCoords]);
return {
fillColor: "#F0E68C",
strokeOpacity: 0.8,
};
}
});
checkboxElement.setAttribute("checked", true);
}
};
const toggleBtnSetStyle = document.getElementById("toggleBtnSetStyle");
toggleBtnSetStyle.setAttribute("checked", true);
toggleBtnSetStyle.addEventListener("click", () => {
toggleStyle(toggleBtnSetStyle);
});
const toggleCircleStyle = (checkboxElement) => {
if (checkboxElement.getAttribute("checked")) {
/* ══════════════════════════════════════════════════════════════════════════
* 套用預設樣式
══════════════════════════════════════════════════════════════════════════ */
// 點擊第二個按鈕第一下，套用預設樣式
map.data.setStyle({});
checkboxElement.removeAttribute("checked");
} else {
map.data.setStyle({
strokeWeight: 5,
fillColor: "#F0E68C",
strokeColor: "#DAA520",
fillOpacity: 1,
});
checkboxElement.setAttribute("checked", true);
}
};
const toggleBtnDefault = document.getElementById("toggleBtnDefault");
toggleBtnDefault.setAttribute("checked", true);
toggleBtnDefault.addEventListener("click", () => {
toggleCircleStyle(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.5227224646543, lat: 25.02701676669362 },
zoom: 15.8,
});
// Bootstrap 提示訊息 初始化
const tooltipList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
[...tooltipList].map((tooltip) => new bootstrap.Tooltip(tooltip));
// 將左上圓形加進資料層
map.data.add({
geometry: new mapPlus.Data.Circle({
lng: 121.518793,
lat: 25.027923,
radius: 80,
}),
properties: {
strokeWeight: 5,
fillColor: "#F0E68C",
strokeColor: "#DAA520",
fillOpacity: 1,
id: 0,
},
});
// 將左下圓形加進資料層
map.data.add({
geometry: new mapPlus.Data.Circle({
lng: 121.520326,
lat: 25.025145,
radius: 70,
}),
properties: {
strokeWeight: 5,
fillColor: "#F0E68C",
strokeColor: "#DAA520",
fillOpacity: 1,
id: 1,
},
});
// 將中間圓形加進資料層
map.data.add({
geometry: new mapPlus.Data.Circle({
lng: 121.522127,
lat: 25.026536,
radius: 60,
}),
properties: {
strokeWeight: 5,
fillColor: "#F0E68C",
strokeColor: "#DAA520",
fillOpacity: 1,
id: 2,
},
});
// 將右上圓形加進資料層
map.data.add({
geometry: new mapPlus.Data.Circle({
lng: 121.524411,
lat: 25.02805,
radius: 75,
}),
properties: {
strokeWeight: 5,
fillColor: "#F0E68C",
strokeColor: "#DAA520",
fillOpacity: 1,
id: 3,
},
});
// 將右下圓形加進資料層
map.data.add({
geometry: new mapPlus.Data.Circle({
lng: 121.526622,
lat: 25.025525,
radius: 120,
}),
properties: {
strokeWeight: 5,
fillColor: "#F0E68C",
strokeColor: "#DAA520",
fillOpacity: 1,
id: 4,
},
});
const toggleStyle = (checkboxElement) => {
if (checkboxElement.getAttribute("checked")) {
/* ══════════════════════════════════════════════════════════════════════════
* 變更右上圓形位置與樣式：
- 可調整 fillColor，變更圓形填色。
- 可調整 strokeOpacity，變更圓形外框透明度。
══════════════════════════════════════════════════════════════════════════ */
// 點擊第一個按鈕第一下，變更右上圓形位置與樣式
map.data.setStyle((fea) => {
if (fea.getProperty("id") === 3) {
// 取得圓形當前的座標點陣列
const currentCoords = fea.getGeometry();
// 取得當前中心點
const center = fea.getCenter();
// 新中心點位置
const newCenter = { lng: 121.523352, lat: 25.028969 };
// 計算偏移量
const offsetLng = newCenter.lng - center[0];
const offsetLat = newCenter.lat - center[1];
// 將所有座標點移動到新位置
const newCoords = currentCoords[0].map((point) => ([
point[0] + offsetLng,
point[1] + offsetLat,
]));
// 變更圓形的位置
fea.setGeometry([newCoords]);
// 變更右上圓形的填色為橘色，及外框透明度為 0
return {
fillColor: "orange",
strokeOpacity: 0,
};
// 變更右上圓形的填色為藍色，及外框透明度為 1
// return {
// fillColor: "skyblue",
// strokeOpacity: 1,
// };
}
});
checkboxElement.removeAttribute("checked");
} else {
// 點擊第一個按鈕第二下，恢復右上圓形位置與樣式
map.data.setStyle((fea) => {
if (fea.getProperty("id") === 3) {
// 取得圓形當前的座標點陣列
const currentCoords = fea.getGeometry();
// 取得當前中心點
const center = fea.getCenter();
// 原始中心點位置
const originalCenter = { lng: 121.524411, lat: 25.028050 };
// 計算偏移量
const offsetLng = originalCenter.lng - center[0];
const offsetLat = originalCenter.lat - center[1];
// 將所有座標點移動回原始位置
const originalCoords = currentCoords[0].map((point) => ([
point[0] + offsetLng,
point[1] + offsetLat,
]));
fea.setGeometry([originalCoords]);
return {
fillColor: "#F0E68C",
strokeOpacity: 0.8,
};
}
});
checkboxElement.setAttribute("checked", true);
}
};
const toggleBtnSetStyle = document.getElementById("toggleBtnSetStyle");
toggleBtnSetStyle.setAttribute("checked", true);
toggleBtnSetStyle.addEventListener("click", () => {
toggleStyle(toggleBtnSetStyle);
});
const toggleCircleStyle = (checkboxElement) => {
if (checkboxElement.getAttribute("checked")) {
/* ══════════════════════════════════════════════════════════════════════════
* 套用預設樣式
══════════════════════════════════════════════════════════════════════════ */
// 點擊第二個按鈕第一下，套用預設樣式
map.data.setStyle({});
checkboxElement.removeAttribute("checked");
} else {
map.data.setStyle({
strokeWeight: 5,
fillColor: "#F0E68C",
strokeColor: "#DAA520",
fillOpacity: 1,
});
checkboxElement.setAttribute("checked", true);
}
};
const toggleBtnDefault = document.getElementById("toggleBtnDefault");
toggleBtnDefault.setAttribute("checked", true);
toggleBtnDefault.addEventListener("click", () => {
toggleCircleStyle(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>