於TGOS底圖上介接WMTS

API使用範例:於TGOS底圖上介接WMTS

 

情境假設:

當我們需要在TGOS底圖上以輸入WMTS連結的方式來建立一個WMTS層,我們只需要透過簡單的指令即可加入需要的WMTS圖層,另外TGOS API也提供了移除指定WMTS圖層的方法,請參考下方的說明。

 

TGOS MAP API建置方式:

 

1.     初始化地圖:
1.1 
加入預設底圖並關閉所有控制項:
        宣告一個TGOnlineMap( )物件來建立TGOS底圖,其中的mapOptions參數為自訂的地圖設定,範例中使用「disableDefaultUI: true」的設定來關閉所有的地圖控制項,使圖面看起來更加的簡潔。

                  var mapOptions = {
                          disableDefaultUI: true               //
關閉所有地圖操作介面
                  };
         pMap = new TGOS.TGOnlineMap(pOMap,
 TGOS.TGCoordSys.EPSG3826,
             mapOptions);

2.     建立WMTS圖層:
2.1 
建立加入WMTS按鈕及URL輸入框:
        
首先可以在網頁的頁面上建立一個按鈕,並指定按鈕點擊後執行函式「WMTS( )」。另外也建立一個文字輸入框,提供連結到網頁的使用者輸入欲加入的WMTS連結,範例已提供一隻作為範例使用的URL連結。

                  <input id="WMTSurl" type="text" size="80" value="在此輸入WMS連結"/>
         <
input type="button" value="加入WMTS圖層" onclick="WMTS();"/>

2.2 
設定WMTS函式:
        
第一步我們先宣告一個「TGWMTSLayer( )」物件,並指定底圖。接著第二步將使用者輸入的WMTS連結提取出來,之後使用「addWMSLayer( )」方法將WMS圖層加入。方法內的第一項參數為WMTS圖層來源;第三項參數則是WMTS的圖層訊息;第四項則為屬性設定。

                  var WMTSLayer = new TGOS.TGWmtsLayer(src, pMap, info, req);        
                  var src = document.getElementById('WMTSrl').value;
        即可讓使用者自由疊加WMTS圖資服務至TGOS圖台上。

回到上方