複合式統計地圖

複合式統計地圖

本範例將示範如何使用複合式的地圖呈現方式，同時呈現兩種統計地圖於同一圖面上。讓使用者
可以在單一圖面上同時檢閱兩種不同的統計資料，從而發掘統計資料間的相關性或差異。

版型設定部分：

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

統計資料設定：

由於本範例的重點在於同時於單一圖面上呈現兩種統計資料，因此在資料的揀選上必須選擇兩個
具有同樣空間統計單元的統計資料，以確保兩項統計資料的空間關聯性。以本範例來說，即選擇
了同樣是縣市層級的兩項統計產品，「行政區法定傳染病患統計」及「行政區政府醫療保健支出
統計」，藉由同樣空間統計單元並且在資料特性上可能會有相關性的資料項目，以統計地圖的呈
現方式來嘗試找到資料間的關聯性。

統計地圖繪製：

目前統計地圖API已支援同時繪製兩種統計地圖並輸出為單一影像的功能，可透過API之appendLayer()
函式來達成開發目標。首先將設定第一項統計資料並以drawMap()函式繪製面量圖。

function init() {}                                     //建立第一層之統計資料集物件

function drawStatMap() {                    //統計地圖繪製(第一層)

                   var mColor = {};                            //第一層統計地圖顏色設定

                   var pChoropleth = {};                   //第一層面量圖參數設定

                   var option1 = {};                           //第一層地圖參數設定

                   var containerObj = document.getElementById("MapView");                //指定互動式介面的DIV ID

                   statMap = new StatMap(containerObj, dataDB, MapKind.CHOROPLETH, option1);

                   statMap.drawMap(function(){});                 //繪製第一層統計地圖

           }

繪製第二層統計地圖：

完成第一層統計地圖（面量圖）後，接下來就可以將第二項統計資料再進行一次繪製動作，本範
例是以分級符號圖的類型來進行第二層統計地圖的設定。以appendLayer()來進行繪製疊加圖層，
設定方式與drawMap()相同，即可完成複合式的統計地圖開發工作。

                function appendLayer() {            //疊加第二層統計地圖

                        setStatData(MapKind.SYMBOL);

                        dataDB_Symbol = dataDB;                  //建立第二組統計資料集

                   var pSymbol= {};                 //第二層分級符號圖參數設定

                   var option2 = {};                           //第二層地圖參數設定

                   statLayer = new StatLayer(dataDB_Symbol, MapKind.SYMBOL, option2);         //新增疊加地圖物件

                   statMap.appendLayer(statLayer, function(result) { }

                   });                                     //繪製疊加統計地圖圖層