支援 GeoJSON
此範例示範如何使用 addGeoJson() 一次載入多種幾何圖形，包含以下功能：
- 新增 GeoJSON 資料：使用
map.data.addGeoJson()載入FeatureCollection，同時展示座標點、線條、多邊形及圓形四種幾何圖形，並透過各 Feature 的屬性設定線寬、顏色與填色。
info
詳細使用說明請參考「加入 GeoJSON 資料」。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>支援 GeoJSON</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.539489, lat: 25.043539 },
zoom: 14,
});
/* ══════════════════════════════════════════════════════════════════════════
* 新增 GeoJSON 資料，調整 feature 中的 properties 可分別設置樣式：
- 調整 strokeWeight/strokeColor 可分別設置線條的寬度/顏色。
- 調整 fillColor/fillOpacity 可分別設置多邊形的填色/透明度。
══════════════════════════════════════════════════════════════════════════ */
// GeoJSON 資料
const geoJsonData = {
type: "FeatureCollection",
features: [
// 座標點 feature
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [121.53554486242585, 25.036656919945415],
},
properties: {
id: 1
},
},
// 線條 feature
{
type: "Feature",
geometry: {
type: "LineString",
coordinates: [
[121.519633, 25.045716],
[121.535425, 25.041954],
[121.543594, 25.041654],
[121.557682, 25.041332],
],
},
properties: {
// 線條寬度
strokeWeight: 10,
// 線條顏色
strokeColor: "#20D0E4",
id: 2,
},
},
// 多邊形 feature
{
type: "Feature",
geometry: {
type: "Polygon",
coordinates: [
[
[121.5366316419258, 25.04843241829805],
[121.53648492590236, 25.04493869783461],
[121.54219657216049, 25.04469051801719],
[121.54090283425433, 25.048422667727493],
[121.5366316419258, 25.04843241829805],
],
],
},
properties: {
// 多邊形填色
fillColor: "PaleGreen",
// 多邊形外框線寬度
strokeWeight: 10,
// 多邊形外框線顏色
strokeColor: "LimeGreen",
id: 3,
},
},
// 圓形 feature
{
"geometry": {
"coordinates": [
[
[121.5407346448196, 25.037656919945416],
[121.54072891569216, 25.03776258029973],
[121.54071178348451, 25.037867223087076],
[121.54068341318916, 25.037969840540203],
[121.54064407802757, 25.038069444396942],
[121.54059415681884, 25.038165075417705],
[121.5405341303315, 25.038255812623483],
[121.54046457665343, 25.038340782165385],
[121.5403861656246, 25.03841916574027],
[121.54029965238605, 25.038490208471465],
[121.54020587010758, 25.03855322617863],
[121.5401057219638, 25.0386076119668],
[121.54000017243605, 25.038652842071105],
[121.53989023802403, 25.03868848090091],
[121.53977697745619, 25.038714185234806],
[121.53966148149371, 25.038729707526006],
[121.53954486242586, 25.03873489828636],
[121.539428243358, 25.038729707526006],
[121.53931274739553, 25.038714185234806],
[121.53919948682768, 25.03868848090091],
[121.53908955241566, 25.038652842071105],
[121.53898400288791, 25.0386076119668],
[121.53888385474413, 25.03855322617863],
[121.53879007246566, 25.038490208471465],
[121.53870355922712, 25.03841916574027],
[121.53862514819828, 25.038340782165385],
[121.53855559452022, 25.038255812623483],
[121.53849556803287, 25.038165075417705],
[121.53844564682414, 25.038069444396942],
[121.53840631166256, 25.037969840540203],
[121.5383779413672, 25.037867223087076],
[121.53836080915956, 25.03776258029973],
[121.53835508003212, 25.037656919945416],
[121.53836080915956, 25.0375512595911],
[121.5383779413672, 25.037446616803756],
[121.53840631166256, 25.03734399935063],
[121.53844564682414, 25.03724439549389],
[121.53849556803287, 25.037148764473127],
[121.53855559452022, 25.03705802726735],
[121.53862514819828, 25.036973057725447],
[121.53870355922712, 25.036894674150563],
[121.53879007246566, 25.036823631419367],
[121.53888385474413, 25.0367606137122],
[121.53898400288791, 25.036706227924032],
[121.53908955241566, 25.036660997819727],
[121.53919948682768, 25.036625358989923],
[121.53931274739553, 25.036599654656026],
[121.539428243358, 25.036584132364826],
[121.53954486242586, 25.03657894160447],
[121.53966148149371, 25.036584132364826],
[121.53977697745619, 25.036599654656026],
[121.53989023802403, 25.036625358989923],
[121.54000017243605, 25.036660997819727],
[121.5401057219638, 25.036706227924032],
[121.54020587010758, 25.0367606137122],
[121.54029965238605, 25.036823631419367],
[121.5403861656246, 25.036894674150563],
[121.54046457665343, 25.036973057725447],
[121.5405341303315, 25.03705802726735],
[121.54059415681884, 25.037148764473127],
[121.54064407802757, 25.03724439549389],
[121.54068341318916, 25.03734399935063],
[121.54071178348451, 25.037446616803756],
[121.54072891569216, 25.0375512595911],
[121.5407346448196, 25.037656919945416]
]
],
"type": "Polygon",
"center": {
"lng": 121.53954486242586,
"lat": 25.037656919945416
},
"radius": 120,
"segments": 64,
"properties": {}
},
"properties": {
// 圓形填色
"fillColor": "#F1E68C",
// 圓形填色透明度
"fillOpacity": 1,
// 圓形外框線寬度
"strokeWeight": 10,
// 圓形外框線顏色
"strokeColor": "#ffcf0f",
"id": 4,
"circleCenter": {
"lng": 121.53954486242586,
"lat": 25.037656919945416
},
"circleRadius": 120
},
"id": 4,
"type": "Feature"
}
],
};
// 將 GeoJSON 加入資料層中
map.data.addGeoJson(geoJsonData);
</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.539489, lat: 25.043539 },
zoom: 14,
});
/* ══════════════════════════════════════════════════════════════════════════
* 新增 GeoJSON 資料，調整 feature 中的 properties 可分別設置樣式：
- 調整 strokeWeight/strokeColor 可分別設置線條的寬度/顏色。
- 調整 fillColor/fillOpacity 可分別設置多邊形的填色/透明度。
══════════════════════════════════════════════════════════════════════════ */
// GeoJSON 資料
const geoJsonData = {
type: "FeatureCollection",
features: [
// 座標點 feature
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [121.53554486242585, 25.036656919945415],
},
properties: {
id: 1
},
},
// 線條 feature
{
type: "Feature",
geometry: {
type: "LineString",
coordinates: [
[121.519633, 25.045716],
[121.535425, 25.041954],
[121.543594, 25.041654],
[121.557682, 25.041332],
],
},
properties: {
// 線條寬度
strokeWeight: 10,
// 線條顏色
strokeColor: "#20D0E4",
id: 2,
},
},
// 多邊形 feature
{
type: "Feature",
geometry: {
type: "Polygon",
coordinates: [
[
[121.5366316419258, 25.04843241829805],
[121.53648492590236, 25.04493869783461],
[121.54219657216049, 25.04469051801719],
[121.54090283425433, 25.048422667727493],
[121.5366316419258, 25.04843241829805],
],
],
},
properties: {
// 多邊形填色
fillColor: "PaleGreen",
// 多邊形外框線寬度
strokeWeight: 10,
// 多邊形外框線顏色
strokeColor: "LimeGreen",
id: 3,
},
},
// 圓形 feature
{
"geometry": {
"coordinates": [
[
[121.5407346448196, 25.037656919945416],
[121.54072891569216, 25.03776258029973],
[121.54071178348451, 25.037867223087076],
[121.54068341318916, 25.037969840540203],
[121.54064407802757, 25.038069444396942],
[121.54059415681884, 25.038165075417705],
[121.5405341303315, 25.038255812623483],
[121.54046457665343, 25.038340782165385],
[121.5403861656246, 25.03841916574027],
[121.54029965238605, 25.038490208471465],
[121.54020587010758, 25.03855322617863],
[121.5401057219638, 25.0386076119668],
[121.54000017243605, 25.038652842071105],
[121.53989023802403, 25.03868848090091],
[121.53977697745619, 25.038714185234806],
[121.53966148149371, 25.038729707526006],
[121.53954486242586, 25.03873489828636],
[121.539428243358, 25.038729707526006],
[121.53931274739553, 25.038714185234806],
[121.53919948682768, 25.03868848090091],
[121.53908955241566, 25.038652842071105],
[121.53898400288791, 25.0386076119668],
[121.53888385474413, 25.03855322617863],
[121.53879007246566, 25.038490208471465],
[121.53870355922712, 25.03841916574027],
[121.53862514819828, 25.038340782165385],
[121.53855559452022, 25.038255812623483],
[121.53849556803287, 25.038165075417705],
[121.53844564682414, 25.038069444396942],
[121.53840631166256, 25.037969840540203],
[121.5383779413672, 25.037867223087076],
[121.53836080915956, 25.03776258029973],
[121.53835508003212, 25.037656919945416],
[121.53836080915956, 25.0375512595911],
[121.5383779413672, 25.037446616803756],
[121.53840631166256, 25.03734399935063],
[121.53844564682414, 25.03724439549389],
[121.53849556803287, 25.037148764473127],
[121.53855559452022, 25.03705802726735],
[121.53862514819828, 25.036973057725447],
[121.53870355922712, 25.036894674150563],
[121.53879007246566, 25.036823631419367],
[121.53888385474413, 25.0367606137122],
[121.53898400288791, 25.036706227924032],
[121.53908955241566, 25.036660997819727],
[121.53919948682768, 25.036625358989923],
[121.53931274739553, 25.036599654656026],
[121.539428243358, 25.036584132364826],
[121.53954486242586, 25.03657894160447],
[121.53966148149371, 25.036584132364826],
[121.53977697745619, 25.036599654656026],
[121.53989023802403, 25.036625358989923],
[121.54000017243605, 25.036660997819727],
[121.5401057219638, 25.036706227924032],
[121.54020587010758, 25.0367606137122],
[121.54029965238605, 25.036823631419367],
[121.5403861656246, 25.036894674150563],
[121.54046457665343, 25.036973057725447],
[121.5405341303315, 25.03705802726735],
[121.54059415681884, 25.037148764473127],
[121.54064407802757, 25.03724439549389],
[121.54068341318916, 25.03734399935063],
[121.54071178348451, 25.037446616803756],
[121.54072891569216, 25.0375512595911],
[121.5407346448196, 25.037656919945416]
]
],
"type": "Polygon",
"center": {
"lng": 121.53954486242586,
"lat": 25.037656919945416
},
"radius": 120,
"segments": 64,
"properties": {}
},
"properties": {
// 圓形填色
"fillColor": "#F1E68C",
// 圓形填色透明度
"fillOpacity": 1,
// 圓形外框線寬度
"strokeWeight": 10,
// 圓形外框線顏色
"strokeColor": "#ffcf0f",
"id": 4,
"circleCenter": {
"lng": 121.53954486242586,
"lat": 25.037656919945416
},
"circleRadius": 120
},
"id": 4,
"type": "Feature"
}
],
};
// 將 GeoJSON 加入資料層中
map.data.addGeoJson(geoJsonData);
</script>
<style>
body { margin: 0; padding: 0; }
#map { width: 100vw; height: 100vh; }
</style>