Skip to main content

介紹

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

使用方法​

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

實例方法描述
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'。
warning

在添加控制器時，須注意部分控制器會有互相衝突的狀況，詳情請參考「互相衝突的控制器」區塊。

範例

// 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 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 : 要移除的控制器。

範例

// 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 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()

移除地圖的全部控制器。

範例

// 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 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

範例

// 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();
const measureCtrl = new mapPlus.MeasureControl();

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