利用物件疊加層套疊WMTS

API使用範例：利用物件疊加層套疊WMTS

情境假設：

使用者可以建立一個DIV，放置在地圖上任何一個位置，並放入需要的物件至DIV中。使用者也可指定該物件的疊加層先後順序，利用此功能可將WMTS圖磚套疊至TGOS MAP，讓資訊顯示於地圖之上。以下將以中央研究院提供的WMTS圖磚服務為例進行展示。

TGOS MAP API建置方式：

1. 初始化地圖：
    首先宣告一個TGOnlineMap( )物件，在網頁上建立一個地圖，並選擇座標系統。
            function onload() {

              mapDiv = document.getElementById("mapDiv");

              map = new TGOS.TGOnlineMap(mapDiv, TGOS.TGCoordSys.EPSG3857);

              //建立圖層

                 var customLayer1 = new CustomLayer(map);

                      }

2. 建立疊加層

建立DIV容器，再將WMTS圖磚置入，並設定疊加層之順序，使內容顯示於其他物件之上。

            //實做onAdd，設定疊加層

        CustomLayer.prototype.onAdd = function () {

            //取得地圖疊加層////

            var panes = this.getPanes();

            var mapLayer = panes.mapLayer;

            ///////////////////

                  //設定疊加層座標系統

            this.mSRS = this.map.getCoordSys();

                  //設定疊加層HTML 物件(DIV)

            this.div = document.createElement("div");

                  //設定定疊加層寬度

            this.div.style.width = "100px";

            //設定定疊加層高度

                  this.div.style.height = "50px";

                  var pMap = new TGOS.TGOnlineMap(this.div, TGOS.TGCoordSys.EPSG3857);

                  var Bounds = map.getBounds();

                  var src ="http://gis.sinica.edu.tw/tileserver/wmts";

                  var info = {

                          matrixSet: 'GoogleMapsCompatible',  //MatrixSet設定, 必要參數, 可進WMTS的Capabilities去看所需圖層使用的MatrixSet

                          layer: 'JM20K_1921',   //Layer Name, 必要參數

                          format: "image/jpeg",

                          style: "default"

                  };

                  var req = {

                          wmtsVisible: true,

                          zIndex: 50,

                          opacity: 0.65

                  };

                          //將div加入至現有圖層中

            mapLayer.appendChild(this.div);

                  var WMTSLayer = newTGOS.TGWmtsLayer(src, map, info, req);

        }