介紹

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

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

使用方法

使用地圖實例方法來增刪控制器。

實例方法描述
map.addControl新增地圖的控制器。
map.removeControl移除地圖的控制器。
map.removeAllControl移除地圖的全部控制器。

addControl

map.addControl(control, position)

新增地圖的控制器。

參數

參數描述
control Object地圖控制器，可添加 AttributionControl、DrawControl、FullscreenControl 等控制器，其他更多的控制器請參考「所有控制器」。
position string控制器位置，可設定 'top-left'、'top-right'、'bottom-left'、'bottom-right'，預設為 'top-right'。

範例

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 attrCtrl = new mapPlus.AttributionControl({    compact: true,    customAttribution: 'Powered by Kingwaytek',});map.on( 'style.load' , () => {    map.addControl( attrCtrl , 'bottom-right' );});

removeControl

map.removeControl(control)

移除地圖的控制器。

參數

  • control Object : 要移除的控制器。

範例

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 attrCtrl = new mapPlus.AttributionControl({    compact: true,    customAttribution: 'Powered by Kingwaytek',});map.on( 'style.load' , () => {    map.addControl( attrCtrl , 'bottom-right' );    setTimeout( () => {        map.removeControl( attrCtrl );    } , 5000 );});

removeAllControl

map.removeAllControl()

移除地圖的全部控制器。

範例

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 attrCtrl = new mapPlus.AttributionControl({    compact: true,    customAttribution: 'Powered by Kingwaytek',});const drawControl = new mapPlus.DrawControl();  // 添加控制器到地圖map.on( 'style.load' , () => {    map.addControl(attrCtrl);    map.addControl(drawControl);
    setTimeout( () => {        // 移除全部控制器        map.removeAllControl();    } , 5000 );});

互相衝突的控制器

因部分控制器的功能會互相影響，因此在添加下列控制器時，會自動移除與其衝突的控制器，避免共存造成問題，其餘的控制器皆可同時添加至地圖中。

控制器受影響的控制器
DrawControlMeasureControl、RouteNavControl
MeasureControlDrawControl、RouteNavControl
RouteNavControlDrawControl、MeasureControl
StyleModeControlTrafficFlowControl
TrafficFlowControlStyleModeControl

範例

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();const measureCtrl = new mapPlus.MeasureControl();
map.on( 'style.load' , () => {    // 當先添加 DrawControl，接著添加 MeasureControl 時    // 地圖只會保留後者，並自動移除 DrawControl    map.addControl(drawCtrl);    map.addControl(measureCtrl); });