實例方法

mapPlus可使用的方法

LngLatconvert

LngLatconvert(locations)

將陣列形式的經緯度轉換成經緯度物件的型態。

參數：

locations Array : 座標點陣列。

範例：

Twd97ToLngLat

Twd97ToLngLat(x, y)

將 TWD97 X,Y 坐標轉換為經緯度坐標。

參數：

x number : X坐標
y number : Y坐標

範例：

addControl

addControl(control, position)

新增地圖的控制器

參數：

control Object : 地圖控制器，可添加Popup、Marker、TerrainControl等控制器。
position string (預設: "top-right"): 控制器位置，可設定'top-left'、'top-right'、'bottom-left'、'bottom-right'，預設為'top-right'。

範例：

addGeoJson

addGeoJson(geoData)

將GeoJSON類型的資源加進地圖上，其中請留意type內容的大小寫需符合GeoJSON specification以及座標點位為經度在前緯度在後。圖層的型態有：fill, line, symbol。

參數：

geoData object : GeoJSON格式資源

範例：

addGeoJsonLayer

addGeoJsonLayer(options)

參數：

options object :

名稱	描述
options._sourceId `string` 預設: `"tmpData"`	資源id
options._layerId `string` 預設: `"tmpLayer"`	圖層id
options._type `number` 預設: `1`	類別(`{1:"Polygon",2:"Linestring",3:"Point"}`)
options._colorField `string` 預設: `"none"`	色域，預設為`"none"`
options._content `object` `JSON`	圖層資料

範例：

addGeoJsonSource

addGeoJsonSource(options)

新增GeoJSON格式的資源。

參數：

options object :

名稱	描述
options._sourceId `string`	資源id
options._geoJson `object` `JSON`	GeoJSON資料

範例：

addLayer

addLayer(options, beforeLayerId)

新增圖層。

參數：

options Object :

名稱	描述
options.id `string`	唯一識別碼，為必須的。
options.layout `Object`	圖層布局，可用的佈局屬性因`type`不同而異。如果未指定佈局屬性，則將使用默認值。
options.maxzoom `number`	最大縮放`(0-24)`，當縮放級別大於`maxzoom`，圖層將隱藏。
options.metadata `Object`	用於跟踪圖層的任意屬性，但不影響渲染。
options.minzoom `number`	最小縮放`(0-24)`，當縮放級別小於`minzoom`，圖層將隱藏。
options.paint `Object`	圖層的繪製屬性。可用的塗料特性因不同而異type`。如果未指定繪製屬性，則將使用默認值。
options.source `string` `Object`	圖層的資料來源。
options.type `string`	圖層類別，為必須的。

beforeLayerId string : 當您在查看地圖時，如果想要在一個已有圖層的下方插入一個新的圖層，您可以使用beforeLayerId。提供新圖層的設定以及您想要插入下方的已有圖層的layerId作為beforeLayerId，這樣新圖層就會顯示在該已有圖層的下方。若未提供beforeLayerId，新圖層將被加入至圖層陣列的末尾，並顯示在其他所有圖層之上。

範例：

addListener

addListener(eventId, func)

增加資料層的監聽事件。

參數：

eventId string : 事件類別
func Function : 被呼叫的函式。

範例：

addNewPoiMarker

addNewPoiMarker(options)

點擊poi圖示時加上marker以及根據geojson內容新增icon。

參數：

options object :

名稱	描述
options.iconName `string` 預設: `"B01"`	iconid，預設為`"B01"`
options.textSize `number` 預設: `15`	字體大小，預設為`15`
options.onlyOneMarkerDisplay `boolean` 預設: `false`	僅顯示一個地標，預設為`false`
options.markerFeatures `object` 預設: `this.#myDataFeatures`	地標特徵，為geojson格式

範例：

addSource

addSource(sourceId, sourceProperties)

將資源加進地圖樣式。

參數：

sourceId string : 資源id。
sourceProperties object : 資源的各項屬性，其中data的型態可以是物件，或是路徑，但皆需為geojson格式。

範例：

cameraAnimation

cameraAnimation(animation, options)

配置地圖鏡頭動畫

參數：

animation string : 地圖動畫，可選值為mapPlus.Animation.ROTATE。
options Object : 動畫參數：ROTATE參數:loops: 總循環次數，預設為1。duration: 動畫時間，預設為3000。

範例：

decodePolyline

decodePolyline(encodePolyline)

將 polyline 參數轉換為座標陣列。

參數：

encodePolyline string : 需解碼的 polyline 參數。

範例：

drawEncodePath

drawEncodePath(pathId, encodePolyline, style)

使用 polyline 製出線條。

參數：

pathId string : 線條的id，為必須的。
encodePolyline string : polyline 格式的座標點。
style object : 線條樣式的參數。

名稱	描述
style.width `number` 預設: `5`	線條寬度，預設為`5`。
style.color `string` 預設: `"#3FB1CE"`	線條顏色，預設為`'#3FB1CE'`。
style.useDash `boolean` 預設: `false`	是否使用虛線，預設為`false`。
style.lineCap `number` 預設: `"round"`	線條端點樣式，可設為`'butt'`、`'square'`、`'round'`，預設為`'butt'`。

範例：

drawPath

drawPath(pathId, locations, style)

使用座標點繪製出線條。

參數：

pathId string : 線條的id，為必須的。
locations Array : 座標點陣列。
style object : 線條樣式的參數。

名稱	描述
style.width `number` 預設: `5`	線條寬度，預設為`5`。
style.color `string` 預設: `"#3FB1CE"`	線條顏色，預設為`'#3FB1CE'`。
style.useDash `boolean` 預設: `false`	是否使用虛線，預設為`false`。
style.lineCap `number` 預設: `"round"`	線條端點樣式，可設為`'butt'`、`'square'`、`'round'`，預設為`'butt'`。

範例：

fitBounds

fitBounds(locations, options)

將視圖畫面移動到特定座標範圍。

參數：

locations Array : 需要移動的座標範圍。
options object : 移動的參數。

名稱	描述
options.padding `number`	畫面內邊距，單位為像素。

範例：

flyTo

flyTo(options, eventId)

視窗畫面飛行到特定座標。

參數：

options object : 畫面飛行的參數。

名稱	描述
options.animate `boolean`	如果`false`，則不會出現動畫。
options.duration `number`	動畫的持續時間，以毫秒為單位。
options.easing `CallableFunction`	一個函數，其時間範圍為`0~1`，並傳回一個數字，其中`0`是初始狀態，`1`是最終狀態。
options.essential `boolean`	如果`true`，那麼動畫被認為是必不可少的並且不會受到影響`prefers-reduced-motion`。
options.freezeElevation `boolean`	預設為`false`。3D 地圖中需要讓相機保持在基於海平面的恆定高度。動畫完成後，將根據相機到中心座標高度的距離重新計算縮放等級。
options.offset `Array`	動畫結束時目標中心相對於真實地圖容器中心的位置。
options.center `Array`	地圖的中心點，格式為`[經度, 緯度]`。
options.zoom `number`	地圖的縮放級別`(0-24)`。
options.bearing `number`	地圖的旋轉角，以度數計。
options.pitch `number`	地圖的傾斜角`(0-85)`。
options.minZoom `number`	地圖的最小縮放級別`(0-24)`。
options.curve `number`	畫面縮小的速度，為`0~1`的數。
options.maxDuration `number`	動畫最大持續時間，單位為毫秒。
options.speed `number`	速度，為`0~1`的數。

eventId string : 觸發畫面飛行的事件類別。

範例：

getBounds

getBounds()

返回地圖的地理邊界。

範例：

getCanvas

getCanvas()

回傳html的Canvas元素。

範例：

getLayer

getLayer(layerId)

取得指定圖層。

參數：

layerId string : 唯一識別碼，為必須的。

範例：

getMapView

getMapView()

取得目前地圖視角的參數

範例：

getMapViewFromURL

getMapViewFromURL()

從URL取得地圖視角的參數。

範例：

getSource

getSource(sourceId)

從地圖的樣式中獲得指定id的資源。

參數：

sourceId string : 資源id

範例：

isStyleLoaded

isStyleLoaded()

返回一個布林值，指示地圖的樣式是否完全加載。

範例：

名稱	描述
options.center `Array`	地圖的中心點，格式為`[經度, 緯度]`。
options.zoom `number`	地圖的縮放級別`(0-24)`。
options.bearing `number`	地圖的旋轉角，以度數計。
options.pitch `number`	地圖的傾斜角`(0-85)`。

loadImage

loadImage(png, imageName)

載入外部圖片，若是 url 需要支援 CORS。

參數：

png string : 圖片檔的 url 或是相對位址以存取圖片，檔案格式需為 png、webp 或 jpg 格式。
imageName string : 圖片的名稱。

範例：

mapSnapshot

mapSnapshot(options)

擷取當前地圖畫面

參數：

options object :

名稱	描述
options.outputWidth `number` 預設: `400`	圖片輸出寬度，預設為`400px`。
options.outputHeight `number` 預設: `300`	圖片輸出高度，預設為`300px`。
options.quality `number` 預設: `0.8`	圖片輸出品質，預設為`0.8`。
options.download `boolean` 預設: `false`	是否下載 jpeg 格式圖片，預設為`false`。
options.fileName `boolean` 預設: `"kwmap_snapshot"`	是否下載圖片，預設為`false`。

範例：

moveLayer

moveLayer(layerId, beforeLayerId)

移動圖層順序。

參數：

layerId string : 要被移動的圖層id
beforeLayerId string : 當您在查看地圖時，如果想要在一個已有圖層的下方插入一個新的圖層，您可以使用beforeLayerId。提供新圖層的設定以及您想要插入下方的已有圖層的layerId作為beforeLayerId，這樣新圖層就會顯示在該已有圖層的下方。若未提供beforeLayerId，新圖層將被加入至圖層陣列的末尾，並顯示在其他所有圖層之上。

範例：

off

off(eventId, func)

刪除一個監聽事件。事件類別請至事件監聽。

參數：

eventId string : 事件類別
func Function : 被呼叫的函式。

範例：

offBugMod

offBugMod()

關閉除錯模式

範例：

offInteraction

offInteraction(interaction)

關閉指定的地圖交互功能。

參數：

interaction string : 要關閉的地圖交互功能。scrollZoom: 縮放地圖功能。dragPan: 拖曳地圖功能。doubleClickZoom: 使用雙擊進行地圖放大。boxZoom: 使用鍵盤shift加滑鼠拖曳來選擇一個區域，然後進行放大至該區域的功能，是電腦裝置的交互功能。keyboard: 鍵盤操作，提供電腦裝置的交互功能。dragRotate: 使用滑鼠點選進行地圖旋轉，是電腦裝置的交互功能。touchZoomRotate: 手指點選進行地圖旋轉與縮放操作，是行動裝置的交互功能。

範例：

offLayer

offLayer(layerString)

隱藏指定圖層

參數：

layerString string : 隱藏id字串包含layerString的所有圖層

範例：

offLoading

offLoading()

結束讀取畫面

範例：

offPoiMarker

offPoiMarker()

停用點選地圖顯示地標功能。

範例：

on

on(eventId, layerId, func)

對特定圖層新增一個監聽事件，只會在事件動作包含特定圖層的可見部分時觸發。事件類別請至事件監聽。

參數：

eventId string : 事件類別。
layerId string : 圖層id，為選填。
func Function : 事件觸發時要呼叫的函式。

範例：

onBugMod

onBugMod()

開啟除錯模式

範例：

onInteraction

onInteraction(interaction)

開啟指定的地圖交互功能。

參數：

interaction string : 要開啟的地圖交互功能。scrollZoom: 縮放地圖功能。dragPan: 拖曳地圖功能。doubleClickZoom: 使用雙擊進行地圖放大。boxZoom: 使用鍵盤shift加滑鼠拖曳來選擇一個區域，然後進行放大至該區域的功能，是電腦裝置的交互功能。keyboard: 鍵盤操作，提供電腦裝置的交互功能。dragRotate: 使用滑鼠點選進行地圖旋轉，是電腦裝置的交互功能。touchZoomRotate: 手指點選進行地圖旋轉與縮放操作，是行動裝置的交互功能。

範例：

onLayer

onLayer(layerString)

顯示指定圖層

參數：

layerString string : 顯示id字串包含layerString的所有圖層

範例：

onLoading

onLoading(_setHTML, _limit)

開始讀取畫面。

參數：

_setHTML string :
_limit number : 選填，可客製化讀取畫面的元素。

範例：

onMapClick

onMapClick(_canvasX, _canvasY)

當同時使用 OperLayers 與 mapPlus 時，OperLayers 會攔截了 mapPlus 的 click 事件，你可以按照以下步驟來獲取 X 和 Y 座標，並調用 mapPlus 的 onMapClick() 方法：

參數：

_canvasX number : canvasX座標
_canvasY number : canvasY座標

範例：

once

once(eventId, func)

新增一個監聽事件，觸發後刪除該監聽事件。事件類別請至事件監聽。

參數：

eventId string : 事件類別
func Function : 事件觸發時要呼叫的函式。

範例：

queryRenderedFeatures

queryRenderedFeatures(point, filter)

查詢地圖以取得渲染要素。

參數：

point object : 地圖座標（非經緯度）。

名稱	描述
point.x `number`	地圖的`x`軸座標。
point.y `number`	地圖的`y`軸座標。

filter object : 篩選須回傳的資料。

名稱	描述
filter.layers `string[]`	篩選的圖層id。

範例：

querySourceFeatures

querySourceFeatures(sourceId)

查詢地圖中的資源要素。

參數：

sourceId string : 地圖資源id。

範例：

recordMapViewToURL

recordMapViewToURL()

將地圖視角的參數紀錄在URL。

範例：

redraw

redraw()

強制同步重新繪製地圖。

範例：

redrawGeojson

redrawGeojson()

將修改過的GeoJSON資源重新繪製到地圖上。

範例：

remove

remove()

刪除整份地圖

範例：

removeAllPoiMarker

removeAllPoiMarker()

移除所有的地標。

範例：

removeControl

removeControl(control)

移除地圖的控制器

參數：

control Object : 要移除的控制器。

範例：

removeGeojsonLayer

removeGeojsonLayer(options)

移除GeoJSON裡的圖層。

參數：

options object :

名稱	描述
options._sourceId `string` 預設: `"tmpData"`	資源id
options._layerId `string` 預設: `"tmpLayer"`	圖層id

範例：

removeLayer

removeLayer(layerId)

刪除指定圖層。

參數：

layerId string (預設: "tmpLayer"): 圖層id

範例：

removePathById

removePathById(pathId)

移除繪製出的線條。

參數：

pathId string : 線條的id，為必須的。

範例：

removeSource

removeSource(sourceId)

從地圖的樣式中移除一個資源。注意：若該資源有圖層正在使用，則無法刪除。

參數：

sourceId string (預設: "tmpData"): 資源id

範例：

setBearing

setBearing(bearing)

設定地圖旋轉角。

參數：

bearing number : 旋轉角

範例：

setCenter

setCenter(options)

設定地圖的中心點位置。

參數：

options object :

名稱	描述
options.lng `number`	經度
options.lat `number`	緯度

範例：

setFilter

setFilter(options)

設定圖層顯示的條件

參數：

options object :

名稱	描述
options.layerId `string`	圖層id
options.exp `string`	條件式`(==、!=、>、>=、<、<=、in、!in、has、!has、within)`

範例：

setLayerZoomRange

setLayerZoomRange(layerId, minzoom, maxzoom)

設定圖層可見範圍。

參數：

layerId string : 圖層id
minzoom number : 最小可見範圍
maxzoom number : 最大可見範圍

範例：

setLight

setLight(options)

設定地圖光源。

參數：

options object :

名稱	描述
options.anchor `string` 預設: `"viewport"`	光源角度設定，可設定為`viewport`或`map`，`viewport`光源為使用者視角，`map`光源為固定地圖方位，預設為`viewport`。
options.color `string` 預設: `"white"`	光源顏色，預設為`white`。
options.intensity `number` 預設: `0.5`	光源強度，為`0~1`的數值，預設為`0.5`。