底圖與Overlay圖層

Overlay圖層指的是一張2D的圖片，會跟著地形進行變化貼在地表上。

底圖本身為一張Overlay圖層由於其獨一性與永遠為最底層的特性，且其透明度會與地形共用，所以會與一般的Overlay圖層做出區隔。

新增與更換底圖層

[info] 小提示：

程式碼連結：我是連結

由於底圖的獨一性，永遠只能存在一張底圖，所以底圖只有開啟及更換的功能，且兩個功能共用同一個方法。底圖的來源可以介接如BING、TGOS等等服務器來源，介接的URL參數請見《第十一章-附錄：網路地圖服務URL關鍵字》。

mapview.setBaseLayer({
    url: "BING_MAP",
    identifier: "IMAGE",
    urlTemplate: "https://sample.pilotgaea.com.tw/Oview.aspx?{URL}
});

新增與移除Overlay圖層

[info] 小提示：

程式碼連結：我是連結

新增一張”台灣影像圖層”，其中identifier指的是來源的識別名稱，layername則是建立圖層時在我們這邊的名稱，callback會收到載入成功與否

mapview.addTerrainWMTSOverlay({
    url: 'http://127.0.0.1:8080/wmts',
    identifier: '台灣影像圖層',
    layername: '台灣影像圖層'
}, function (info) {
    console.log(info);
    wmts_i = info;
});

我們也可以使用中研院提供的wmts服務為來源新增圖層

mapview.addTerrainWMTSOverlay({
    url: 'http://gis.sinica.edu.tw/worldmap/wmts',
    identifier: 'ESRINGWM',
    layername: 'ESRINGWM'
}, function (info) {
    console.log(info);
    wmts_s = info;
});

[info] 小提示：

為什麼identifier是ESRINGWM？相關資訊可以參考此頁

我們也可以將其混合使用，但須注意引入順序，先引入的圖層會比較靠近地表

mapview.addTerrainWMTSOverlay({
    url: 'http://gis.sinica.edu.tw/worldmap/wmts',
    identifier: 'ESRINGWM',
    layername: 'ESRINGWM'
}, function (info) {
    console.log(info);
    wmts_s = info;
});

mapview.addTerrainWMTSOverlay({
    url: 'http://127.0.0.1:8080/wmts',
    identifier: '台灣影像圖層',
    layername: '台灣影像圖層'
}, function (info) {
    console.log(info);
    wmts_i = info;
});

新增後想要移除”台灣影像圖層”

mapview.removeTerrainOverlay('台灣影像圖層');

想要移除全部的Overlay圖層

mapview.removeTerrainOverlay();

對圖層做任何修改刪除操作前須確保圖層是否已被載入。

在我們的範例中，要修改”範例影像圖層”的屬性，就必須把這段程式碼放到新增”範例影像圖層”的callback之中。

因為這個callback只有在”範例影像圖層”讀取成功或失敗後才會被觸發，目的是為了確定執行的順序，新增圖層也會有這些問題。

修改Overlay圖層的屬性

[info] 小提示：

程式碼連結：我是連結

接下來展示Overlay圖層的屬性修改，目前有「透明度修改」及「圖層隱藏」。

改變透明度(Alpha值為0~1)

mapview.getTerrainOverlay('台灣影像圖層').opacity = 0.75;

顯示(true)/隱藏(false)圖層

mapview.getTerrainOverlay('台灣影像圖層').show = false;

水遮罩

[info] 小提示：

程式碼連結：我是連結

以一個2D圖層覆蓋在地表上，用來標示某點是否為水，如果是的話便顯示水波效果。

載入一張水遮罩，設定值isWaterMask設為true，讀取成功後將showWater設為true，水波顯示便會開啟。

terrainview.addTerrainWMTSOverlay(
    {
      url: "http://wmts.nlsc.gov.tw/wmts/",
      identifier: "LUIMAP04",
      layername: "LUIMAP04",
      //添加水遮罩，將isWaterMask設為true
      isWaterMask: true,
      epsg: result.epsg,
      urlTemplate: "https://sample.pilotgaea.com.tw/Oview.aspx?{URL}"
    },
    function (info) {
      wmts = info;
      document.getElementById("water_enable").click();
    }
);

[info] 小提示： 本頁介紹的水遮罩功能僅能貼合地形，如果需要能調整高度的水面功能，請參考：海洋