堆疊順序設定

堆疊順序設定

在API中，每項疊加層物件都提供了改變其堆疊順序的屬性(zIndex)，藉由屬性數值的調整，就可以任意變更該疊加層在圖台上顯示的順序，讓重要的資訊可以顯示在其他資訊的上方。根據套疊計算方式的不同，TGOS MAP API共使用了兩個承載層(Pane)來套疊這些圖資，主題圖磚、WMTS等圖磚服務的疊加，需要有規律、陣列式的運算，統一放置於圖磚承載層；而點線面圖徵、圖片影像檔、WMS、KML等圖資，僅需依據指定的位置套疊，則放置於圖資承載層。在相同的承載層中，堆疊順序屬性可以共通排序。在本範例中，即展示了一項WMTS與主題圖磚，藉由堆疊順序值的變更，即可調整其展示順序：

function addWms(){

var tUrl = document.getElementById('wmsUrl').value;  //取出WMS連結

WMSLayer = new TGOS.TGWmsLayer(tUrl, {

//建立WMS物件, 加入WMS連結, 並指定相關屬性

map: pMap,

preserveViewport: true,

zIndex: 1,

wsVisible: true

});

}

function deleteWms(){

if (WMSLayer) {

WMSLayer.removeWmsLayer();  //當圖面上存在WMS圖層時, 將該圖層移除

} else {

alert('圖面上不存在WMS圖層');

}

}

//------------WMTS------------

var WmtsSrc = getWebProtocal() + getAPIPath() + 'TGOS_WMTS/TWD97/SimpleWMTS_LANDUSE3826.aspx';

var WmtsInfo = {  //設定WMTS套疊參數

matrixSet: 'TGOS97_LANDUSE.cfg', 

layer: 'Map',

format: "image/png",

style: "default"

};

var WmtsReq = {

wmtsVisible: true,

zIndex: 40,  //設定WMTS堆疊順序

opacity: 1  //設定透明度

};

WMTSLayer = new TGOS.TGWmtsLayer(WmtsSrc, pMap, WmtsInfo, WmtsReq);

//------------主題圖磚------------

TileLayer = new TGOS.TGTileOverlay();  //宣告主題圖磚物件

var TileReq = {  //設定主題圖磚需求參數

scaleLevel:0,  //地圖層級

left:Bounds.left,  //圖磚需求範圍邊界, 設定為全台灣範圍

top:Bounds.top,

right:Bounds.right,

bottom:Bounds.bottom,

map: pMap,  //套疊目標TGOnlineMap地圖物件

overlay: true,  //是否套疊主題圖磚

zIndex: 30  //設定主題圖磚堆疊順序

};

var TileType= TGOS.TGMapServiceId.CITYZONING;

TileLayer.getThemeTile(TileType, TileReq, 1, function(){});  //取得主題圖磚進行套疊