Skip to main content

實例方法

實例方法描述
LngLatconvert將陣列形式的經緯度轉換成經緯度物件的型態。
Twd97ToLngLat將 TWD97 X,Y 座標轉換為經緯度座標。
addControl新增地圖的控制器。
addGeoJson將 GeoJSON 類型的資源加進地圖上，其中請留意type內容的大小寫需符合 GeoJSON specification 以及座標點位為經度在前緯度在後。圖層的型態有：fill, line, symbol。
addGeoJsonLayer新增 GeoJSON 格式的圖層。
addGeoJsonSource新增 GeoJSON 格式的資源。
addLayer新增圖層。
addListener增加資料層的監聽事件。
addNewPoiMarker點擊 poi 圖示時加上 marker，以及根據 geojson 內容新增 icon。
addSource將資源加進地圖樣式。
cameraAnimation配置地圖鏡頭動畫。
decodePolyline將 polyline 參數轉換為座標陣列。
drawEncodePath使用 polyline 製出線條。
drawPath使用座標點繪製出線條。
fitBounds將視圖畫面移動到特定座標範圍。
flyTo視窗畫面飛行到特定座標。
getBounds返回地圖的地理邊界。
getCanvas回傳 html 的 Canvas 元素。
getLayer取得指定圖層。
getMapView取得目前地圖視角的參數。
getMapViewFromURL從 URL 取得地圖視角的參數。
getSource從地圖的樣式中獲得指定 id 的資源。
isStyleLoaded返回一個布林值，指示地圖的樣式是否完全加載。
jumpTo視窗畫面切換到特定座標。
loadImage載入外部圖片，若是 url 需要支援 CORS。
mapSnapshot擷取當前地圖畫面。
moveLayer移動圖層順序。
off刪除一個監聽事件，所有事件類型請查看「事件類型」。
offBugMod關閉除錯模式。
offInteraction關閉指定的地圖交互功能。
offLayer隱藏指定圖層。
offLoading結束讀取畫面。
offPoiMarker停用點選地圖顯示地標功能。
on對特定圖層新增一個監聽事件，只會在事件動作包含特定圖層的可見部分時觸發，所有事件類型請查看「事件類型」。
onBugMod開啟除錯模式。
onInteraction開啟指定的地圖交互功能。
onLayer顯示指定圖層。
onLoading開始讀取畫面。
onMapClick當同時使用 OperLayers 與 mapPlus 時，OperLayers 會攔截 mapPlus 的 click 事件，因此可另外調用此方法。
once新增一個監聽事件，觸發後刪除該監聽事件，所有事件類型請查看「事件類型」。
queryRenderedFeatures查詢地圖以取得渲染要素。
querySourceFeatures查詢地圖中的資源要素。
recordMapViewToURL將地圖視角的參數紀錄在 URL。
redraw強制同步重新繪製地圖。
redrawGeojson將修改過的 GeoJSON 資源重新繪製到地圖上。
remove刪除整份地圖。
removeAllPoiMarker移除所有的地標。
removeControl移除地圖的控制器。
removeGeojsonLayer移除 GeoJSON 裡的圖層。
removeLayer刪除指定圖層。
removePathById移除繪製出的線條。
removeSource從地圖的樣式中移除一個資源。
setBearing設定地圖旋轉角。
setCenter設定地圖的中心點位置。
setFilter設定圖層顯示的條件。
setLayerZoomRange設定圖層可見範圍。
setLight設定地圖光源。
setMaxBounds限制地圖的範圍。
setMaxPitch設定地圖最大傾斜角。
setMaxZoom設定地圖最大縮放級別。
setMinPitch設定地圖最小傾斜角。
setMinZoom設定地圖最小縮放級別。
setPaintProperty設定圖層的樣式。
setPitch設定地圖傾斜角。
setSprite設定雪碧圖。
setStyle設定地圖樣式。
setZoom設定地圖縮放級別。
swapLayers交換兩個圖層的位置。

LngLatconvert​

LngLatconvert(locations)

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

參數

  • locations Array : 座標點陣列。

範例

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 lnglatObj = map.LngLatconvert([121.522327, 25.026659]);

Twd97ToLngLat​

Twd97ToLngLat(x, y)

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

參數

  • x number : X 座標
  • y number : Y 座標

範例

const lngLat = mapPlus.Twd97ToLngLat( 307065.2571 , 2770496.399 );
console.log(lngLat);
// {
//   lng: 121.53559860212545,
//   lat: 25.029308142529132,
// }

addControl​

addControl(control, position)

新增地圖的控制器。

參數

參數描述
control Object地圖控制器，可添加 AttributionControl、DrawControl、FullscreenControl 等控制器。
position string控制器位置，可設定 'top-left'、'top-right'、'bottom-left'、'bottom-right'，預設為 '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 attrCtrl = new mapPlus.AttributionControl({
    compact: true,
    customAttribution: 'Powered by Kingwaytek',
});
map.on( 'style.load' , () => {
    map.addControl(attrCtrl, 'bottom-right');
});

addGeoJson​

addGeoJson(geoData)

將 GeoJSON 類型的資源加進地圖上。

warning
  • type 內容的大小寫需符合 GeoJSON specification。
  • 座標點位為「經度在前，緯度在後」。
  • 圖層的型態有：fill、line、symbol。

參數

  • geoData object : GeoJSON 格式資源

範例

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 geoData = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      properties: {
        id: 0,
        fillColor: "red",
      },
      geometry: {
        type: "Polygon",
        coordinates: [
          [
           [121.528489, 25.048539],
           [121.539647, 25.0478],
           [121.540033, 25.03948],
           [121.528489, 25.048539],
          ],
        ],
      }
    },
  ],
};
map.addGeoJson(geoData);

addGeoJsonLayer​

addGeoJsonLayer(options)

新增 GeoJSON 格式的圖層。

參數

  • options object :

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

範例

// 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 options = {
    _sourceId: "poi",
    _layerId: "poi_brd",
    _type: 1,
    _colorField: "none",
    _content: "<your_content>",
};
map.addGeoJsonLayer(options)

addGeoJsonSource​

addGeoJsonSource(options)

新增 GeoJSON 格式的資源。

參數

  • options object :

    名稱描述
    options._sourceId string資源 id
    options._geoJson object JSONGeoJSON 資料

範例

// 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 options = {
    _sourceId: "poi",
    _geoJson: "<geo_json>",
};
map.addGeoJsonSource(options);

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

範例

// 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 options = {
    id: 'states',
    source: 'state-data',
    type: 'symbol',
    layout: {
        'text-field': ['get', 'name'],
    },
}
map.addLayer(options, 'nav_croad11');

addListener​

addListener(eventId, func)

增加資料層的監聽事件。

參數

  • eventId string : 事件類別，請參考事件類別。
  • func Function : 被呼叫的函式。接受兩個參數：
    • feature : 被點擊的地圖項目物件。
    • event : 觸發的事件物件。

範例

// 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 geoData = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      properties: {
        id: 0,
        fillColor: "red",
      },
      geometry: {
        type: "Polygon",
        coordinates: [
          [
           [121.528489, 25.048539],
           [121.539647, 25.0478],
           [121.540033, 25.03948],
           [121.528489, 25.048539],
          ],
        ],
      }
    },
  ],
};
map.addGeoJson(geoData);
// 新增事件監聽
map.addListener("click", (feature, event) => {
   map.data.overrideStyle(feature, { fillColor: "#ffff" });
   map.redrawGeojson();
});

addNewPoiMarker​

addNewPoiMarker(options)

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

參數

  • options object :

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

範例

// 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 options = {
    iconName: "B01",
    textSize: 15,
    onlyOneMarkerDisplay: false,
};
map.addNewPoiMarker();

addSource​

addSource(sourceId, sourceProperties)

將資源加進地圖樣式。

參數

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

範例

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 options = {
    type: "geojson",
    data: "./demo.geojson",
};
map.addSource("demoSource", options);

cameraAnimation​

cameraAnimation(animation, options)

配置地圖鏡頭動畫。

參數

  • animation string : 地圖動畫，可選值為 mapPlus.Animation.ROTATE。

  • options Object

    名稱描述
    options.loops number總循環次數，預設為 1。
    options.duration number動畫時間，預設為 3000。

範例

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 options = {
        loops: 3,
        duration: 12000,
    };
    map.cameraAnimation(mapPlus.Animation.ROTATE, options);
});

decodePolyline​

decodePolyline(encodePolyline)

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

參數

  • encodePolyline string : 需解碼的 polyline 參數。

範例

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 encodePolyline = 'q{xwCwy~dViAAcDCkHCY?';
map.on('style.load' , () => {
    const locations = map.decodePolyline(encodePolyline);
    console.log(locations);
    // [
    //     [ 121.56844 , 25.03625 ],
    //     [ 121.56845 , 25.03662 ],
    //     [ 121.56847 , 25.03744 ],
    //     ......
    // ]
});

drawEncodePath​

drawEncodePath(pathId, encodePolyline, style)

使用 polyline 製出線條。

參數

  • pathId string : 線條的id，為必須的。
  • encodePolyline string : polyline 格式的座標點。
  • style object : 線條樣式的參數。
名稱描述
style.width number線條寬度，預設為 5。
style.color string線條顏色，預設為 '#3FB1CE'。
style.useDash boolean是否使用虛線，預設為 false。
style.lineCap string線條端點樣式，可設為 'butt'、'square'、'round'，預設為 'butt'。

範例

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 encodePolyline = 'q{xwCwy~dViAAcDCkHCY?';
const style = {
    color: '#0000FF',
    width: 8,
    useDash: true,
    lineCap: 'square',
};
map.on('style.load' , () => {
    map.drawEncodePath('my_path', encodePolyline, style);
});

drawPath​

drawPath(pathId, locations, style)

使用座標點繪製出線條。

參數

  • pathId string : 線條的 id，為必須的。
  • locations Array : 座標點陣列。
  • style object : 線條樣式的參數。
名稱描述
style.width number線條寬度，預設為 5。
style.color string線條顏色，預設為 '#3FB1CE'。
style.useDash boolean是否使用虛線，預設為 false。
style.lineCap string線條端點樣式，可設為 'butt'、'square'、'round'，預設為 'butt'。

範例

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 locations = [
    [ 121.56844 , 25.03625 ],
    [ 121.56845 , 25.03662 ],
    [ 121.56847 , 25.03744 ],
    ......
];
const style = {
    color: '#0000FF',
    width: 8,
    useDash: true,
    lineCap: 'square',
};
map.on('style.load' , () => {
    map.drawPath('my_path', locations, style);
});

fitBounds​

fitBounds(locations, options)

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

參數

  • locations Array : 需要移動的座標範圍。

  • options object : 移動的參數。

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

範例

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 locations = [
    [121.5222, 25.0266],
    [121.5225, 25.0267],
];
const options = {
    padding: 20,
};
map.on('style.load' , () => {
    map.fitBounds(locations, options);
});

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 : 觸發畫面飛行的事件類別。

範例

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' , () => {
    map.flyTo({
        center: [
            121.52224265561472,
            25.026727168055572,
        ],
        zoom: 9,
        speed: 0.2,
        curve: 1,
        easing( t ) {
            return t;
        }
    });
});

getBounds​

getBounds()

返回地圖的地理邊界。

範例

// 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 bounds = map.getBounds();
    console.log( bounds );
})
// {
//     "_sw": {
//         "lng": 121.52079426274577,
//         "lat": 25.021851733196513
//     },
//     "_ne": {
//         "lng": 121.52369104848196,
//         "lat": 25.031602409229578
//     }
// }

getCanvas​

getCanvas()

回傳 html 的 Canvas 元素。

範例

// 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 canvas = map.getCanvas();
console.log( canvas ); // <canvas class="kwmap-canvas"...></canvas>

getLayer​

getLayer(layerId)

取得指定圖層。

參數

  • layerId 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 layer = map.getLayer( 'nav_croad11' );

getMapView​

getMapView()

取得目前地圖視角的參數。

範例

// 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 mapView = map.getMapView();
console.log( getMapView );
// {
//     zoom: 16.5,
//     pitch: 45,
//     bearing: 30,
//     center: {
//         lng: 121.53559860212545,
//         lat: 25.029308142529132,
//     }
// }

getMapViewFromURL​

getMapViewFromURL()

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

範例

// 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 query = map.getMapViewFromURL();
    console.log( query );
    // {
    //     center: '121.61317667022092,25.06416834158192,
    //     pitch: 75.7387027717653,
    //     bearing: 17.540449023166957,
    //     zoom: 17.751067039501972,
    // }
});

getSource​

getSource(sourceId)

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

參數

  • sourceId string : 資源 id

範例

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 options = {
    _sourceId: "mapPlus",
    _layerId: "poi_brd",
    _type: 1,
    _colorField: "none",
    _content: "<your_content>",
};
map.addGeojsonLayer( options );
const mySource = map.getSource("mapPlus");

isStyleLoaded​

isStyleLoaded()

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

範例

// 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 isStyleLoaded = map.isStyleLoaded();
console.log(isStyleLoaded); // `true` or `false`

jumpTo​

jumpTo(options)

視窗畫面切換到特定座標。

參數

  • options object : 畫面切換的參數。

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

範例

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' , () => {
    map.jumpTo({
        center: [
            121.52224265561472,
            25.026727168055572,
        ],
        zoom: 9,
    });
});

loadImage​

loadImage(png, imageName)

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

參數

  • png string : 圖片檔的 url 或是相對位址以存取圖片，檔案格式需為 png、webp 或 jpg 格式。
  • imageName 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',
});
map.loadImage({
   png: "https://upload.wikimedia.org/wikipedia/commons/7/7c/201408_cat.png",
    imageName: "newIcon",
});
const options = {
    type: "geojson",
    data: "./demo.geojson",
};
map.addSource("demoSource", options);
map.addLayer({
   'id': 'points',
   'type': 'symbol',
   'source': 'demoSource',
   'layout': {
        'icon-image': 'newIcon',
        'icon-size': 0.25
    }
 });

mapSnapshot​

mapSnapshot(options)

擷取當前地圖畫面。

參數

  • options object

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

範例

// 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 base64Image = await map.mapSnapshot({
    outputWidth: 800,
    outputHeight: 450,
    quality: 1,
    download: true,
    fileName: 'my_image',
})
console.log(base64Image) // data:image/jpeg;base64,/9j/4AAQSk......

moveLayer​

moveLayer(layerId, beforeLayerId)

移動圖層順序。

參數

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

範例

// 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.moveLayer('base3d', 'nav_croad11');

off​

off(eventId, func)

刪除一個監聽事件，所有事件類型請查看「事件類型」。

參數

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

範例

// 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 handleMapClick = () => {
    console.log('Is on click !');
};
map.on('click', handleMapClick);
// 刪除該事件監聽
map.off('click', handleMapClick);

offBugMod​

offBugMod()

關閉除錯模式。

範例

// 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.offBugMode();

offInteraction​

offInteraction(interaction)

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

參數

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

範例

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.offInteraction('dragPan');

offLayer​

offLayer(layerString)

隱藏指定圖層。

參數

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

範例

// 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.offLayer("txt");
// 將隱藏id字串包含`txt`的所有圖層，例：txt_town、txt_city、txt_bridge......

offLoading​

offLoading()

結束讀取畫面。

範例

// 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.onLoading();
map.on('style.load', () => {
    map.offLoading();
});

offPoiMarker​

offPoiMarker()

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

範例

// 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.offPoiMarker();

on​

on(eventId, layerId, func)

對特定圖層新增一個監聽事件，只會在事件動作包含特定圖層的可見部分時觸發，所有事件類型請查看「事件類型」。

參數

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

範例

// 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('click', () => {
    console.log('Is on click !');
});
// 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 options = {
    _sourceId: "sourceId",
    _layerId: "layerId",
    _type: "fill",
    _content: {
      type: "FeatureCollection",
      features: [
        {
          type: "Feature",
          geometry: {
            type: "Polygon",
            coordinates: [
              [
                [121.528489, 25.048539],
                [121.539647, 25.0478],
                [121.540033, 25.03948],
                [121.528489, 25.048539],
              ],
            ],
          },
        },
      ],
    },
    _colorField: { "fill-color": "red" },
  };
  map.addGeojsonLayer(options);
  map.on("dragend", "layerId", () => {
    console.log("Is drag end !");
  });

onBugMod​

onBugMod()

開啟除錯模式。

範例

// 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.onBugMode();

onInteraction​

onInteraction(interaction)

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

參數

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

範例

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.onInteraction('dragPan');

onLayer​

onLayer(layerString)

顯示指定圖層。

參數

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

範例

// 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.onLayer( "txt" );
// 將顯示id字串包含`txt`的所有圖層，例：txt_town、txt_city、txt_bridge......

onLoading​

onLoading(_setHTML, _limit)

開始讀取畫面。

參數

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

範例

// 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.onLoading( `
    <img src="your_image"
        alt="spinner"
        width="50"
        height="50"
        />
`);

onMapClick​

onMapClick(_canvasX, _canvasY)

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

參數

  • _canvasX number : canvas X 座標
  • _canvasY number : canvas Y 座標

範例

// 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',
});
// openLayers setting
// ...
// ...
// OpenLayers 的 `click` 事件
openLayersMap.on('click' , event => {
    const canvasX = event.pixel[0];
    const canvasY = event.pixel[1];
    // 調用 mapPlus 的 `onMapClick()`
    map.onMapClick(canvasX, canvasY);
});

once​

once(eventId, func)

新增一個監聽事件，觸發後刪除該監聽事件，所有事件類型請查看「事件類型」。

參數

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

範例

// 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.once('click', () => {
    console.log('Is on click !');
});

queryRenderedFeatures​

queryRenderedFeatures(point, filter)

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

參數

  • point object : 地圖座標（非經緯度）。
名稱描述
point.x number地圖的 x 軸座標。
point.y number地圖的 y 軸座標。
  • filter object : 篩選須回傳的資料。
名稱描述
filter.layers 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( 'mousemove' , ({ point }) => {
    const features = map.queryRenderedFeatures(point, {
        layers: [ 'base3d' ]
    })
    if( features.length === 0 ) return
    const { properties } = features[0]
    console.log( features[0] )
    // { "gid": 4882729 , "acad_5": "BL" ... }
})

querySourceFeatures​

querySourceFeatures(sourceId)

查詢地圖中的資源要素。

參數

  • sourceId 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('render', () => {
    const features = map.querySourceFeatures('base3d');
    console.log(features);
    // [ { "gid": 4882729 , "acad_5": "BL" ... } ]
});

recordMapViewToURL​

recordMapViewToURL()

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

範例

// 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', () => {
    map.recordMapViewToURL();
});

redraw​

redraw()

強制同步重新繪製地圖。

範例

// 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.redraw();

redrawGeojson​

redrawGeojson()

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

範例

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 geoData = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      properties: {
        id: 0,
        fillColor: "red",
      },
      geometry: {
        type: "Polygon",
        coordinates: [
          [
           [121.528489, 25.048539],
           [121.539647, 25.0478],
           [121.540033, 25.03948],
           [121.528489, 25.048539],
          ],
        ],
      },
    },
  ],
};
map.addGeoJson(geoData);
const find = map.data.getFeatureById(0);
find.setProperty("filColor", "green");
map.redrawGeojson();

remove​

remove()

刪除整份地圖。

範例

// 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.remove();

removeAllPoiMarker​

removeAllPoiMarker()

移除所有的地標。

範例

// 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.removeAllPoiMarker();

removeControl​

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);
});

removeGeojsonLayer​

removeGeojsonLayer(options)

移除 GeoJSON 裡的圖層。

參數

  • options object :

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

範例

// 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 options = {
    _sourceId: "poi",
    _layerId: "poi_brd",
};
map.removeGeojsonLayer(options);

removeLayer​

removeLayer(layerId)

刪除指定圖層。

參數

  • layerId string : 圖層 id，預設為 "tmpLayer"。

範例

// 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.removeLayer("poi_food");

removePathById​

removePathById(pathId)

移除繪製出的線條。

參數

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

範例

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 pathId = 'my_path';
map.on('style.load', () => {
    // 繪製線條
    map.drawEncodePath(pathId, 'q{xwCwy~dViAAcDCkHCY?');
    // 移除線條
    setTimeOut( () => {
        map.removePathById(pathId);
    } , 5000);
});

removeSource​

removeSource(sourceId)

從地圖的樣式中移除一個資源。

warning

注意：若該資源有圖層正在使用，則無法刪除。

參數

  • sourceId string：資源 id，預設為 "tmpData"。

範例

// 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.removeSource("base");

setBearing​

setBearing(bearing)

設定地圖旋轉角。

參數

  • bearing number : 旋轉角。

範例

// 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.setBearing(90);

setCenter​

setCenter(options)

設定地圖的中心點位置。

參數

  • options object :

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

範例

// 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 options = {
    lng: 121.53,
    lat: 25.03,
};
map.setCenter(options);

setFilter​

setFilter(options)

設定圖層顯示的條件。

參數

  • options object :

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

範例

// 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 options = {
    layerId: 'poi_brd',
    exp: ['in', 'gid', 12345],
};
map.setFilter(options);

setLayerZoomRange​

setLayerZoomRange(layerId, minzoom, maxzoom)

設定圖層可見範圍。

參數

  • layerId string：圖層 id。
  • minzoom number：最小可見範圍。
  • maxzoom number：最大可見範圍。

範例

// 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.setLayerZoomRange('base3d', 16, 24);

setLight​

setLight(options)

設定地圖光源。

參數

  • options object :

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

範例

// 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', () => {
    map.setLight({
        anchor: 'map',
        color: 'white',
        intensity: 0.7,
    })
})

setMaxBounds​

setMaxBounds(bounds)

限制地圖的範圍。

參數

  • bounds Array : 接受一組矩形邊界，LatLngBounds 或兩個對角點的陣列 [[lat1, lng1], [lat2, lng2]]，通常是 [[西南角], [東北角]]。

範例

// 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 bounds = [
    [ 120 , 20 ], // 西南角 (Lat, Lng)
    [ 128 , 28 ], // 東北角 (Lat, Lng)
];
map.setMaxBounds(bounds);

setMaxPitch​

setMaxPitch(pitch)

設定地圖最大傾斜角。

參數

  • pitch number : 傾斜角 (0-85)。

範例

// 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.setMaxPitch(60);

setMaxZoom​

setMaxZoom(zoom)

設定地圖最大縮放級別。

參數

  • zoom number : 縮放級別 (0-24)。

範例

// 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.setMaxZoom(20);

setMinPitch​

setMinPitch(pitch)

設定地圖最小傾斜角。

參數

  • pitch number : 傾斜角 (0-85)。

範例

// 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.setMinPitch(20);

setMinZoom​

setMinZoom(zoom)

設定地圖最小縮放級別。

參數

  • zoom number : 縮放級別 (0-24)。

範例

// 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.setMinZoom(4);

setPaintProperty​

setPaintProperty(layerId, property, value)

設定圖層的樣式。

參數

  • layerId string : 圖層 id。
  • property string : 要設定的屬性。
  • value string|number : 要設定的值。

範例

// 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.setPaintProperty('wmts-test-layer', 'raster-opacity', 1);

setPitch​

setPitch(pitch)

設定地圖傾斜角。

參數

  • pitch number : 傾斜角 (0-85)。

範例

// 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.setPitch(30);

setSprite​

setSprite(url)

設定雪碧圖。

參數

  • url 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',
});
map.setSprite('https://your_sprite_source');

setStyle​

setStyle(styleJson)

設定地圖樣式。

參數

  • styleJson JSON|object : 地圖的樣式檔，為 Json 格式。

範例

// 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.setStyle('<your_json>');

setZoom​

setZoom(zoom)

設定地圖縮放級別。

參數

  • zoom number : 縮放級別 (0-24)。

範例

// 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.setZoom(16);

swapLayers​

swapLayers(lower, upper)

交換兩個圖層的位置。

參數

  • lower string : 原先在下方（較底層）的圖層名稱。
  • upper string : 原先在上方（較頂層）的圖層名稱。

範例

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',
});

await map.addGeoJson(
    "https://kw3dmap.autoking.com.tw/kwmap/assets/demo/geojson/example.geojson"
);

map.data.add({
   geometry: new mapPlus.Data.LineString([
    { lat: 25.026045, lng: 121.52275 },
    { lat: 25.027045, lng: 121.53353 },
  ]),
   properties: {
     strokeColor: "yellow",
     strokeWeight: 10,
     opacity: 1,
   },
 });

map.swapLayers("lineLayer", "fillLayer");