向量圖磚套疊於TGOS圖台

   向量圖磚套疊於TGOS圖台

在本範例中，我們將示範如何將以向量式圖磚輸出之面量圖，套疊於TGOS MAP API所建立之圖台 

的展示方法，有關向量式圖磚詳細設定說明請參照匯出向量式圖磚。 

其做法依序為：

1.     建立一個客製化圖層customLayer，並設定他的寬與高。 

var mapDiv, map, smap; 

        var CustomLayer = function (map) {                    //客制化圖層 

                     this.width = 960; 

                     this.height = 500; 

            this.setMap(map); 

        }

2.   由於要將圖磚套疊在TGOS MAP API建立的圖台上，須利用TGOS MAP API中

      TGOS.TGOverlayView之方法進行套疊。 

       CustomLayer.prototype = new TGOS.TGOverlayView();     //繼承TGOS.TGOverlayView

3.     利用TGOS.TGOverlayView中onAdd方法設定要疊加的圖層，其座標系、寬度

       高度以及顯示的順序。 

        var layer = ""; 

        var data = null; 

        CustomLayer.prototype.onAdd = function () {       //實做onAdd，設定疊加層 

            var panes = this.getPanes();            //取得欲套疊的地圖承載層 

            var mapLayer = panes.overlayviewLayer; 

            this.mSRS = this.map.getCoordSys();             //設定疊加層座標系統

            this.div = document.createElement("div");         //設定疊加層HTML 物件(DIV) 

            this.div.id = "aa"; 

            this.div.style.position = "absolute"; 

            this.div.style.width = "100%";             //設定定疊加層寬度 

            this.div.style.height = "100%";            //設定定疊加層高度 

            this.div.className = "stations"; 

            this.div.style.zIndex  = "10000";         //設定定疊加層HTML物件 Style 

            mapLayer.appendChild(this.div);           //將div加入至現有圖層中 

            init(map.getBounds()); 

        }

4.   如有需要繪製物件疊加層，可利用TGOS.TGOverlayView中onDraw方法進行設

      定，在本範例中因不需繪製物件，故無指定物件內容。 

       CustomLayer.prototype.onDraw = function () {}         //實做onDraw

5.     利用TGOS MAP API建立圖台之地圖，設定其座標系統，並建立圖層。 

        function onload() { 

            mapDiv = document.getElementById("mapDiv"); 

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

            var customLayer1 = new CustomLayer(map);          //建立圖層 

6.    利用TGOS.TGEvent.addListener方法去監聽 tgos的 zoom_changed 跟 idle event

    ，當tgos接收到 zoom_changed改變時 把env 傳進去ZoomTo(env)，使圖台之互動

     同步。  

            TGOS.TGEvent.addListener(map, 'zoom_changed', function () { 

                var env = map.getBounds(); 

                smap.ZoomTo(env); 

            }); 

            TGOS.TGEvent.addListener(map, 'idle', function () { 

                var XY = map.getCenter();

                 smap.setCenter(XY); 

            }); 

        }

7.     在方法drawStatMap裡的option圖層參數設定增加closeMapObj，用來關閉地圖

      上面的其他元件，僅保留向量磚資訊。該設定預設為false，故欲匯出向量式圖磚疊

       加TGOS圖台需開啟此設定。 

            var option = { 

                pChoropleth: pChoropleth, 

                exportVectorTile: true, 

                quickDraw: false, 

                opacity: 0.8, 

                envelope: env, 

                closeMapObj: true 

        };