使用ArcGIS API for JavaScript加入TGOS底圖

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

適用版本：ArcGIS API for JavaScript 3版

情境假設：

這個範例示範如何在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檔(請由上方下載說明文件)，於程式碼第72行，將"/GetCacheImage?APPID=YourID&APIKEY=YourKey&S="字串中的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是建立在JavaScript 工具Dojo的基礎之上，必須在建立圖台之前使用載入模組並且在DOM準備妥當之後進行圖台初始化的作業。因此，請在<head>頁籤加入以下程式碼---

            <script type="text/javascript">
                dojo.require("esri.map");  //載入模組
                function init()   //圖台初始化
                {
                
                }
                dojo.domReady!(init); //一旦DOM準備妥當之後進行圖台初始化的作業
            </script>

4. 圖台初始化

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

            var map = new esri.Map("OMap", {
                spatialReference: new esri.SpatialReference({wkid:3857})
            });         //宣告map為ArcGIS Online地圖並指定div "OMap"為地圖區
            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圖磚服務位址
            LoadScript("/TGOS_MAP_API/Web/Sample_Codes/TGOSMapAPI/QuickExample/ArcGIS/SGSArcGISServer.js", function() { //使用LoadScript方式讀取SGSArcGISServer.js
                
                var sgsLayer = new SGSTileLayer(_url, "",  0);
                map.addLayer(sgsLayer);                  //加入圖層
            });

使用ArcGIS API for JavaScript加入TGOS底圖_v3.x