使用Google Maps JavaScript API加入TGOS底圖
API使用範例：使用Google Maps JavaScript API加入TGOS底圖
情境假設：
這個範例示範如何在Google Maps JavaScript API的開發環境下加入TGOS提供的底圖圖磚服務作為搭配的圖層使用。使用者只需要連結至TGOS API提供的圖磚代理服務程式，並引用範例檔中附上的JavaScript程式碼後，只要進行少量的網頁客製化，即可輕鬆地在Google Maps JavaScript API的架構底下引用TGOS電子地圖作為底圖。使用者如果需要更多的地圖功能，則需依照Google Maps API所提供的內容再進行加值開發。
TGOS MAP API建置方式：
1. 設定SGSGoogle.js引用權限
開始建立網頁使用之前，必須設定引用TGOS圖磚服務的權限。在申請頁面申請通過後，會得到一組APPID與APIKey授權碼。開啟SGSGoogle.js檔(請由上方下載說明文件)，於程式碼第99行，將"/GetCacheImage?APPID=YourID&APIKEY=YourKey&S="字串中的YourID及YourKey置換為申請取得的授權碼，即可完成引用權限的設定。
2. 引用外部JavaScript：
在範例中我們必須引用兩個JavaScript檔案來配合使用，第一個是Google Maps JavaScript API，另一個則是TGOS提供的JavaScript檔，其內部已經針對在Google Maps API的環境下客製化引用TGOS電子地圖的部份進行設定。引用方式如下---
<script type="text/javascript"src="https://maps.googleapis.com/maps/api/js?
sensor=false">
</script> <!--使用Google Map API建立圖台-->
<script type="text/javascript" src="/TGOS_MAP_API/Web/Sample_Codes/TGOSMapAPI/QuickExample/GoogleMap/SGSGoogle.js">
</script> <!--引用SGSGoogle.js-->
3. 建立基本地圖：
接著利用Google Maps JavaScript API所提供的物件及方法在網頁上建立一個基本的地圖。
var pOMap = document.getElementById("OMap"); //取得地圖DIV容器
var myOptions = //設定Google底圖客製化選項
{
mapTypeId: google.maps.MapTypeId.HYBRID, //Google地圖類型選用混合地圖
zoom:7,
center: new google.maps.LatLng(23.7, 121), //設定初始地圖中心點
maxZoom:18, //設定最大縮放層級,以符合TGOS圖磚的層級設定
minZoom:5 //設定最小縮放層級,以符合TGOS圖磚的層級設定
};
Google_Map = new google.maps.Map(pOMap, myOptions); //建立Google底圖
4. 組合圖磚連線位址：
欲使用非TGOS Web API提供的圖台來取得TGOS提供的底圖圖磚時，必須經由一圖磚代理程式，透過輸入正確的參數來取得底圖圖磚。該圖磚代理程式位於TGOS API的伺服器，其位址為
---"http://api.tgos.tw/TileAgent/"
連線至圖磚代理程式後，還需要指定欲取得的圖磚類型。TGOS API在Web端總共提供了七套不同的底圖圖磚，其中每一套圖磚又分為TWD97和Web Mercator兩種不同的坐標系統類型。以本範例來說，我們必須引用Web Mercator坐標系統的圖磚，才能正確於Google Maps的介面展示呈現。接著每一套圖磚都必須指定不同的aspx名稱進行連結，最後組合圖磚代理程式的位址及圖磚名稱連結來完成連線位址的組合，如下列程式碼所示。
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圖磚服務位址
5. 加入TGOS底圖圖磚：
4.1 建立連線資訊：
完成Google Maps地圖的建立工作後，接著我們要透過網路取得TGOS底圖圖磚，再套疊在現有的Google Maps地圖上。第一步是先建立一個連線資訊，來設定TGOS電子地圖的網路位址及服務名稱，在這裡使用「SGSGoogle.js」內提供的「SuperGISServerConnection( )」函式來進行連線建立，函式內必須輸入兩項參數，第一項參數為上一個步驟所建立的圖磚服務連線位址；第二項則是正確建立連線後所執行的函式，我們在下個段落會再說明這個函式的設定方式。
var pConn = new SuperGISServerConnection( _url, ServerConnect);
4.2 加入地圖：
建立連線之後，透過建立一個回傳參數函式的方式，我們就可以將TGOS底圖圖磚加進Google Maps的圖台內。首先依照連線的回傳值「pConn」建立一個圖層，在這裡利用「SGSGoogle.js」內提供的「SGSTileLayer( )」函式來建立圖層，並指定目前的底圖為Google Maps (Google_Map)。
var pLyr = new SGSTileLayer(Google_Map, pConn, 0);
再來使用Google Maps API提供的「overlayMapTypes」屬性，將該圖層加入目前的地圖圖層陣列中，並指定為最上方的圖層，即完成所有的開發工作。
Google_Map.overlayMapTypes.insertAt(0, pLyr);
整段函式如下---
function ServerConnect(pConn)
{
var pLyr = new SGSTileLayer(Google_Map, pConn, 0);
//利用連線資訊建立一個新的TGOS圖層
Google_Map.overlayMapTypes.insertAt(0, pLyr);
//將圖層套疊於現有圖層之上
}
4.3 建立TGOS圖層開關
假設對於TGOS MAP底圖圖磚有進行開關的需求時，也可以透過客製化的方式來完成。首先先在網頁上建立一個checkbox物件，準備之後進行圖層開啟/關閉的互動操作使用。
<input id="checkbox" type="checkbox"onclick="SelectLayer()" checked/>
當checkbox的勾選狀態經由前台使用者的操作而改變時，就會執行函式"SelectLayer( )"，該函式會先判斷checkbox的勾選狀態，再利用「overlayMapTypes」屬性的「insertAt」和「removeAt」兩個方法。分別控制TGOS MAP圖層的開啟以及關閉動作。
var checkbox = document.getElementById("checkbox");//取得checkbox物件
if (checkbox.checked)
Google_Map.overlayMapTypes.insertAt(0, pLyr); //將圖層套疊於現有圖層之上
else
Google_Map.overlayMapTypes.removeAt(0, pLyr); //將圖層於現有圖層之上移除
