座標點調整文字外觀
此範例示範如何在地圖上調整座標點 Feature 的文字外觀，包含以下功能：
- 變更座標點位置及文字內容：使用
getProperty()取得 id 並使用setGeometry()變更座標點位置及使用map.data.setStyle()方法來變更文字內容及大小 - 設定文字背景框：使用
textRectEnabled等屬性啟用並設定文字背景框樣式 - 變更文字樣式：使用
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-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.52449353370274, lat: 25.026540436497626 },
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.Point({
lng: 121.5286289828877,
lat: 25.027373577925888,
}),
properties: {
textField: "Size20",
textSize: 20,
title: "point4",
id: 1,
},
});
// 新增第二個點
map.data.add({
geometry: new mapPlus.Data.Point({
lng: 121.52225776991352,
lat: 25.026686419244356,
}),
properties: {
textField: "我快到了",
textSize: 14,
id: 2,
textLetterSpacing: 0.1,
textOffset: [-1, -1.5],
textAnchor: "right",
},
});
// 新增第三個點
map.data.add({
geometry: new mapPlus.Data.Point({
lng: 121.52044832858763,
lat: 25.025126634176872,
}),
properties: {
textField: "後面有車",
textSize: 14,
id: 3,
textAnchor: "right",
textOffset: [-1, -1.5],
},
});
const toggleStyle = (checkboxElement) => {
// 點擊第一下按鈕
if (checkboxElement.getAttribute("checked")) {
map.data.setStyle((f) => {
/* ══════════════════════════════════════════════════════════════════════════
* 變更 ID 為 1 的座標點位置及文字內容：
- 可調整 setGeometry() 中的座標值，變更座標點位置。
- 可調整 textField，變更文字內容。
- 可調整 textSize，變更文字大小。
══════════════════════════════════════════════════════════════════════════ */
if (f.getProperty("id") === 1) {
// 變更 ID 為 1 的座標點位置
f.setGeometry([121.52449353370274, 25.028040436497626]);
// 變更文字內容與樣式
return {
// 文字內容
textField: "Size30",
// 文字大小
textSize: 30,
};
}
/* ══════════════════════════════════════════════════════════════════════════
* 變更 ID 為 2 的座標點文字樣式：
- 可調整 textOffset，變更文字位置。
- 可調整 textAnchor，變更文字錨點位置。
- 可調整 textRectEnabled，啟用/關閉文字背景框。
- 可調整 textRect- 開頭的屬性，變更文字背景框的樣式。
══════════════════════════════════════════════════════════════════════════ */
if (f.getProperty("id") === 2) {
// 變更 ID 為 2 的文字樣式
return {
// 文字位置
textOffset: [0, -5],
// 文字錨點位置
textAnchor: "center",
// 啟用文字背景框
textRectEnabled: true,
// 文字背景框的邊框顏色
textRectStrokeColor: "black",
// 文字背景框的邊框寬度
textRectStrokeWidth: 2,
// 文字背景框的透明度
textRectOpacity: 0.8,
// 文字背景框的圓角值
textRectBorderRadius: 16,
}
}
/* ══════════════════════════════════════════════════════════════════════════
* 變更 ID 為 3 的座標點文字樣式：
- 可調整 textOffset，變更文字位置。
- 可調整 textAnchor，變更文字錨點位置。
- 可調整 textStrokeColor，變更文字邊框顏色。
- 可調整 textStrokeWidth，變更文字邊框寬度。
- 可調整 textColor，變更文字顏色。
══════════════════════════════════════════════════════════════════════════ */
if (f.getProperty("id") === 3) {
// 變更 ID 為 3 的文字樣式
return {
// 文字位置
textOffset: [0, 2],
// 文字錨點位置
textAnchor: "center",
// 文字邊框顏色
textStrokeColor: "orange",
// 文字邊框寬度
textStrokeWidth: 2,
// 文字顏色
textColor: "white",
};
}
});
checkboxElement.removeAttribute("checked");
} else {
// 點擊第二下按鈕，回復座標點原始設定
map.data.setStyle((f) => {
if (f.getProperty("id") === 1) {
f.setGeometry([121.5286289828877, 25.027373577925888]);
return {
textField: "Size20",
textSize: 20,
};
} else if (f.getProperty("id") === 2) {
return {
textAnchor: "right",
textOffset: [-1, -1.5],
textRectEnabled: false,
}
} else if (f.getProperty("id") === 3) {
return {
textAnchor: "right",
textStrokeWidth: 0,
textColor: "black",
textOffset: [-1, -1.5],
};
}
});
checkboxElement.setAttribute("checked", true);
}
};
const toggleBtnSetStyle = document.getElementById("toggleBtnSetStyle");
toggleBtnSetStyle.setAttribute("checked", true);
toggleBtnSetStyle.addEventListener("click", () => {
toggleStyle(toggleBtnSetStyle);
});
</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.52449353370274, lat: 25.026540436497626 },
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.Point({
lng: 121.5286289828877,
lat: 25.027373577925888,
}),
properties: {
textField: "Size20",
textSize: 20,
title: "point4",
id: 1,
},
});
// 新增第二個點
map.data.add({
geometry: new mapPlus.Data.Point({
lng: 121.52225776991352,
lat: 25.026686419244356,
}),
properties: {
textField: "我快到了",
textSize: 14,
id: 2,
textLetterSpacing: 0.1,
textOffset: [-1, -1.5],
textAnchor: "right",
},
});
// 新增第三個點
map.data.add({
geometry: new mapPlus.Data.Point({
lng: 121.52044832858763,
lat: 25.025126634176872,
}),
properties: {
textField: "後面有車",
textSize: 14,
id: 3,
textAnchor: "right",
textOffset: [-1, -1.5],
},
});
const toggleStyle = (checkboxElement) => {
// 點擊第一下按鈕
if (checkboxElement.getAttribute("checked")) {
map.data.setStyle((f) => {
/* ══════════════════════════════════════════════════════════════════════════
* 變更 ID 為 1 的座標點位置及文字內容：
- 可調整 setGeometry() 中的座標值，變更座標點位置。
- 可調整 textField，變更文字內容。
- 可調整 textSize，變更文字大小。
══════════════════════════════════════════════════════════════════════════ */
if (f.getProperty("id") === 1) {
// 變更 ID 為 1 的座標點位置
f.setGeometry([121.52449353370274, 25.028040436497626]);
// 變更文字內容與樣式
return {
// 文字內容
textField: "Size30",
// 文字大小
textSize: 30,
};
}
/* ══════════════════════════════════════════════════════════════════════════
* 變更 ID 為 2 的座標點文字樣式：
- 可調整 textOffset，變更文字位置。
- 可調整 textAnchor，變更文字錨點位置。
- 可調整 textRectEnabled，啟用/關閉文字背景框。
- 可調整 textRect- 開頭的屬性，變更文字背景框的樣式。
══════════════════════════════════════════════════════════════════════════ */
if (f.getProperty("id") === 2) {
// 變更 ID 為 2 的文字樣式
return {
// 文字位置
textOffset: [0, -5],
// 文字錨點位置
textAnchor: "center",
// 啟用文字背景框
textRectEnabled: true,
// 文字背景框的邊框顏色
textRectStrokeColor: "black",
// 文字背景框的邊框寬度
textRectStrokeWidth: 2,
// 文字背景框的透明度
textRectOpacity: 0.8,
// 文字背景框的圓角值
textRectBorderRadius: 16,
}
}
/* ══════════════════════════════════════════════════════════════════════════
* 變更 ID 為 3 的座標點文字樣式：
- 可調整 textOffset，變更文字位置。
- 可調整 textAnchor，變更文字錨點位置。
- 可調整 textStrokeColor，變更文字邊框顏色。
- 可調整 textStrokeWidth，變更文字邊框寬度。
- 可調整 textColor，變更文字顏色。
══════════════════════════════════════════════════════════════════════════ */
if (f.getProperty("id") === 3) {
// 變更 ID 為 3 的文字樣式
return {
// 文字位置
textOffset: [0, 2],
// 文字錨點位置
textAnchor: "center",
// 文字邊框顏色
textStrokeColor: "orange",
// 文字邊框寬度
textStrokeWidth: 2,
// 文字顏色
textColor: "white",
};
}
});
checkboxElement.removeAttribute("checked");
} else {
// 點擊第二下按鈕，回復座標點原始設定
map.data.setStyle((f) => {
if (f.getProperty("id") === 1) {
f.setGeometry([121.5286289828877, 25.027373577925888]);
return {
textField: "Size20",
textSize: 20,
};
} else if (f.getProperty("id") === 2) {
return {
textAnchor: "right",
textOffset: [-1, -1.5],
textRectEnabled: false,
}
} else if (f.getProperty("id") === 3) {
return {
textAnchor: "right",
textStrokeWidth: 0,
textColor: "black",
textOffset: [-1, -1.5],
};
}
});
checkboxElement.setAttribute("checked", true);
}
};
const toggleBtnSetStyle = document.getElementById("toggleBtnSetStyle");
toggleBtnSetStyle.setAttribute("checked", true);
toggleBtnSetStyle.addEventListener("click", () => {
toggleStyle(toggleBtnSetStyle);
});
</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>