結合TGOS MAP API

結合TGOS MAP API

在本範例中，我們將示範如何將統計地圖API的輸出成果結合電子地圖（TGOS MAP API）來進
行套疊呈現，以達到更豐富的地圖展示效果。

版型設定部分：

本進階範例的版型以CSS文件(sample.css)進行設定，其詳細說明可參考進階範例「由指定地理位置
查詢鄰近統計資料」。使用者可透過修改css檔案來更改範例版型中各個區塊的樣式設定。 

建立TGOS MAP API地圖：

首先在網頁初始化的程式中，我們可以先建立一個TGOS MAP API地圖，作為後續統計地圖繪
製成果套疊的介面。

tgosMap = newTGOS.TGOnlineMap(document.getElementById("mapView"),
     TGOS.TGCoordSys.EPSG3826);                //宣告TGOnlineMap地圖物件並設定坐標系統

tgosMap.setZoom(3);

設定統計地圖輸出格式：

本範例所繪製之統計地圖類型為面量圖，要將面量圖套疊至TGOS地圖介面上可採取兩種輸出格
式：純影像統計地圖或KML檔案。本範例中我們建議使用KML檔案來進行套疊，因為在TGOS
的介面中，KML檔案除了可展示統計地圖的影像外，還可以將統計數值以訊息視窗的方式進行呈
現並與使用者產生互動效果。因此在統計地圖的參數設定中，我們要將是否輸出KML的參數設
為true。

var mapOpts = {

     exportImage: true,

     pChoropleth: {

          classifyMethod: ClassifyMethod.EQUAL_INTERVAL,

          classes: 5,

          exportKML: true     //面量圖輸出KML檔案

     }

};

輸出KML檔案並套疊至TGOS MAP介面：

統計地圖繪製完成後，我們可以從API的回傳參數中取得.kmlUrl屬性，以得到輸出的KML檔案
連結，再透過TGOS MAP API提供的KML圖層套疊功能，將輸出的KML檔案直接套疊於
TGOS MAP介面進行展示。

tgKML = new TGOS.TGKmlLayer(statResult.kmlUrl, { //取出KML連結

     //加入KML圖層到地圖

     map: tgosMap,

     suppressInfoWindows: false,

     preserveViewport: true

}, function () {});