引用主題圖磚

API使用範例：引用主題圖磚

情境假設：

此範例以下拉式選單的方式，讓使用者可以選擇欲引用的主題圖磚，包含都市計畫圖、非都市土地使用分區圖、國土利用調查以及千分之一地形圖，引用後可套疊在底圖上進行合併展示。

TGOS MAP API建置方式：

1.    建立下拉式選單
        本範例首先於網頁介面建立一個下拉式選單，供使用者選擇欲加入之主題圖磚類型。其中每個選項的「value」值各自代入一個數字，供程式判斷主題圖磚類型使用。

            <select id="TileList">
                        <option value=1>都市計畫圖</option>
                        <option value=2>非都市土地使用分區圖</option>
                        <option value=3>國土利用調查</option>
                        <option value=4>千分之一地形圖</option>
            </select>

2.     建立主題圖磚物件
        在使用者透過下拉選單來指定主題圖磚類型後，於程式端我們先利用物件「TGTileOverlay」來建立一個主題圖磚物件。

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

        接著設定加入主題圖磚時所需要的參數---

            var req = {                                                   //設定主題圖磚需求參數
                        scaleLevel:0,                                           //地圖層級
                        left:140000,                                             //圖磚需求範圍邊界, 設定為全台灣範圍
                        top:2900000,
                        right:370000,
                        bottom:2400000,
                        map: pMap,                                            //套疊目標TGOnlineMap地圖物件
                        overlay: true                                           //是否套疊主題圖磚
            };

3.     加入主題圖磚
        設定好主題圖磚的基本參數後，接下來要決定該加入TGOS所提供的哪一幅主題圖磚。首先取得網頁介面的下拉選單物件，接著透過選項的value值來定義主題圖磚的樣式。

            if (document.getElementById("TileList").value == 1) {  //取得下拉選單的值
                        TileType= TGOS.TGMapServiceId.CITYZONING;   //依照值來指定主題圖磚的種類
            } else if (document.getElementById("TileList").value == 2) {
                        TileType= TGOS.TGMapServiceId.RURALZONING;
            } else if (document.getElementById("TileList").value == 3) {
                        TileType= TGOS.TGMapServiceId.LANDUSE;
            } else {
                        TileType= TGOS.TGMapServiceId.TOPO1000;
            }

        其中圖磚「CITYZONING」為都市計畫圖；「RURALZONING」為非都市土地使用分區圖；「LANDUSE」為國土利用調查圖；「TOPO1000」為千分之一地形圖。
        最後使用主題圖磚物件「TGTileOverlay( )」的方法「getThemeTile( )」來加入主題圖磚，方法內的第一個參數為圖磚種類；第二個參數填入步驟2.所設定的圖磚取得參數；第三個參數填入圖磚透明度；第四個參數則為callback function，可在其中取得圖磚的坐標陣列及圖磚取用狀態等等。

            TileLayer.getThemeTile(TileType, req, 0.7, function( ){ });