多邊形增加文字
此範例示範如何在地圖上為多邊形 Feature 增加文字顯示，包含以下功能：
- 增加/移除文字說明：使用
displayFeatureText()方法將文字顯示在多邊形中心，使用removeDisplayText()方法移除顯示的文字 - 變更文字來源：透過
displayFeatureText()指定顯示固定字串或屬性名稱 - 變更文字樣式：使用
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-file-minus-fill"></i>
</label>
</div>
<div>
<input
type="checkbox"
class="btn-check"
id="toggleBtnSetOtherText"
autocomplete="off"
/>
<label
class="btn btn-outline-primary"
for="toggleBtnSetOtherText"
data-bs-toggle="tooltip"
data-bs-placement="left"
data-bs-title="變更文字來源"
>
<i class="bi bi-calendar3-range-fill"></i>
</label>
</div>
<div>
<input
type="checkbox"
class="btn-check"
id="toggleBtnLayerStyle"
autocomplete="off"
/>
<label
class="btn btn-outline-primary"
for="toggleBtnLayerStyle"
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"]');
const tooltipInit = [...tooltipList].map(
(tooltip) => new bootstrap.Tooltip(tooltip)
);
// 將左上多邊形加進資料層
map.data.add({
geometry: new mapPlus.Data.Polygon([
[
{ lng: 121.51774279394641, lat: 25.02830346908604 },
{ lng: 121.51848131881536, lat: 25.027301911647328 },
{ lng: 121.51888179979937, lat: 25.027533732578846 },
{ lng: 121.51909424825834, lat: 25.02752555293422 },
{ lng: 121.51970762723715, lat: 25.027930516565775 },
{ lng: 121.51885490101677, lat: 25.028941308227516 },
],
]),
properties: {
strokeWeight: 5,
fillColor: "#F0E68C",
strokeColor: "#DAA520",
fillOpacity: 1,
id: 0,
},
});
// 將左下多邊形加進資料層
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: {
strokeWeight: 5,
fillColor: "#F0E68C",
strokeColor: "#DAA520",
fillOpacity: 1,
id: 1,
},
});
// 將中間多邊形加進資料層
map.data.add({
geometry: new mapPlus.Data.Polygon([
[
{ lng: 121.5211730858556, lat: 25.02679842059477 },
{ lng: 121.52245995711473, lat: 25.025773483332074 },
{ lng: 121.52260219452722, lat: 25.026567885946108 },
{ lng: 121.52227143457367, lat: 25.027006377834994 },
],
]),
properties: {
strokeWeight: 5,
fillColor: "#F0E68C",
strokeColor: "#DAA520",
fillOpacity: 1,
id: 2,
},
});
// 將右上多邊形加進資料層
map.data.add({
geometry: new mapPlus.Data.Polygon([
[
{ lng: 121.52376442749033, lat: 25.028484711165802 },
{ lng: 121.52366949650514, lat: 25.027805426509175 },
{ lng: 121.52506256692686, lat: 25.027523673142227 },
{ lng: 121.52514665561011, lat: 25.028383339796434 },
],
]),
properties: {
strokeWeight: 5,
fillColor: "#F0E68C",
strokeColor: "#DAA520",
fillOpacity: 1,
id: 3,
},
});
// 將右下多邊形加進資料層
map.data.add({
geometry: new mapPlus.Data.Polygon([
[
{ lng: 121.52499224179655, lat: 25.026768269600595 },
{ lng: 121.52482990223632, lat: 25.025040181561437 },
{ lng: 121.52824880309294, lat: 25.02481642414638 },
{ lng: 121.52841649248722, lat: 25.026473113087235 },
],
]),
properties: {
strokeWeight: 5,
fillColor: "#F0E68C",
strokeColor: "#DAA520",
fillOpacity: 1,
id: 4,
},
});
const toggleStyle = (checkboxElement) => {
if (checkboxElement.getAttribute("checked")) {
/* ══════════════════════════════════════════════════════════════════════════
* 增加文字說明：
- 可調整 displayFeatureText() 中的參數，改顯示不同的文字。
══════════════════════════════════════════════════════════════════════════ */
// 點擊第一個按鈕第一下，將文字說明加至多邊形上方
map.data.setStyle((feature) => {
// 左上角的多邊形文字顯示『K』，其餘顯示各自的 id
if (feature.properties.id === 0) feature.displayFeatureText("K");
else feature.displayFeatureText("id");
// 多邊形文字顯示『A』
// feature.displayFeatureText("A");
});
checkboxElement.removeAttribute("checked");
} else {
// 點擊第一個按鈕第二下，移除顯示的文字
map.data.setStyle((feature) => {
feature.removeDisplayText();
});
checkboxElement.setAttribute("checked", true);
}
};
const toggleBtnSetStyle = document.getElementById("toggleBtnSetStyle");
toggleBtnSetStyle.setAttribute("checked", true);
toggleBtnSetStyle.addEventListener("click", () => {
toggleStyle(toggleBtnSetStyle);
});
const toggleSetOtherText = (checkboxElement) => {
if (checkboxElement.getAttribute("checked")) {
/* ══════════════════════════════════════════════════════════════════════════
* 變更文字來源
══════════════════════════════════════════════════════════════════════════ */
// 點擊第二個按鈕第一下，將文字說明加至多邊形上方
map.data.setStyle((feature) => {
// 抓取『fillColor』的屬性欄位
feature.displayFeatureText("fillColor");
});
checkboxElement.removeAttribute("checked");
} else {
map.data.setStyle((feature) => {
// 點擊第二個按鈕第二下，移除顯示的文字
feature.removeDisplayText();
});
checkboxElement.setAttribute("checked", true);
}
};
const toggleBtnSetOtherText = document.getElementById("toggleBtnSetOtherText");
toggleBtnSetOtherText.setAttribute("checked", true);
toggleBtnSetOtherText.addEventListener("click", () => {
toggleSetOtherText(toggleBtnSetOtherText);
});
const toggleLayerStyle = (checkboxElement) => {
if (checkboxElement.getAttribute("checked")) {
// 顯示文字在多邊形上
map.data.setStyle((feature) => {
if (feature.properties.id === 0) feature.displayFeatureText("K");
else feature.displayFeatureText("id");
});
/* ══════════════════════════════════════════════════════════════════════════
* 變更文字樣式：
- 可調整文字大小及文字顏色。
══════════════════════════════════════════════════════════════════════════ */
// 點擊第三個按鈕第一下
map.data.setStyle((feature) => {
// 左側兩個多邊形文字大小修改為 25，其餘則修改為 20
const size = feature.getProperty("id") < 2 ? 25 : 20;
// 左側兩個多邊形文字大小修改為 20，其餘則修改為 15
// const size = feature.getProperty("id") < 2 ? 20 : 15;
// 左側兩個多邊形文字顏色修改為藍色，其餘則修改為綠色
const color = feature.getProperty("id") < 2 ? "blue" : "darkgreen";
// 左側兩個多邊形文字顏色修改為橘色，其餘則修改為灰色
// const color = feature.getProperty("id") < 2 ? "orange" : "grey";
return {
textSize: size,
textColor: color,
};
});
checkboxElement.removeAttribute("checked");
} else {
// 恢復文字的原始狀態
map.data.setStyle({ textColor: "black", textSize: 14 });
checkboxElement.setAttribute("checked", true);
}
};
const toggleBtnLayerStyle = document.getElementById("toggleBtnLayerStyle");
toggleBtnLayerStyle.setAttribute("checked", true);
toggleBtnLayerStyle.addEventListener("click", () => {
toggleLayerStyle(toggleBtnLayerStyle);
});
</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"]');
const tooltipInit = [...tooltipList].map(
(tooltip) => new bootstrap.Tooltip(tooltip)
);
// 將左上多邊形加進資料層
map.data.add({
geometry: new mapPlus.Data.Polygon([
[
{ lng: 121.51774279394641, lat: 25.02830346908604 },
{ lng: 121.51848131881536, lat: 25.027301911647328 },
{ lng: 121.51888179979937, lat: 25.027533732578846 },
{ lng: 121.51909424825834, lat: 25.02752555293422 },
{ lng: 121.51970762723715, lat: 25.027930516565775 },
{ lng: 121.51885490101677, lat: 25.028941308227516 },
],
]),
properties: {
strokeWeight: 5,
fillColor: "#F0E68C",
strokeColor: "#DAA520",
fillOpacity: 1,
id: 0,
},
});
// 將左下多邊形加進資料層
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: {
strokeWeight: 5,
fillColor: "#F0E68C",
strokeColor: "#DAA520",
fillOpacity: 1,
id: 1,
},
});
// 將中間多邊形加進資料層
map.data.add({
geometry: new mapPlus.Data.Polygon([
[
{ lng: 121.5211730858556, lat: 25.02679842059477 },
{ lng: 121.52245995711473, lat: 25.025773483332074 },
{ lng: 121.52260219452722, lat: 25.026567885946108 },
{ lng: 121.52227143457367, lat: 25.027006377834994 },
],
]),
properties: {
strokeWeight: 5,
fillColor: "#F0E68C",
strokeColor: "#DAA520",
fillOpacity: 1,
id: 2,
},
});
// 將右上多邊形加進資料層
map.data.add({
geometry: new mapPlus.Data.Polygon([
[
{ lng: 121.52376442749033, lat: 25.028484711165802 },
{ lng: 121.52366949650514, lat: 25.027805426509175 },
{ lng: 121.52506256692686, lat: 25.027523673142227 },
{ lng: 121.52514665561011, lat: 25.028383339796434 },
],
]),
properties: {
strokeWeight: 5,
fillColor: "#F0E68C",
strokeColor: "#DAA520",
fillOpacity: 1,
id: 3,
},
});
// 將右下多邊形加進資料層
map.data.add({
geometry: new mapPlus.Data.Polygon([
[
{ lng: 121.52499224179655, lat: 25.026768269600595 },
{ lng: 121.52482990223632, lat: 25.025040181561437 },
{ lng: 121.52824880309294, lat: 25.02481642414638 },
{ lng: 121.52841649248722, lat: 25.026473113087235 },
],
]),
properties: {
strokeWeight: 5,
fillColor: "#F0E68C",
strokeColor: "#DAA520",
fillOpacity: 1,
id: 4,
},
});
const toggleStyle = (checkboxElement) => {
if (checkboxElement.getAttribute("checked")) {
/* ══════════════════════════════════════════════════════════════════════════
* 增加文字說明：
- 可調整 displayFeatureText() 中的參數，改顯示不同的文字。
══════════════════════════════════════════════════════════════════════════ */
// 點擊第一個按鈕第一下，將文字說明加至多邊形上方
map.data.setStyle((feature) => {
// 左上角的多邊形文字顯示『K』，其餘顯示各自的 id
if (feature.properties.id === 0) feature.displayFeatureText("K");
else feature.displayFeatureText("id");
// 多邊形文字顯示『A』
// feature.displayFeatureText("A");
});
checkboxElement.removeAttribute("checked");
} else {
// 點擊第一個按鈕第二下，移除顯示的文字
map.data.setStyle((feature) => {
feature.removeDisplayText();
});
checkboxElement.setAttribute("checked", true);
}
};
const toggleBtnSetStyle = document.getElementById("toggleBtnSetStyle");
toggleBtnSetStyle.setAttribute("checked", true);
toggleBtnSetStyle.addEventListener("click", () => {
toggleStyle(toggleBtnSetStyle);
});
const toggleSetOtherText = (checkboxElement) => {
if (checkboxElement.getAttribute("checked")) {
/* ══════════════════════════════════════════════════════════════════════════
* 變更文字來源
══════════════════════════════════════════════════════════════════════════ */
// 點擊第二個按鈕第一下，將文字說明加至多邊形上方
map.data.setStyle((feature) => {
// 抓取『fillColor』的屬性欄位
feature.displayFeatureText("fillColor");
});
checkboxElement.removeAttribute("checked");
} else {
map.data.setStyle((feature) => {
// 點擊第二個按鈕第二下，移除顯示的文字
feature.removeDisplayText();
});
checkboxElement.setAttribute("checked", true);
}
};
const toggleBtnSetOtherText = document.getElementById("toggleBtnSetOtherText");
toggleBtnSetOtherText.setAttribute("checked", true);
toggleBtnSetOtherText.addEventListener("click", () => {
toggleSetOtherText(toggleBtnSetOtherText);
});
const toggleLayerStyle = (checkboxElement) => {
if (checkboxElement.getAttribute("checked")) {
// 顯示文字在多邊形上
map.data.setStyle((feature) => {
if (feature.properties.id === 0) feature.displayFeatureText("K");
else feature.displayFeatureText("id");
});
/* ══════════════════════════════════════════════════════════════════════════
* 變更文字樣式：
- 可調整文字大小及文字顏色。
══════════════════════════════════════════════════════════════════════════ */
// 點擊第三個按鈕第一下
map.data.setStyle((feature) => {
// 左側兩個多邊形文字大小修改為 25，其餘則修改為 20
const size = feature.getProperty("id") < 2 ? 25 : 20;
// 左側兩個多邊形文字大小修改為 20，其餘則修改為 15
// const size = feature.getProperty("id") < 2 ? 20 : 15;
// 左側兩個多邊形文字顏色修改為藍色，其餘則修改為綠色
const color = feature.getProperty("id") < 2 ? "blue" : "darkgreen";
// 左側兩個多邊形文字顏色修改為橘色，其餘則修改為灰色
// const color = feature.getProperty("id") < 2 ? "orange" : "grey";
return {
textSize: size,
textColor: color,
};
});
checkboxElement.removeAttribute("checked");
} else {
// 恢復文字的原始狀態
map.data.setStyle({ textColor: "black", textSize: 14 });
checkboxElement.setAttribute("checked", true);
}
};
const toggleBtnLayerStyle = document.getElementById("toggleBtnLayerStyle");
toggleBtnLayerStyle.setAttribute("checked", true);
toggleBtnLayerStyle.addEventListener("click", () => {
toggleLayerStyle(toggleBtnLayerStyle);
});
</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>