於TGOS底圖上介接WMS

API使用範例：於TGOS底圖上介接WMS

情境假設：

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

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.     建立WMS圖層：
2.1 建立加入WMS按鈕及URL輸入框：
        首先可以在網頁的頁面上建立一個按鈕，並指定按鈕點擊後執行函式「addWms( )」。另外也建立一個文字輸入框，提供連結到網頁的使用者輸入欲加入的WMS連結，範例已提供一隻作為範例使用的URL連結。

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

2.2 設定addWMS函式：
        第一步我們先將使用者輸入的WMS連結提取出來，第二步WMSLayer變數宣告為一個「TGWMSLayer( )」物件，並指定WMS的url來源，接著設定相關地圖、zIndex等屬性將WMS圖層加入。方法內的第一項參數為WMS來源位置，範例內將這個圖層命名為tUrl；第二項參數則是WMS物件的屬性項目。

                   var tUrl = document.getElementById('wmsUrl').value;
                  WMSLayer = new TGOS.TGWmsLayer(tUrl, {
                         map: pMap, 
                         preserveViewport: ture,
                         zIndex: 1,
                         wsVisible: true
                 });

3.     移除WMS圖層：
        如同加入WMS圖層的方式，首先我們先在網頁上製作一個作為移除WMS圖層使用的按鈕，並指定按鈕點擊後執行函式「deleteWms( )」。

        <input type="button" value="刪除WMS" onclick="deleteWms();"/>

        接著設定函式內容，在範例中我們使用一個簡單的判別式來進行，假設使用者執行函式時圖面上已經存在WMS圖層了，這時候我們就可以使用TGWmsLayer( )物件內的「removeWmsLayer( )」方法，並指定欲移除的WMS圖層名稱來進行移除。反之則在網頁上跳出一個警告視窗來提醒使用者目前圖面上並沒有存在任何的WMS圖層。

        if (WMSLayer) {
                          WMSLayer.removeWmsLayer('WMS1');        //當圖面上存在WMS圖層時, 將該圖層移除
                  } else {
                          alert('圖面上不存在WMS圖層');
                  }