畫筆工具
此範例示範如何使用畫筆工具，包含以下功能：
- 加入畫筆工具：在
style.load後加入畫筆工具 - 載入既有圖形：使用
draw.add()載入預設 GeoJSON 進行編輯
info
詳細使用說明請參考「DrawControl」。
<!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: [121.52251734614822, 25.026224105188575],
pitch: 0,
bearing: 0,
zoom: 15,
maxZoom: 18,
minZoom: 7,
});
/* ══════════════════════════════════════════════════════════════════════════
* 加入畫筆工具：
- 可調整 DrawControl 中的參數來查看不同效果。
══════════════════════════════════════════════════════════════════════════ */
map.on("style.load", () => {
const draw = new mapPlus.DrawControl({
// 是否顯示預設畫筆工具按鈕
useButton: true,
// 是否啟用連續繪圖模式
continuousDrawing: false,
// 是否顯示測量值
showMeasureValue: false,
// 是否使用自訂按鈕來實現繪圖功能
enableCustomButtonManagement: false,
});
map.addControl(draw);
// 載入既有圖形
draw.add(geojson);
});
const geojson = {
type: "FeatureCollection",
features: [
{
id: "b2d060a32f31fad5e5b29a79a8f9dc1c",
type: "Feature",
properties: {},
geometry: {
coordinates: [
[
[121.5192278526817, 25.028929071125077],
[121.51926003919039, 25.023339174113687],
[121.52019344792706, 25.02331973054872],
[121.52017199025522, 25.025516833831745],
[121.52201735005872, 25.025458504164305],
[121.52196370587819, 25.023203069098585],
[121.5228112839257, 25.023164181923306],
[121.52297221646728, 25.02893879246318],
[121.52203880773055, 25.02897767780871],
[121.52201735005872, 25.02635288935113],
[121.52017199025522, 25.02635288935113],
[121.52019344792706, 25.02893879246318],
[121.5192278526817, 25.028929071125077],
],
],
type: "Polygon",
},
},
{
id: "d50d0fca8da29944edce58b3528c360b",
type: "Feature",
properties: {},
geometry: {
coordinates: [
[
[121.52440988049659, 25.02739308628867],
[121.52440988049847, 25.023028080252246],
[121.5253432892352, 25.02296974949904],
[121.52533256039834, 25.027373643398278],
[121.52440988049659, 25.02739308628867],
],
],
type: "Polygon",
},
},
{
id: "2ad758b4bd70e5a1c58452ddd3a85b92",
type: "Feature",
properties: {},
geometry: {
coordinates: [
[
[121.52489267812115, 25.029019540969724],
[121.52483241397148, 25.029016858391174],
[121.5247727302064, 25.029008836490572],
[121.52471420162065, 25.02899555252424],
[121.52465739188352, 25.02897713442573],
[121.52460284810991, 25.02895375957365],
[121.52455109559112, 25.02892565308337],
[121.52450263273602, 25.0288930856389],
[121.52445792627059, 25.028856370885947],
[121.52441740674328, 25.028815862411218],
[121.52438146437864, 25.02877195033701],
[121.5243504453189, 25.028725057564014],
[121.52432464829089, 25.02867563569843],
[121.52430432172909, 25.02862416070259],
[121.52428966138329, 25.02857112831111],
[121.5242808084337, 25.0285170492566],
[121.52427784813152, 25.02846244435094],
[121.52428080897823, 25.028407839469583],
[121.52428966245148, 25.02835376048703],
[121.52430432327982, 25.028300728212407],
[121.52432465026462, 25.028249253373836],
[121.52435044763976, 25.02819983169988],
[121.52438146695745, 25.028152939145514],
[121.52441740948093, 25.02810902730853],
[121.52445792906182, 25.028068519080506],
[121.52450263547362, 25.028031804574262],
[121.52455109816991, 25.027999237367016],
[121.52460285043075, 25.02797113109537],
[121.52465739385725, 25.027947756434916],
[121.52471420317141, 25.027929338493674],
[121.52477273127455, 25.027916054644198],
[121.52483241451606, 25.02790803281556],
[121.52489267812115, 25.02790535026131],
[121.52495294172624, 25.02790803281556],
[121.52501262496773, 25.027916054644198],
[121.52507115307087, 25.027929338493674],
[121.52512796238503, 25.027947756434916],
[121.52518250581154, 25.02797113109537],
[121.52523425807236, 25.027999237367016],
[121.52528272076866, 25.028031804574262],
[121.52532742718046, 25.028068519080506],
[121.52536794676134, 25.02810902730853],
[121.52540388928483, 25.028152939145514],
[121.5254349086025, 25.02819983169988],
[121.52546070597766, 25.028249253373836],
[121.52548103296246, 25.028300728212407],
[121.52549569379082, 25.02835376048703],
[121.52550454726403, 25.028407839469583],
[121.52550750811076, 25.02846244435094],
[121.52550454780858, 25.0285170492566],
[121.525495694859, 25.02857112831111],
[121.52548103451319, 25.02862416070259],
[121.5254607079514, 25.02867563569843],
[121.52543491092337, 25.028725057564014],
[121.52540389186363, 25.02877195033701],
[121.52536794949899, 25.028815862411218],
[121.52532742997171, 25.028856370885947],
[121.52528272350627, 25.0288930856389],
[121.52523426065115, 25.02892565308337],
[121.52518250813239, 25.02895375957365],
[121.52512796435876, 25.02897713442573],
[121.52507115462163, 25.02899555252424],
[121.52501262603589, 25.029008836490572],
[121.52495294227079, 25.029016858391174],
[121.52489267812115, 25.029019540969724],
[121.52489267812115, 25.029019540969724],
],
],
type: "Polygon",
},
},
],
};
</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: [121.52251734614822, 25.026224105188575],
pitch: 0,
bearing: 0,
zoom: 15,
maxZoom: 18,
minZoom: 7,
});
/* ══════════════════════════════════════════════════════════════════════════
* 加入畫筆工具：
- 可調整 DrawControl 中的參數來查看不同效果。
══════════════════════════════════════════════════════════════════════════ */
map.on("style.load", () => {
const draw = new mapPlus.DrawControl({
// 是否顯示預設畫筆工具按鈕
useButton: true,
// 是否啟用連續繪圖模式
continuousDrawing: false,
// 是否顯示測量值
showMeasureValue: false,
// 是否使用自訂按鈕來實現繪圖功能
enableCustomButtonManagement: false,
});
map.addControl(draw);
// 載入既有圖形
draw.add(geojson);
});
const geojson = {
type: "FeatureCollection",
features: [
{
id: "b2d060a32f31fad5e5b29a79a8f9dc1c",
type: "Feature",
properties: {},
geometry: {
coordinates: [
[
[121.5192278526817, 25.028929071125077],
[121.51926003919039, 25.023339174113687],
[121.52019344792706, 25.02331973054872],
[121.52017199025522, 25.025516833831745],
[121.52201735005872, 25.025458504164305],
[121.52196370587819, 25.023203069098585],
[121.5228112839257, 25.023164181923306],
[121.52297221646728, 25.02893879246318],
[121.52203880773055, 25.02897767780871],
[121.52201735005872, 25.02635288935113],
[121.52017199025522, 25.02635288935113],
[121.52019344792706, 25.02893879246318],
[121.5192278526817, 25.028929071125077],
],
],
type: "Polygon",
},
},
{
id: "d50d0fca8da29944edce58b3528c360b",
type: "Feature",
properties: {},
geometry: {
coordinates: [
[
[121.52440988049659, 25.02739308628867],
[121.52440988049847, 25.023028080252246],
[121.5253432892352, 25.02296974949904],
[121.52533256039834, 25.027373643398278],
[121.52440988049659, 25.02739308628867],
],
],
type: "Polygon",
},
},
{
id: "2ad758b4bd70e5a1c58452ddd3a85b92",
type: "Feature",
properties: {},
geometry: {
coordinates: [
[
[121.52489267812115, 25.029019540969724],
[121.52483241397148, 25.029016858391174],
[121.5247727302064, 25.029008836490572],
[121.52471420162065, 25.02899555252424],
[121.52465739188352, 25.02897713442573],
[121.52460284810991, 25.02895375957365],
[121.52455109559112, 25.02892565308337],
[121.52450263273602, 25.0288930856389],
[121.52445792627059, 25.028856370885947],
[121.52441740674328, 25.028815862411218],
[121.52438146437864, 25.02877195033701],
[121.5243504453189, 25.028725057564014],
[121.52432464829089, 25.02867563569843],
[121.52430432172909, 25.02862416070259],
[121.52428966138329, 25.02857112831111],
[121.5242808084337, 25.0285170492566],
[121.52427784813152, 25.02846244435094],
[121.52428080897823, 25.028407839469583],
[121.52428966245148, 25.02835376048703],
[121.52430432327982, 25.028300728212407],
[121.52432465026462, 25.028249253373836],
[121.52435044763976, 25.02819983169988],
[121.52438146695745, 25.028152939145514],
[121.52441740948093, 25.02810902730853],
[121.52445792906182, 25.028068519080506],
[121.52450263547362, 25.028031804574262],
[121.52455109816991, 25.027999237367016],
[121.52460285043075, 25.02797113109537],
[121.52465739385725, 25.027947756434916],
[121.52471420317141, 25.027929338493674],
[121.52477273127455, 25.027916054644198],
[121.52483241451606, 25.02790803281556],
[121.52489267812115, 25.02790535026131],
[121.52495294172624, 25.02790803281556],
[121.52501262496773, 25.027916054644198],
[121.52507115307087, 25.027929338493674],
[121.52512796238503, 25.027947756434916],
[121.52518250581154, 25.02797113109537],
[121.52523425807236, 25.027999237367016],
[121.52528272076866, 25.028031804574262],
[121.52532742718046, 25.028068519080506],
[121.52536794676134, 25.02810902730853],
[121.52540388928483, 25.028152939145514],
[121.5254349086025, 25.02819983169988],
[121.52546070597766, 25.028249253373836],
[121.52548103296246, 25.028300728212407],
[121.52549569379082, 25.02835376048703],
[121.52550454726403, 25.028407839469583],
[121.52550750811076, 25.02846244435094],
[121.52550454780858, 25.0285170492566],
[121.525495694859, 25.02857112831111],
[121.52548103451319, 25.02862416070259],
[121.5254607079514, 25.02867563569843],
[121.52543491092337, 25.028725057564014],
[121.52540389186363, 25.02877195033701],
[121.52536794949899, 25.028815862411218],
[121.52532742997171, 25.028856370885947],
[121.52528272350627, 25.0288930856389],
[121.52523426065115, 25.02892565308337],
[121.52518250813239, 25.02895375957365],
[121.52512796435876, 25.02897713442573],
[121.52507115462163, 25.02899555252424],
[121.52501262603589, 25.029008836490572],
[121.52495294227079, 25.029016858391174],
[121.52489267812115, 25.029019540969724],
[121.52489267812115, 25.029019540969724],
],
],
type: "Polygon",
},
},
],
};
</script>
<style>
body { margin: 0; padding: 0; }
#map { width: 100vw; height: 100vh; }
</style>