所有控制器

電子地圖上可添加的控制器

控制器描述
AttributionControl顯示地圖的資訊。
DrawControl地圖繪圖功能。
FrameRateControl顯示地圖的 FPS。
FullscreenControl全螢幕功能。
MassTransitControl控制大眾運輸顯示或隱藏。
MeasureControl地圖測距功能。
NavigationControl導覽功能，包括縮放按鈕和指南針。
RouteNavControl地圖導航功能。
ScaleControl比例尺功能。
SearchControl地圖搜尋功能。
SelectControl選取工具。
StyleModeControl切換地圖風格模式。
TextureControl套用建物材質。
TrafficFlowControl顯示即時路況。

AttributionControl

new mapPlus.AttributionControl(options)

顯示地圖的資訊。

參數

  • options Object：
參數描述
options.compact boolean是否有收合功能，預設為 false。
options.customAttribution string帶入自定義文字的附加資訊。

範例

javascript
// mapPlus initconst map = await new mapPlus(document.getElementById('map'), {    accessKey: 'get_your_key',    accessToken: 'get_your_token',    style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt',});
const attributionCtrl = new mapPlus.AttributionControl({    compact: true,    customAttribution: '<a href="https://kw3dmap.localking.com.tw/kwmap-docs/" target="_blank">Kwmap Document</a>',});map.addControl( attributionCtrl , 'bottom-left' );

DrawControl

new mapPlus.DrawControl(options)

地圖繪圖功能。

參數

  • options Object :

    名稱描述
    options.useButton boolean是否顯示預設繪圖工具列按鈕，預設為 true。
    options.controls Object預設工具列要顯示哪些按鈕，僅在 useButton 為 true 時有效，可用的鍵值見下方「預設工具列按鈕」區塊。
    options.continuousDrawing boolean是否啟用連續繪圖模式，此模式可連續繪製多個幾何圖形，直至取消目前按鈕的 active 狀態或切換至其他幾何圖形為止，預設為 false。
    options.showMeasureValue boolean是否顯示測量值（長度/面積），預設為 false。
    options.enableCustomButtonManagement boolean是否使用自訂按鈕來實現繪圖功能，並統一控制自訂按鈕的 active 狀態，預設為 false。
    options.keybindings boolean是否啟用熱鍵，預設為 true；設為 false 可關閉所有熱鍵，熱鍵清單見下方「熱鍵」區塊。
    options.anchorLayer string吸附目標圖層的 id。設定後，繪製或編輯節點時可吸附到該圖層圖徵的節點；若未顯示「吸附節點」按鈕，吸附會自動開啟。

預設工具列按鈕

options.controls 的鍵值，true 為顯示、false 為隱藏。

鍵值按鈕
point畫點，預設為 true
line_string畫線，預設為 true
polygon畫面，預設為 true
circle畫圓，預設為 true
trash刪除選取的圖形，預設為 true
undo_redo上一步、下一步，預設為 true
delete_vertex刪除節點，預設為 true
save匯出 GeoJSON，預設為 true
anchor吸附圖層節點開關，預設為 false
draggable圖元拖曳開關，關閉後選取已繪製的圖形無法再被拖曳移動，預設為 false

指令模式自訂按鈕

啟用 enableCustomButtonManagement 後，頁面上帶有下列 id 的元素會自動綁定對應功能，詳情參考範例「繪圖控制指令」。

id功能
custom-point畫點
custom-line畫線
custom-polygon畫面
custom-circle畫圓
custom-select選取模式
custom-clear刪除選取的圖形
custom-delete-point刪除節點編輯模式下選取的節點
custom-anchor吸附圖層開關
custom-save匯出 GeoJSON 檔案
custom-undo上一步，沒有可復原的步驟時按鈕會設為 disabled
custom-redo下一步，沒有可重做的步驟時按鈕會設為 disabled
custom-draggable圖元拖曳開關

熱鍵

預設工具列與指令模式自訂按鈕都支援以下熱鍵，須先點一下地圖取得焦點。可設定 keybindings: false 關閉熱鍵。

熱鍵功能
Ctrl + Z / ⌘ + Z上一步
Ctrl + Y / ⌘ + Y下一步
Esc以目前進度結束繪製。線、面：點數不足會捨棄。圓：還沒拉出半徑會取消。點：直接取消。
雙擊滑鼠左鍵 / Enter完成圖元繪製
Backspace / Delete在節點編輯模式下刪除選取的節點，否則刪除選取的圖形
S吸附圖層開關
D圖元拖曳開關
Shift節點編輯模式下，持續按著可搭配選取多個節點

編輯操作

  • 圖形自身節點自動吸附：編輯線條、多邊形或圓形的節點時，拖曳節點靠近同一個圖形的其他節點（水平、垂直各 10 px 內）即會自動吸附，放開後合併為同一個節點，不須先開啟吸附按鈕。
  • 操作提示：選取線、面、圓時會顯示動態提示圖示：選取模式下提示可再點一下進入節點編輯；節點編輯模式下提示可點擊黑點新增及移動節點。

範例

javascript
// mapPlus initconst map = await new mapPlus(document.getElementById('map'), {    accessKey: 'get_your_key',    accessToken: 'get_your_token',    style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt',});
const drawCtrl = new mapPlus.DrawControl({    useButton: true, // 顯示預設繪圖工具列    continuousDrawing: false, // 關閉連續繪圖模式    showMeasureValue: false, // 關閉顯示測量值    enableCustomButtonManagement: false, // 關閉使用自訂按鈕來實現繪圖功能    keybindings: true, // 開啟熱鍵    // 要調整工具列按鈕時，請列出所有要顯示的按鈕    // controls: {    //     point: true, line_string: true, polygon: true, circle: true,    //     trash: true, undo_redo: true, delete_vertex: true, save: true,    //     anchor: true, draggable: true,    // },});map.addControl( drawCtrl , 'top-right' );

實例方法

實例方法描述
getAll取得所有繪製的 GeoJSON。
add加入既有的 GeoJSON。
startDrawPoint開始繪製點幾何圖形。
startDrawLine開始繪製線幾何圖形。
startDrawPolygon開始繪製面幾何圖形。
startDrawCircle開始繪製圓幾何圖形。
stopDraw停止繪製幾何圖形，並切換到選擇模式。
clearAll清除所有已繪製的幾何圖形。
onFeatureComplete設定完成繪製幾何圖形時的回呼函式。
deleteSelected刪除選取的幾何圖形。
deleteSelectedPoints刪除節點編輯模式下選取的節點。
undo上一步。
redo下一步。
canUndo是否有可復原的步驟，可用來控制自訂「上一步」按鈕是否可點。
canRedo是否有可重做的步驟，可用來控制自訂「下一步」按鈕是否可點。
exportGeoJSON將所有繪製的圖形匯出為 GeoJSON 檔案。
toggleAnchor切換吸附開關。
combineAnchorLayer指定或更換吸附目標圖層。
uncombineAnchorLayer解除吸附目標圖層。
toggleDraggable切換圖元拖曳開關。

getAll

getAll()

取得所有繪製的 GeoJSON。

範例

javascript
// mapPlus initconst map = await new mapPlus(document.getElementById('map'), {    accessKey: 'get_your_key',    accessToken: 'get_your_token',    style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt',});const drawCtrl = new mapPlus.DrawControl();map.addControl( drawCtrl , 'top-right' );
const features = drawCtrl.getAll();console.log(features);

add

add(geojson)

加入既有的 GeoJSON。

參數

  • geojson Object：符合 GeoJSON 格式的幾何圖形資料。

範例

javascript
// mapPlus initconst map = await new mapPlus(document.getElementById('map'), {    accessKey: 'get_your_key',    accessToken: 'get_your_token',    style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt',});const drawCtrl = new mapPlus.DrawControl();map.addControl( drawCtrl , 'top-right' );
const geojson = {    // ...既有的 GeoJSON 圖形資料}
drawCtrl.add(geojson);

startDrawPoint

startDrawPoint()

開始繪製點幾何圖形。

範例

javascript
// mapPlus initconst map = await new mapPlus(document.getElementById('map'), {    accessKey: 'get_your_key',    accessToken: 'get_your_token',    style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt',});const drawCtrl = new mapPlus.DrawControl();map.addControl( drawCtrl , 'top-right' );
drawCtrl.startDrawPoint();

startDrawLine

startDrawLine()

開始繪製線幾何圖形。

範例

javascript
// mapPlus initconst map = await new mapPlus(document.getElementById('map'), {    accessKey: 'get_your_key',    accessToken: 'get_your_token',    style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt',});const drawCtrl = new mapPlus.DrawControl();map.addControl( drawCtrl , 'top-right' );
drawCtrl.startDrawLine();

startDrawPolygon

startDrawPolygon()

開始繪製面幾何圖形。

範例

javascript
// mapPlus initconst map = await new mapPlus(document.getElementById('map'), {    accessKey: 'get_your_key',    accessToken: 'get_your_token',    style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt',});const drawCtrl = new mapPlus.DrawControl();map.addControl( drawCtrl , 'top-right' );
drawCtrl.startDrawPolygon();

startDrawCircle

startDrawCircle()

開始繪製圓幾何圖形。

範例

javascript
// mapPlus initconst map = await new mapPlus(document.getElementById('map'), {    accessKey: 'get_your_key',    accessToken: 'get_your_token',    style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt',});const drawCtrl = new mapPlus.DrawControl();map.addControl( drawCtrl , 'top-right' );
drawCtrl.startDrawCircle();

stopDraw

stopDraw()

停止繪製幾何圖形，並切換到選擇模式。

範例

javascript
// mapPlus initconst map = await new mapPlus(document.getElementById('map'), {    accessKey: 'get_your_key',    accessToken: 'get_your_token',    style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt',});const drawCtrl = new mapPlus.DrawControl();map.addControl( drawCtrl , 'top-right' );
drawCtrl.stopDraw();

clearAll

clearAll()

清除所有已繪製的幾何圖形。

範例

javascript
// mapPlus initconst map = await new mapPlus(document.getElementById('map'), {    accessKey: 'get_your_key',    accessToken: 'get_your_token',    style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt',});const drawCtrl = new mapPlus.DrawControl();map.addControl( drawCtrl , 'top-right' );
drawCtrl.clearAll();

onFeatureComplete

onFeatureComplete(callback)

設定完成繪製幾何圖形時的回呼函式。當使用者完成一個幾何圖形的繪製後，會觸發此回呼並傳入完成的 GeoJSON 圖形資料。

參數

  • callback Function：繪製完成後執行的回呼函式，接收以下參數：

    參數描述
    event Object繪製完成時的事件物件。
    feature Object完成繪製的 GeoJSON 圖形資料，包含以下方法：

    feature 方法

    方法描述
    feature.getCenter() Function取得幾何圖形的中心座標，回傳 [lng, lat] 格式的陣列。

範例

javascript
// mapPlus initconst map = await new mapPlus(document.getElementById('map'), {    accessKey: 'get_your_key',    accessToken: 'get_your_token',    style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt',});const drawCtrl = new mapPlus.DrawControl();map.addControl( drawCtrl , 'top-right' );
drawCtrl.onFeatureComplete((event, feature) => {    console.log('完成繪製：', feature);    const center = feature.getCenter();    console.log('中心座標：', center); // [lng, lat]});

deleteSelected

deleteSelected()

刪除選取的幾何圖形。

回傳值

boolean：有刪除圖形時為 true，沒有選取任何圖形時為 false。

範例

javascript
// mapPlus initconst map = await new mapPlus(document.getElementById('map'), {    accessKey: 'get_your_key',    accessToken: 'get_your_token',    style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt',});const drawCtrl = new mapPlus.DrawControl();map.addControl( drawCtrl , 'top-right' );
const deleted = drawCtrl.deleteSelected();console.log(deleted); // 沒有選取任何圖形時為 false

deleteSelectedPoints

deleteSelectedPoints()

刪除節點編輯模式下選取的節點。

回傳值

boolean：有刪除節點時為 true；不在節點編輯模式或沒有選取節點時為 false。

範例

javascript
// mapPlus initconst map = await new mapPlus(document.getElementById('map'), {    accessKey: 'get_your_key',    accessToken: 'get_your_token',    style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt',});const drawCtrl = new mapPlus.DrawControl();map.addControl( drawCtrl , 'top-right' );
drawCtrl.deleteSelectedPoints();

undo

undo()

回到上一步。

回傳值

DrawControl：實例本身，可串接呼叫。

範例

javascript
// mapPlus initconst map = await new mapPlus(document.getElementById('map'), {    accessKey: 'get_your_key',    accessToken: 'get_your_token',    style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt',});const drawCtrl = new mapPlus.DrawControl();map.addControl( drawCtrl , 'top-right' );
if (drawCtrl.canUndo()) {    drawCtrl.undo();}

redo

redo()

重做下一步。

回傳值

DrawControl：實例本身，可串接呼叫。

範例

javascript
// mapPlus initconst map = await new mapPlus(document.getElementById('map'), {    accessKey: 'get_your_key',    accessToken: 'get_your_token',    style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt',});const drawCtrl = new mapPlus.DrawControl();map.addControl( drawCtrl , 'top-right' );
if (drawCtrl.canRedo()) {    drawCtrl.redo();}

canUndo

canUndo()

是否有可復原的步驟，可用來控制自訂「上一步」按鈕是否可點。

回傳值

boolean

範例

javascript
// mapPlus initconst map = await new mapPlus(document.getElementById('map'), {    accessKey: 'get_your_key',    accessToken: 'get_your_token',    style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt',});const drawCtrl = new mapPlus.DrawControl();map.addControl( drawCtrl , 'top-right' );
document.getElementById('my-undo').disabled = !drawCtrl.canUndo();

canRedo

canRedo()

是否有可重做的步驟，可用來控制自訂「下一步」按鈕是否可點。

回傳值

boolean

範例

javascript
// mapPlus initconst map = await new mapPlus(document.getElementById('map'), {    accessKey: 'get_your_key',    accessToken: 'get_your_token',    style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt',});const drawCtrl = new mapPlus.DrawControl();map.addControl( drawCtrl , 'top-right' );
document.getElementById('my-redo').disabled = !drawCtrl.canRedo();

exportGeoJSON

exportGeoJSON(filename)

將所有繪製的圖形匯出為 GeoJSON 檔案並觸發瀏覽器下載，同時觸發 drawcontrol.save 事件。

參數

  • filename string：選填，下載的檔名，預設為 kwmap-draw.年月日時分秒.geojson。

回傳值

Object | null：匯出的 GeoJSON（FeatureCollection）；沒有任何圖形時回傳 null，且不會下載。

範例

javascript
// mapPlus initconst map = await new mapPlus(document.getElementById('map'), {    accessKey: 'get_your_key',    accessToken: 'get_your_token',    style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt',});const drawCtrl = new mapPlus.DrawControl();map.addControl( drawCtrl , 'top-right' );
// 使用預設檔名下載drawCtrl.exportGeoJSON();
// 指定檔名const geojson = drawCtrl.exportGeoJSON('my-drawing.geojson');

toggleAnchor

toggleAnchor(active)

切換吸附開關，狀態改變時觸發 drawcontrol.anchorChanged 事件。吸附的目標圖層由 options.anchorLayer 或 combineAnchorLayer() 指定。

參數

  • active boolean：選填，true 開啟、false 關閉。

回傳值

boolean：切換後的吸附狀態。

範例

javascript
// mapPlus initconst map = await new mapPlus(document.getElementById('map'), {    accessKey: 'get_your_key',    accessToken: 'get_your_token',    style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt',});const drawCtrl = new mapPlus.DrawControl();map.addControl( drawCtrl , 'top-right' );
drawCtrl.toggleAnchor();      // 切換drawCtrl.toggleAnchor(true);  // 開啟drawCtrl.toggleAnchor(false); // 關閉

combineAnchorLayer

combineAnchorLayer(layerId)

指定或更換吸附目標圖層，效果與建立時設定 options.anchorLayer 相同，可在加入畫筆工具之後再依需求切換要吸附的圖層。指定後，畫線、畫面、畫圓的節點或拖曳的節點靠近該圖層圖徵的節點時，就會吸附上去（畫點不會吸附）。

  • 須在 map.addControl() 之後呼叫，且目標圖層要先加到地圖上；圖層不存在時會在 console 顯示 DrawControl: 圖層不存在，原本的吸附圖層也會被解除。
  • 此方法只負責指定圖層，不會改變吸附開關。若吸附尚未開啟（例如建立時沒有設定 options.anchorLayer），請再呼叫 toggleAnchor(true) 開啟，或由使用者按「吸附節點」按鈕開啟。
  • 傳入 null 等同於 uncombineAnchorLayer()。

參數

  • layerId string：吸附目標圖層的 id。

範例

javascript
// mapPlus initconst map = await new mapPlus(document.getElementById('map'), {    accessKey: 'get_your_key',    accessToken: 'get_your_token',    style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt',});const drawCtrl = new mapPlus.DrawControl();map.addControl( drawCtrl , 'top-right' );
map.on('style.load', () => {    // 先將吸附參考圖層加到地圖上    map.addSource('snap-points', {        type: 'geojson',        data: {            type: 'FeatureCollection',            features: [                { type: 'Feature', properties: {}, geometry: { type: 'Point', coordinates: [121.522371, 25.026747] } },            ],        },    });    map.addLayer({        id: 'snap-points',        type: 'circle',        source: 'snap-points',        paint: { 'circle-radius': 6, 'circle-color': '#ff7a00' },    });
    // 指定吸附目標圖層，並開啟吸附    drawCtrl.combineAnchorLayer('snap-points');    drawCtrl.toggleAnchor(true);});

uncombineAnchorLayer

uncombineAnchorLayer()

解除吸附目標圖層，之後繪製或編輯節點時不再吸附。吸附開關的狀態會保留，之後再以 combineAnchorLayer() 指定圖層即可恢復吸附。

範例

javascript
// mapPlus initconst map = await new mapPlus(document.getElementById('map'), {    accessKey: 'get_your_key',    accessToken: 'get_your_token',    style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt',});const drawCtrl = new mapPlus.DrawControl({    anchorLayer: 'snap-points',});map.addControl( drawCtrl , 'top-right' );
// 不再吸附到 snap-points 圖層drawCtrl.uncombineAnchorLayer();

toggleDraggable

toggleDraggable(active)

切換圖元拖曳開關。關閉後已繪製的圖形無法再被拖曳移動，可避免編輯時誤移圖形；狀態改變時觸發 drawcontrol.draggableChanged 事件。

參數

  • active boolean：選填，true 開啟、false 關閉。

回傳值

boolean：切換後的拖曳狀態。

範例

javascript
// mapPlus initconst map = await new mapPlus(document.getElementById('map'), {    accessKey: 'get_your_key',    accessToken: 'get_your_token',    style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt',});const drawCtrl = new mapPlus.DrawControl();map.addControl( drawCtrl , 'top-right' );
drawCtrl.toggleDraggable(false); // 鎖定圖形，不可拖曳drawCtrl.toggleDraggable(true);  // 恢復可拖曳

FrameRateControl

new mapPlus.FrameRateControl(options)

顯示地圖的 FPS（每秒幀數），並以柱狀圖呈現即時與平均幀率。

參數

  • options Object（選填）：

    參數描述
    options.color string文字與圖表的顏色，預設為 '#7cf859'。
    options.background string控制器背景顏色，預設為 'rgba(0,0,0,0.9)'。
    options.font string文字字體，預設為 'Monaco, Consolas, Courier, monospace'。
    options.width number控制器寬度（px，依 devicePixelRatio 縮放），預設為 100 * dpr。
    options.graphWidth number圖表寬度（px），預設為 90 * dpr。
    options.graphHeight number圖表高度（px），預設為 60 * dpr。
    options.graphTop number圖表頂部偏移距離（px），預設為 0。
    options.graphRight number圖表右側偏移距離（px），預設為 5 * dpr。
    options.barWidth number圖表柱狀寬度（px），預設為 4 * dpr。

範例

javascript
// mapPlus initconst map = await new mapPlus(document.getElementById('map'), {    accessKey: 'get_your_key',    accessToken: 'get_your_token',    style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt',});
const fpsCtrl = new mapPlus.FrameRateControl();map.addControl( fpsCtrl , 'top-right' );

FullscreenControl

new mapPlus.FullscreenControl(options)

全螢幕功能。

參數

  • options Object :

    名稱描述
    options.container HTMLElement要顯示全螢幕的容器。

範例

javascript
// mapPlus initconst map = await new mapPlus(document.getElementById('map'), {    accessKey: 'get_your_key',    accessToken: 'get_your_token',    style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt',});
const fullscreenCtrl = new mapPlus.FullscreenControl();map.addControl( fullscreenCtrl , 'bottom-right' );

MassTransitControl

new mapPlus.MassTransitControl(options)

控制大眾運輸顯示或隱藏。

參數

  • options Object :

    名稱描述
    options.useButton boolean是否使用按鈕控制大眾運輸顯示/隱藏。

範例

javascript
// mapPlus initconst map = await new mapPlus(document.getElementById('map'), {    accessKey: 'get_your_key',    accessToken: 'get_your_token',    style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt',    zoom: 13});
const massTransitCtrl = new mapPlus.MassTransitControl({     useButton: true,});map.addControl( massTransitCtrl , 'top-right' );

實例方法

實例方法描述
offTransit隱藏指定大眾運輸。
onTransit顯示指定大眾運輸。

offTransit

offTransit(transit)

隱藏指定大眾運輸。

參數

  • transit string : 要隱藏的大眾運輸，捷運路線為 mrt、火車路線為 train。

範例

javascript
// mapPlus initconst map = await new mapPlus(document.getElementById('map'), {    accessKey: 'get_your_key',    accessToken: 'get_your_token',    style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt',});
const massTransitCtrl = new mapPlus.MassTransitControl({    useButton: true,});map.addControl( massTransitCtrl , 'bottom-right' );massTransitCtrl.offTransit( 'mrt' );

onTransit

onTransit(transit)

顯示指定大眾運輸。

參數

  • transit string : 要顯示的大眾運輸，捷運路線為 mrt、火車路線為 train。

範例

javascript
// mapPlus initconst map = await new mapPlus(document.getElementById('map'), {    accessKey: 'get_your_key',    accessToken: 'get_your_token',    style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt',});
const massTransitCtrl = new mapPlus.MassTransitControl({    useButton: true,});map.addControl( massTransitCtrl , 'bottom-right' );massTransitCtrl.onTransit( 'mrt' );

MeasureControl

new mapPlus.MeasureControl(options)

地圖測距功能。

參數

  • options Object :

    參數描述
    options.units boolean使用單位，可設定為 metric（公制）、imperial（英制），預設為 metric。

範例

javascript
// mapPlus initconst map = await new mapPlus(document.getElementById('map'), {    accessKey: 'get_your_key',    accessToken: 'get_your_token',    style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt',});
const measureCtrl = new mapPlus.MeasureControl({    units: 'metric',});map.addControl( measureCtrl , 'top-right' );

new mapPlus.NavigationControl()

導覽功能，包括縮放按鈕和指南針。

範例

javascript
// mapPlus initconst map = await new mapPlus(document.getElementById('map'), {    accessKey: 'get_your_key',    accessToken: 'get_your_token',    style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt',});
const navigationCtrl = new map.NavigationControl();map.addControl( navigationCtrl , 'bottom-right' );

RouteNavControl

new mapPlus.RouteNavControl(options)

地圖導航功能。

參數

  • options Object :

    參數描述
    options.useSearch boolean在地圖導航功能中，是否可使用地圖搜尋功能，預設為 false。

範例

javascript
// mapPlus initconst map = await new mapPlus(document.getElementById('map'), {    accessKey: 'get_your_key',    accessToken: 'get_your_token',    style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt',});
const routeNavCtrl = new mapPlus.RouteNavControl({    useSearch: true,});map.addControl( routeNavCtrl , 'top-left' );

ScaleControl

new mapPlus.ScaleControl(options)

比例尺功能。

參數

  • options Object :

    參數描述
    options.unit string比例尺的單位，可設定為 'metric'（公制單位）、'imperial'（英制單位）或 'nautical'（海洋單位），預設為 'metric'。
    options.maxWidth number比例尺的最大寬度，預設為 80。

範例

javascript
// mapPlus initconst map = await new mapPlus(document.getElementById('map'), {    accessKey: 'get_your_key',    accessToken: 'get_your_token',    style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt',});
const scaleCtrl = new mapPlus.ScaleControl({    maxWidth: 80,    unit: 'metric',});map.addControl( scaleCtrl , 'top-left' );

SearchControl

new mapPlus.SearchControl(options)

地圖搜尋功能。

參數

  • options Object :

    參數描述
    options.useRouteNav boolean在地圖搜尋功能中，是否可使用地圖導航功能，預設為 false。
    options.useAutoComplete boolean在地圖搜尋功能中，是否可使用自動完成功能，預設為 false。

範例

javascript
// mapPlus initconst map = await new mapPlus(document.getElementById('map'), {    accessKey: 'get_your_key',    accessToken: 'get_your_token',    style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt',});
const searchCtrl = new mapPlus.SearchControl({    useRouteNav: true,    useAutoComplete: true,});map.addControl( searchCtrl , 'top-left' );

SelectControl

new mapPlus.SelectControl(options)

選取工具。

參數

  • options Object :

    參數描述
    options.useButton boolean是否使用按鈕控制選取工具的開關。
    options.layerId string要綁定的圖層 id。

範例

javascript
// mapPlus initconst map = await new mapPlus(document.getElementById('map'), {    accessKey: 'get_your_key',    accessToken: 'get_your_token',    style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt',});
const selectCtrl = new mapPlus.SelectControl({    useButton: true,    layerId: false,});map.addControl( selectCtrl , 'bottom-right' );

StyleModeControl

new mapPlus.StyleModeControl(options)

切換地圖風格模式。

參數

  • options Object :
參數描述
options.useButton boolean是否使用按鈕控制風格模式。
options.styleList object要添加的地圖風格。key 為地圖樣式 id，value 為 object，value.title 為樣式名稱，value.sky 為天空顏色，value.style 為 .etxt 樣式檔。

範例

javascript
// mapPlus initconst map = await new mapPlus(document.getElementById('map'), {    accessKey: 'get_your_key',    accessToken: 'get_your_token',    style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt',});
map.on( 'style.load' , () => {    const styleModeCtrl = new mapPlus.StyleModeControl({        useButton: true,        styleList: {            day: {                title: '日間模式',                sky: '#4790b8',                style: 'https://kw3dmap.localking.com.tw/openapi/map/ev_day.etxt',            },            night: {                title: '夜間模式',                sky: '#0e2836',                style: 'https://kw3dmap.localking.com.tw/openapi/map/ev_night.etxt',            },        },    });    map.addControl( styleModeCtrl , 'top-right' );});

實例方法

實例方法描述
addStyleMode添加地圖模式。
setStyleMode更改地圖模式。

addStyleMode

addStyleMode(modeId, style)

添加地圖模式。

參數

  • modeId string : 要新增的地圖模式 id。

  • style object :

    參數描述
    style.title object樣式名稱。
    style.sky object天空顏色。
    style.style object.etxt 樣式檔。

範例

javascript
// mapPlus initconst map = await new mapPlus(document.getElementById('map'), {    accessKey: 'get_your_key',    accessToken: 'get_your_token',    style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt',});
map.on( 'style.load' , () => {    const styleModeCtrl = new mapPlus.StyleModeControl({        useButton: true,    });    map.addControl( styleModeCtrl , 'bottom-right' );    styleModeCtrl.addStyleMode( 'day' , {        title: '日間模式',        sky: '#4790b8',        style: 'https://kw3dmap.localking.com.tw/openapi/map/ev_day.etxt',    });});

setStyleMode

setStyleMode(modeId)

更改地圖模式。

參數

  • modeId string : 要切換的地圖模式 id。

範例

javascript
// mapPlus initconst map = await new mapPlus(document.getElementById('map'), {    accessKey: 'get_your_key',    accessToken: 'get_your_token',    style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt',});
map.on( 'style.load' , () => {    const styleModeCtrl = new mapPlus.StyleModeControl({        useButton: true,        styleList: {            day: {                 title: '日間模式',                 sky: '#4790b8',                 style: 'https://kw3dmap.localking.com.tw/openapi/map/ev_day.etxt',             },             night: {                 title: '夜間模式',                 sky: '#0e2836',                 style: 'https://kw3dmap.localking.com.tw/openapi/map/ev_night.etxt',             },        },    });    map.addControl( styleModeCtrl , 'bottom-right' );    styleModeCtrl.setStyleMode( 'day' );});

TextureControl

new mapPlus.TextureControl(options)

套用建物材質。

參數

  • options Object :

    參數描述
    options.useButton boolean是否使用按鈕控制建物材質的開關。
    options.ignoreLandmark boolean如果圖磚為特殊地標，是否要忽略套用建物材質。

範例

javascript
// mapPlus initconst map = await new mapPlus(document.getElementById('map'), {    accessKey: 'get_your_key',    accessToken: 'get_your_token',    style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt',});
map.on('style.load' , () => {    const textureCtrl = new mapPlus.TextureControl({        useButton: true,        ignoreLandmark: false,    });    map.addControl( textureCtrl , 'bottom-right' );});

TrafficFlowControl

new mapPlus.TrafficFlowControl(options)

顯示即時路況。

參數

  • options Object :

    參數描述
    options.useButton Object是否使用按鈕控制即時路況的開關。
    options.color boolean設定即時路況的顏色。

範例

javascript
// mapPlus initconst map = await new mapPlus(document.getElementById('map'), {    accessKey: 'get_your_key',    accessToken: 'get_your_token',    style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt',});
map.on('style.load', () => {    const trafficFlowCtrl = new mapPlus.TrafficFlowControl({        color: {            freeFlow: '#64CB5A',            slow: '#DDD632',            queuing: '#F59554',            stationary: '#E02A5A',        },    });    map.addControl( trafficFlowCtrl , 'top-right' );});