所有控制器

控制器	描述
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`	帶入自定義文字的附加資訊。

範例

// mapPlus init
const 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' );

// mapPlus init
const 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.continuousDrawing `boolean`	是否啟用連續繪圖模式，此模式可連續繪製多個幾何圖形，直至取消目前按鈕的 active 狀態或切換至其他幾何圖形為止，預設為 `false`。
options.showMeasureValue `boolean`	是否顯示測量值（長度/面積），預設為 `false`。
options.enableCustomButtonManagement `boolean`	是否使用自訂按鈕來實現繪圖功能，並統一控制自訂按鈕的 active 狀態，預設為 `false`。

warning

注意： 在自訂按鈕上，須根據所需功能分別賦予指定的 id（custom-point、custom-line、custom-polygon、custom-circle、custom-select、custom-clear），自訂按鈕的功能才會被啟用，詳情參考範例「繪圖控制指令」。

範例

// mapPlus init
const 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, // 若為 false，則僅預設的繪圖控制器按鈕可實現繪圖功能。
});
map.addControl( drawCtrl , 'top-right' );

// mapPlus init
const 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, // 若為 false，則僅預設的繪圖控制器按鈕可實現繪圖功能。
});
map.addControl( drawCtrl , 'top-right' );

實例方法

實例方法	描述
getAll	取得所有繪製的 GeoJSON。
add	加入既有的 GeoJSON。
startDrawPoint	開始繪製點幾何圖形。
startDrawLine	開始繪製線幾何圖形。
startDrawPolygon	開始繪製面幾何圖形。
startDrawCircle	開始繪製圓幾何圖形。
stopDraw	停止繪製幾何圖形，並切換到選擇模式。
clearAll	清除所有已繪製的幾何圖形。
onFeatureComplete	設定完成繪製幾何圖形時的回呼函式。

getAll

getAll()

取得所有繪製的 GeoJSON。

範例

// mapPlus init
const 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);

// mapPlus init
const 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 格式的幾何圖形資料。

範例

// mapPlus init
const 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);

// mapPlus init
const 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()

開始繪製點幾何圖形。

範例

// mapPlus init
const 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();

// mapPlus init
const 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()

開始繪製線幾何圖形。

範例

// mapPlus init
const 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();

// mapPlus init
const 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()

開始繪製面幾何圖形。

範例

// mapPlus init
const 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();

// mapPlus init
const 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()

開始繪製圓幾何圖形。

範例

// mapPlus init
const 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();

// mapPlus init
const 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()

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

範例

// mapPlus init
const 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();

// mapPlus init
const 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()

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

範例

// mapPlus init
const 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();

// mapPlus init
const 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] 格式的陣列。

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

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

範例

// mapPlus init
const 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]
});

// mapPlus init
const 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]
});

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`。

範例

// mapPlus init
const 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' );

// mapPlus init
const 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 要顯示全螢幕的容器。

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

範例

// mapPlus init
const 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' );

// mapPlus init
const 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 是否使用按鈕控制大眾運輸顯示/隱藏。

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

範例

// mapPlus init
const 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' );

// mapPlus init
const 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。

範例

// mapPlus init
const 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' );

// mapPlus init
const 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。

範例

// mapPlus init
const 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' );

// mapPlus init
const 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。

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

範例

// mapPlus init
const 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' );

// mapPlus init
const 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' );

NavigationControl

new mapPlus.NavigationControl()

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

範例

// mapPlus init
const 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' );

// mapPlus init
const 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。

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

範例

// mapPlus init
const 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' );

// mapPlus init
const 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`。

範例

// mapPlus init
const 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' );

// mapPlus init
const 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`。

範例

// mapPlus init
const 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' );

// mapPlus init
const 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。

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

範例

// mapPlus init
const 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' );

// mapPlus init
const 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` 樣式檔。

範例

// mapPlus init
const 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' );
});

// mapPlus init
const 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 樣式檔。

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

範例

// mapPlus init
const 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',
    });
});

// mapPlus init
const 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。

範例

// mapPlus init
const 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' );
});

// mapPlus init
const 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 如果圖磚為特殊地標，是否要忽略套用建物材質。

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

範例

// mapPlus init
const 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' );
});

// mapPlus init
const 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 設定即時路況的顏色。

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

範例

// mapPlus init
const 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' );
});

// mapPlus init
const 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' );
});

AttributionControl​

DrawControl​

getAll​

add​

startDrawPoint​

startDrawLine​

startDrawPolygon​

startDrawCircle​

stopDraw​

clearAll​

onFeatureComplete​

FrameRateControl​

FullscreenControl​

MassTransitControl​

offTransit​

onTransit​

MeasureControl​

NavigationControl​

RouteNavControl​

ScaleControl​

SearchControl​

SelectControl​

StyleModeControl​

addStyleMode​

setStyleMode​

TextureControl​

TrafficFlowControl​

AttributionControl

DrawControl

getAll

add

startDrawPoint

startDrawLine

startDrawPolygon

startDrawCircle

stopDraw

clearAll

onFeatureComplete

FrameRateControl

FullscreenControl

MassTransitControl

offTransit

onTransit

MeasureControl

NavigationControl

RouteNavControl

ScaleControl

SearchControl

SelectControl

StyleModeControl

addStyleMode

setStyleMode

TextureControl

TrafficFlowControl