行政區下探結合互動式圖例與資料清單

行政區下探結合互動式圖例與資料清單

在本範例中，我們將結合行政區下探與互動式圖例、清單，同時展示兩項互動式功能合併呈現之效果。

版型設定部分：

所有進階範例的版型皆以CSS文件(sample.css)進行設定，其詳細說明可參考進階範例「自應用
資料庫繪製地圖
及圖表」中的「使用資料服務平台統計資料」。使用者可透過修改此檔案來更改範例版型中各個區塊的樣式設定。

 統計資料設定：

由於本範例在資料的揀選上必須選擇同時具有不同空間統計單元的統計資料，以確保兩項統計資料的空間關聯性。
以本範例來說，即選擇了同時具有縣市層級與鄉鎮市區層級的統計產品「行政區人口統計_全國」。

 統計地圖繪製：

本範例以圓餅圖方式呈現的全國各縣市之縣市層級統計結果，同時也納入互動式統計圖例說明與互動式詳細清單
列表，當使用者利用滑鼠經過圖標、圖例以及清單時，相對應的資料會產生視覺變化以凸顯其地圖與資料清單間
的關聯性，具有良好的視覺辨識效果；下探功能再透過滑鼠點擊單一縣市之後，向下探取該縣市的鄉鎮市區層級
的統計結果，地圖也將同時縮放置適合該鄉鎮市區觀看的比例尺，完成空間層級下探的操作，無論哪個階層都可
與互動式圖例與清單搭配。

            function drawStatMap(data) {                 //統計圖繪製

                   var   option = {

                       pPie: pPie,

                       drillDown: true,

                     pSymbol: pSymbol

             };

                    var containerObj = document.getElementById("mapView");

                   var containerObjLegend = document.getElementById("mapViewLegend");       //指定承接互動式清單的DIV ID

                   var containerObjData = document.getElementById("mapViewData");       //指定承接互動式圖例的DIV ID

                   var map = new StatMap(containerObj, data, MapKind.PIE, option);

                   map.setContainerLegend(containerObjLegend);

                   map.setContainerData(containerObjData); 

                   map.drawMap(function (result) { });