API使用範例：於OpenStreetMap圖台套疊TGOS主題地圖

情境假設：

此範例示範如何在OpenLayers API的開發環境下，介接TGOS提供的主題地圖服務作為搭配的圖層使用。使用者僅需呼叫TGOS提供OpenLayers API專用JavaScript程式碼，即可再少量的網頁客製化之後，輕鬆地在OpenStreetMap圖台套疊TGOS主題地圖。使用者如果需要更多的地圖功能，則需依照OpenLayers API所提供的內容再進行加值開發。

TGOS MAP 主題地圖代理程式建置方式：

1.    引用外部JavaScript：
在範例中我們必須引用三個JavaScript檔案來配合使用，第一個是OpenLayers API，另外兩個則是TGOS提供的JavaScript檔，其內部已經針對在OpenLayers的環境下客製化引用TGOS電子地圖的部份進行設定。引用方式如下：
   <script type="text/javascript" src="http://openlayers.org/api/OpenLayers.js">
   </script>                                                     <!--使用OpanLayers API建立圖台-->

   <script type="text/javascript" src="/TGOS_MAP_API/Web/Sample_Codes/TGOSMapAPI/QuickExample/TGThemeLayer_OpenLayers/TGThemeLayer_OpenLayers.js">
   </script>                                                     <!--引用TGThemeLayer_OpenLayers.js -->

2.    建立圖台的地圖物件：

在輸出新的主題地圖之前，須先建立一個可放置主題地圖的圖台，其中包含加入需要之底圖圖層與設定初始顯示中心，程式碼如下：

function initialize() {

                map = new OpenLayers.Map({                                        // 建立圖台的地圖物件

                        div: "TGMap",

                        projection: "EPSG:3857"

                });

                var osm = new OpenLayers.Layer.OSM();                     // 建立 OpenStreetMap 底圖

        之後使用方法「addLayers( )」將OpenStreetMap底圖加入OpenLayers地圖容器內，並用「setCenter()」設定初始顯示中心，完成基本圖台設定。

                map.addLayers([osm]);                              // 加入OepnStreetMap圖層

                map.setCenter(new OpenLayers.LonLat(121.551, 25.036).transform('EPSG:4326', 'EPSG:3857'),17);                                                                                 // 設定初始顯示中心

3.    使用TGOS金鑰取得主題地圖權限

與其它TGOS MAP API相同，TGOS主題地圖服務需要通過權限驗證方能使用。因此產生TGThemeAgent物件時，需要在其TGKey屬性設定TGOS金鑰(AppID與APIKey)，方能呼叫權限允許之主題地圖圖資。

4.    建立TGOS 主題地圖：

為加入想要呈現之主題地圖服務，因OpenLayers之坐標系統在程式中綁定為EPSG3857(Web麥卡托坐標系統)，故不用另外設定坐標系統，在建立主題地圖中僅需設定想呈現之服務名稱與圖層代碼，程式碼如下：

       agentLayer = new TGOS.TGThemeAgent(                   // 建立主題地圖圖層

            new TGOS.TGKey(appID, apiKey),                              // 申請的 appID 和 apiKey

輸入其相對應之服務名稱與圖層代碼，對照表請參照圖資欄位表，須注意的是在輸入服務圖層代碼時，圖層代碼前須重複輸入服務代碼，若圖層代碼第一碼非英文的話，則有特殊寫法如下：

              TGOS.TGMapServiceId. SCHOOL,                            // 服務名稱代碼

new Array(TGOS.TGMapId.SCHOOL.SCHOOL_B, TGOS.TGMapId.SCHOOL.SCHOOL_C,
         TGOS.TGMapId.SCHOOL.SCHOOL_D, TGOS.TGMapId.SCHOOL.SCHOOL_E,
         TGOS.TGMapId.SCHOOL.SCHOOL_F),
          // 服務圖層代碼列表(可為一項或多項)

TGOS.TGMapId.FLOOD_P['1DR450']
// 當圖層代碼第一碼非英文之寫法，FLOOD_P為服務名稱代碼，1DR450為服務圖層代碼

               opts);                                                                               // 其他的地圖設定