使用ArcGIS API for JavaScript加入TGOS主題地圖

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

適用版本：ArcGIS API for JavaScript 4.5、4.6、4.7版

情境假設：

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

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

1. 引用外部JavaScript

在範例中我們必須引用兩個JavaScript檔案來配合使用，其中一個是ArcGIS API for JavaScript，另外一個則是TGOS提供的JavaScript檔，其內部已經針對在ArcGIS API的環境下客製化引用TGOS電子地圖的部份進行設定。引用方式如下：

2. 建立圖台地圖物件

開始建立網頁使用之前，必須在建立圖台之前使用載入模組並且在DOM準備妥當之後才能開始建立圖台作業。因此請在<head>頁籤加入以下程式碼：

      //載入模組
      function init()                                         //開始建立圖台
      {

　　require([

　　"esri/Map",

　　"esri/config",

　　"esri/request",

　　"esri/Color",

　　"esri/views/MapView",

　　"esri/geometry/Extent",

　　"esri/layers/support/TileInfo",

　　"dojo/domReady!"

], function(

Map, esriConfig, esriRequest, Color,

MapView,Extent,TileInfo

)

{

　　　　　　　　//設定ESRIAPI的CROS

esriConfig.request.corsEnabledServers.push("https://api.tgos.tw/");

ArcGIS API 中可將坐標系統設定為EPSG3826(TWD97坐標系統)、4326(WGS84坐標系統)以及3857(Web麥卡托坐標系統)其中一種坐標系統，故需在此設定地圖物件之坐標系統、初始顯示中心以及放大級數，如方法一。

方法一：

var view = new MapView({

　　container: "OMap",

map: _map,

center: [121.551, 25.036],

zoom: 17

});

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

與其它TGOS MAP API相同，TGOS主題地圖服務需要通過權限驗證方能使用。因此產生TGThemeAgent物件時，需要在其TGKey屬性設定TGOS金鑰(AppID與APIKey)，於程式碼第35~36行，將，"appid: "yourID",apikey:"yourkey"，置換為申請取取得的授權碼，方能呼叫權限允許之主題地圖圖資。

4. 建立TGOS主題地圖

最後一個步驟為加入想要呈現之主題地圖服務，須注意主題地圖之坐標系統需與圖台之坐標系統一致，因此當使用TWD97坐標系統時，坐標系統參數須改為crs: TGOS.CoordSys.EPSG3826，圖徵才能順利出現。

var opts = {

map: map,

crs: TGOS.CoordSys.EPSG3857, // 圖台的坐標系統

title: "主題圖層", // 圖層名稱

opacity: 1.0, //圖層透明度

visible: true //預設圖層是否顯示

};

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

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); //其他的地圖設定

}