由指定地理位置查詢鄰近統計資料

由指定地理位置查詢鄰近統計資料

在本範例中，我們將示範如何藉由使用建立自動化資料設定選單的方式，讓使用者能夠透過指定
地理位置（如特定之行政區或統計區），來選擇可繪製的統計資料並進行統計地圖繪製作業。同
時我們在本範例也提供另一種樣式之版型設計，供開發人員選擇使用。
 

版型設定部分：

所有進階範例的版型皆以CSS文件進行設定，您可以參考範例附帶的「sample2.css」檔案，並
透過修改此檔案來更改範例版型中各個區塊的樣式設定。以本範例的最上方標題區塊為例，您可
以修改「.banner」區段來改變標題區塊的樣式，包含背景圖片、標題字體、字體大小、顏色、
區塊大小等等。另一方面，本範例提供的版型設定支援響應式網頁設計技術（RWD），可在不同
尺寸的瀏覽器大小中自動進行版面配置調整，確保瀏覽者能夠在不同裝置下得到一致的操作體驗，
所有RWD設計同樣都已經在「sample2.css」中設定完成，因此開發者若需要調整RWD效果
則必須進入css中進行調整。
 

.banner {

    background-image: url(banner_web.png), url(bannner_02.png);

    font-family: Microsoft JhengHei;

    font-size: 46px;

    font-weight: bold;

    color: #7B485A;

    height: 100px;

    background-repeat: no-repeat, repeat;

}

建立資料設定選單：

首先在網頁初始化的階段，我們便需要將自動化資料設定選單建立在左側的動態選單介面中。
可透過將左側選單的DIV ID --- 「div_menu」指定至自動化資料設定選單物件「DataAuto」
的設定參數內，完成選單建立的流程。

function init() {
      //將自動選單物件建立在網頁指定的div內, 選單類型為'地理位置設定優先(InitType.AREA)'

      dataAutoMenu = new DataAuto(InitType.AREA, document.getElementById("div_menu"));

      map = newStatMap(document.getElementById("mapView"));          //取得統計地圖繪製容器

}

取出統計資料設定資料集：

當使用者透過選單設定完成需要繪製的統計資料後，即可透過DataAuto物件所提供之getDataDB()
方法取得統計資料設定集，取出之統計資料設定集符合DataDB物件之標準形式，因此可直接進行
後續統計地圖繪製的動作。

var dataDB = dataAutoMenu.getDataDB();          //由自動選單物件中取出dataDB物件, 得到統計資料設定

繪製互動式介面統計地圖：

取出統計資料設定集後，我們就可以接續進行統計地圖繪製作業，本範例所提供的案例是直接在網頁
中嵌入互動式統計地圖介面，並繪製統計地圖面量圖，因此只要依序設定面量圖的相關繪製參數，再
執行統計地圖繪製方法即可。

function draw() {

            //由自動選單物件中取出dataDB物件, 得到統計資料設定

            var dataDB = dataAutoMenu.getDataDB();                     

            var option = {

                pChoropleth: {                  //設定面量圖相關參數

                    classifyMethod: ClassifyMethod.QUANTILE,   //分級法

                    classes: 5,                      //分級數

                    useInt: true,                   //是否使用整數進行分級計算

                                   color: {            //面量圖配色

                                           minColor: "#B3FF00",

                                           maxColor: "#0F7A1D",

                                           defaultColor: "#D0D0D0"

                                   }

                },

                exportImage: true,           //是否輸出純影像圖檔

                size: {                                  //純影像圖檔尺寸設定

                    height: 500,

                    width: 500

                }

            };

            map.setStatData(dataDB);   //設定統計資料

            map.setMapKind(MapKind.CHOROPLETH);    //設定繪製類型為面量圖

            map.setMapOptions(option);                    //設定統計地圖繪製參數

            map.drawMap(function (result) {              //進行統計地圖繪製

                           if (result.status == ServiceStatus.OK) {

                    putInfomation(result);

                }

            });

        }