使用ArcGIS API for JavaScript加入TGOS底圖

API使用範例：使用ArcGIS API for JavaScript加入TGOS底圖

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

情境假設：

這個範例示範如何在ArcGIS API for JavaScript的開發環境下加入TGOS提供的電子地圖服務作為底圖使用。使用者只需要搭配範例檔內另外附上的幾支JavaScript程式碼以及進行少量的網頁客製化，即可輕鬆地在ArcGIS API for JavaScript的架構下引用TGOS電子地圖作為底圖。使用者如果需要更多的地圖功能，則需依照ArcGIS API for JavaScript所提供的內容再進行加值開發。

TGOS MAP API建置方式：

1. 設定SGSArcGISServer.js引用權限

開始建立網頁使用之前，必須設定引用TGOS圖磚服務的權限。在申請頁面申請通過後，會得到一組APPID與APIKey授權碼。開啟SGSArcGISServer.js檔(請由上方下載說明文件)，於程式碼第162~163行，將"appid: "yourID", apikey: "yourkey""字串中的YourID及YourKey置換為申請取得的授權碼，即可完成引用權限的設定。

2. 引用外部JavaScript：

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

<script type="text/javascript" src="/TGOS_MAP_API/Web/Sample_Codes/TGOSMapAPI/QuickExample/ArcGIS/scripts/Framework.js"></script>

3. 載入模組啟用底圖

ArcGIS API建立必須在建立圖台之前使用require載入相關模組並且在DOM準備妥當之後進行圖台初始化的作業。因此，請在<head>頁籤加入以下程式碼---

, function (

Map, esriConfig, esriRequest, Color,

MapView, BaseTileLayer,Extent,TileInfo

)

{
                
                }
            </script>

4. 圖台初始化

開發者可以使用以下程式碼完成地圖初始化的設定，操作步驟依序為：建立ArcGIS API的地圖物件，設定坐標系統，設定圖磚代理服務位址，設定TGOS圖磚，最後加入圖層。

//設定ESRI API的CROS

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

var service = "http://api.tgos.tw/TileAgent/";   //設定圖磚代理服務位址

            
            var BaseMap = "TGOSMAP_W.aspx"; //TGOS電子地圖
            //var BaseMap = "NLSCMAP_W.aspx"; //台灣通用電子地圖
            //var BaseMap = "F2IMAGE_W.aspx"; //福衛二號影像
            //var BaseMap = "ROADMAP_W.aspx"; //福衛二號混合圖
            //var BaseMap = "HILLSHADE_W.aspx"; //地形暈渲圖
            //var BaseMap = "HILLSHADEMIX_W.aspx";      //地形暈渲混合圖

//var BaseMap = "SEGISMAP_W.aspx"; //統計區MAP

var _url = service + BaseMap; //組合TGOS圖磚服務位址
var TileLayer = new SGSTileLayer({

urlTemplate: _url,

title: "TGOSMAP",

nlayer: "0",

//TGOS KEY

appid: "yourID",

apikey: "yourkey"

});

// 新增一個map到你的圖台中，並設定預設底圖

var map = new Map({

basemap: "satellite"

});

// create a new scene view and add the map

var view = new MapView({

container: "OMap",

map: map,

center: [121.551, 25.036],

zoom: 17

});

map.add(TileLayer);