使用OpenLayers 4加入TGOS底圖
API使用範例：使用OpenLayers第4版加入TGOS底圖
情境假設：
這個範例示範如何在OpenLayers第4版的開發環境下加入TGOS提供的電子地圖服務作為底圖使用。使用者只需要連結至TGOS API提供的圖磚代理服務程式，並引用範例檔中附上的JavaScript程式碼後，只要進行少量的網頁客製化，即可輕鬆地在OpenLayers第4版的架構下引用TGOS電子地圖作為底圖。使用者如果需要更多的地圖功能，則需依照OpenLayers第4版所提供的內容再進行加值開發。
TGOS MAP API建置方式：
1. 引用外部JavaScript：
在範例中我們必須引用四個JavaScript檔案來配合使用，第一個是OpenLayers API，另外三個則是TGOS提供的JavaScript檔，其內部已經針對在OpenLayers的環境下客製化引用TGOS電子地圖的部份進行設定。引用方式如下---
<script type="text/javascript"src="/TGOS_MAP_API/Web/Sample_Codes/TGOSMapAPI/QuickExample/OpenLayers/scripts/Framework.js">
</script> <!--引用Framework.js 和AjaxAgent.js-->
<script type="text/javascript"src="/TGOS_MAP_API/Web/Sample_Codes/TGOSMapAPI/QuickExample/OpenLayers/scripts/AjaxAgent.js">
</script>
<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/OpenLayers/SGSOpenLayers.js">
</script> <!--引用SGSOpenLayers.js-->
2. 組合圖磚連線位址：
欲使用非TGOS Web API提供的圖台來取得TGOS提供的底圖圖磚時，必須經由一圖磚代理程式，透過輸入正確的參數來取得底圖圖磚。該圖磚代理程式位於TGOS API的伺服器，其位址為
---"http://api.tgos.tw/TileAgent/"
連線至圖磚代理程式後，還需要指定欲取得的圖磚類型。TGOS API在Web端總共提供了七套不同的底圖圖磚，其中每一套圖磚又分為TWD97和Web Mercator兩種不同的坐標系統類型。以本範例來說，我們必須引用Web Mercator坐標系統的圖磚，才能正確於OpenLayers的介面展示呈現。接著每一套圖磚都必須指定不同的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圖磚服務位址
3. 建立地圖：
3.1 取得TGOS電子地圖圖磚資訊：
取得TGOS圖磚服務之後，接著必須取得該服務的各項基本資訊，作為設定OpenLayers地圖的參數使用。在函式「GetResource( )」內，參數「result」為圖磚服務查詢後的結果，我們可以透過它來取得所有的圖磚相關設定。
var pNodeRes = result.Resource;
//result為執行LoadScript後的回傳結果, 取得其圖磚內容
if (pNodeCache)
{
var _resource = pNodeRes.ResourceName; //取得TGOS圖磚服務名稱
//取得服務的的左(CornerLeft)下(CornerLower)原點坐標值
var dCLeft = parseFloat(pNodeCache.CornerLeft);
var dCLower = parseFloat(pNodeCache.CornerLower);
//取得圖磚的寬度(TileWidth)和高度(TileHeight)
var ImgWidth = parseInt(pNodeCache.TileWidth);
var ImgHeight = parseInt(pNodeCache.TileHeight);
var pEnv = pNodeRes.Envelope; //取得圖磚的上下左右邊界值
var dCacheLeft = parseFloat(pEnv.Left);
var dCacheTop = parseFloat(pEnv.Top);
var dCacheRight = parseFloat(pEnv.Right);
var dCacheBottom = parseFloat(pEnv.Bottom);
var pSclss = pNodeRes.Scales;
var pScls = pSclss.Scale; //取得服務內的所有縮放層級
if (pScls)
{
if (pScls.length > 0)
{
for (var i = 0 ; i < pScls.length ; i++)
{
var pScl = pScls[i];
var fac = parseFloat(pScl.Factor);
//依序取出各個縮放層級, 並存入陣列resolution
resolutions.push(fac);
}
}
}
3.2 建立基本地圖：
取得所有TGOS圖磚服務的相關資訊後，利用OpenLayersAPI的物件及方法在網頁上建立一個地圖容器。其中地圖邊界及地圖的縮放層級設定，可以使用前一步驟所取出的相關圖磚設定來設定。
var map = new OpenLayers.Map('OMap', //在div 'OMap'內建立地圖
{
maxExtent: new OpenLayers.Bounds(dCacheLeft, dCacheBottom, dCacheRight,
dCacheTop), //以先前取出之邊界值設定地圖邊界
resolutions: resolutions, //設定地圖縮放層級
units: 'm' //設定地圖單位
});
接著先建立一個OpenStreetMap圖層，以作為底圖使用，如果不需要在圖台上瀏覽OpenStreetMap的話，這個步驟可以跳過。
var osm = new OpenLayers.Layer.OSM(); //建立一個OpenStreetMap圖層
3.3 設定引用權限、建立TGOS圖層並加入地圖
接著使用OpenLayers的物件及連線資訊等等建立一個TGOS圖層，其中關於TGOS圖層的圖磚大小及原點設定則是引用先前取出的各項圖磚參數。另外也必須在此設定TGOS圖層的引用權限，在申請頁面申請通過後，會得到一組APPID與APIKey授權碼，將下方程式碼字串中的YourID及YourKey置換為申請取得的授權碼，即可完成引用權限的設定。
var pLyr = newOpenLayers.Layer.XYZ.SuperGISServer("TGOS_MAP_LAYER", _url +
"/GetCacheImage?APPID=YourID&APIKEY=YourKey" +
"&L=0&S=${z}&X=${x}&Y=${y}",
{
tileSize: new OpenLayers.Size(ImgWidth, ImgHeight), //指定圖磚的寬高大小
tileOrigin: new OpenLayers.LonLat(dCLeft, dCLower) //指定服務的左下角原點
isBaseLayer:false, //是否設為底圖
opacity: 1 //透明度
}
);
最後使用方法「addLayers( )」及「zoomToMaxExtent( )」將OpenStreetMap以及TGOS底圖圖磚加入OpenLayers地圖容器內，完成所有開發動作。
map.addLayers([osm, pLyr]); //加入圖層
map.setCenter(new OpenLayers.LonLat(121, 23.7).transform('EPSG:4326',
'EPSG:3857'),7); //指定地圖初始化中心坐標與縮放層級
