使用OpenLayers為圖台底層

使用OpenLayers為圖台底層

在本範例中，我們將示範如何將統計地圖API的輸出成果結合OpenLayers為圖台底層
來進行套疊呈現，令已有自有圖台之開發者亦可了解如何介接統計地圖API。

版型設定部分：

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

建立OpenLayers地圖：

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

openMap = new ol.Map({

                           target: 'mapView',

                           layers: [

                             new ol.layer.Tile({

                                   source: new ol.source.OSM()

                             })

                           ],

                           view: new ol.View({

                             center: ol.proj.fromLonLat([121.5, 25]),

                             zoom: 7

                           })

                   });                //宣告OpenLayers地圖物件並設定坐標系統

設定統計地圖輸出格式：

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

var mapOpts = {

     exportImage: true,

     pChoropleth: {

          classifyMethod: ClassifyMethod.EQUAL_INTERVAL,

          classes: 5,

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

     }

};

輸出KML檔案並套疊至OpenLayers圖台介面：

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

statKML = new ol.layer.Vector(

                   {

                           source: new ol.source.Vector({

                             url: statResult.kmlUrl,

                             format: new ol.format.KML()

                           })

                   });

                   openMap.addLayer(statKML)