多邊形的點擊事件
此範例示範如何在地圖上實現多邊形 Feature 的點擊事件，包含以下功能：
- 更改游標樣式：使用
map.addListener()監聽mouseover和mouseout事件，在可點擊圖形範圍內更改游標圖案 - 點擊多邊形變色：使用
map.addListener("click")監聽點擊事件，變更多邊形的填充顏色 - 設定不可點擊：使用
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>
<style>
body { margin: 0; padding: 0; }
#map { width: 100vw; height: 100vh; }
</style>
</head>
<body>
<div id="map"></div>
<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,
});
// 將左上多邊形加進資料層
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,
},
});
/* ══════════════════════════════════════════════════════════════════════════
* 更改游標樣式
══════════════════════════════════════════════════════════════════════════ */
map.addListener("mouseover", (feature) => {
map.data.revertStyle();
// 滑鼠游標在可點擊幾何圖案範圍內更改游標圖案
map.data.setStyle({ cursor: "pointer" });
});
map.addListener("mouseout", (event) => {
map.data.revertStyle();
map.data.setStyle({ cursor: "" });
});
/* ══════════════════════════════════════════════════════════════════════════
* 點擊多邊形變色：
- 可調整 fillColor 的值，更換為其他多邊形顏色。
══════════════════════════════════════════════════════════════════════════ */
map.addListener("click", (feature) => {
map.data.setStyle((f) => {
if (f.getProperty("id") !== feature.getProperty("id")) return;
// 點擊多邊形會變成灰色，再次點擊則變為黃色
const color = f.getProperty("fillColor") === "#F0E68C" ? "gray" : "#F0E68C";
// 點擊多邊形會變成橘色，再次點擊則變為白色
// const color = f.getProperty("fillColor") === "orange" ? "white" : "orange";
return { fillColor: color };
});
});
/* ══════════════════════════════════════════════════════════════════════════
* 設定不可點擊：
- 可更換其他條件來設置其他多邊形為不可點擊。
══════════════════════════════════════════════════════════════════════════ */
map.data.setStyle((fea) => {
// 將 ID 為 0 的左上多邊形設定為不可點擊
if (fea.getProperty("id") === 0) return { clickable: false };
// 將 ID 為 1 的左下多邊形設定為不可點擊
// if (fea.getProperty("id") === 1) return { clickable: false };
});
</script>
</body>
</html>
<script src="https://kw3dmap.localking.com.tw/openapi/loader/mapPlus-1.3.9.loader.js" crossorigin="anonymous" referrerpolicy="origin"></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,
});
// 將左上多邊形加進資料層
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,
},
});
/* ══════════════════════════════════════════════════════════════════════════
* 更改游標樣式
══════════════════════════════════════════════════════════════════════════ */
map.addListener("mouseover", (feature) => {
map.data.revertStyle();
// 滑鼠游標在可點擊幾何圖案範圍內更改游標圖案
map.data.setStyle({ cursor: "pointer" });
});
map.addListener("mouseout", (event) => {
map.data.revertStyle();
map.data.setStyle({ cursor: "" });
});
/* ══════════════════════════════════════════════════════════════════════════
* 點擊多邊形變色：
- 可調整 fillColor 的值，更換為其他多邊形顏色。
══════════════════════════════════════════════════════════════════════════ */
map.addListener("click", (feature) => {
map.data.setStyle((f) => {
if (f.getProperty("id") !== feature.getProperty("id")) return;
// 點擊多邊形會變成灰色，再次點擊則變為黃色
const color = f.getProperty("fillColor") === "#F0E68C" ? "gray" : "#F0E68C";
// 點擊多邊形會變成橘色，再次點擊則變為白色
// const color = f.getProperty("fillColor") === "orange" ? "white" : "orange";
return { fillColor: color };
});
});
/* ══════════════════════════════════════════════════════════════════════════
* 設定不可點擊：
- 可更換其他條件來設置其他多邊形為不可點擊。
══════════════════════════════════════════════════════════════════════════ */
map.data.setStyle((fea) => {
// 將 ID 為 0 的左上多邊形設定為不可點擊
if (fea.getProperty("id") === 0) return { clickable: false };
// 將 ID 為 1 的左下多邊形設定為不可點擊
// if (fea.getProperty("id") === 1) return { clickable: false };
});
</script>
<style>
body { margin: 0; padding: 0; }
#map { width: 100vw; height: 100vh; }
</style>