統計地圖-面量圖

繪製統計地圖-面量圖

 

統計地圖API可將匯入之各種統計資料繪製成「統計地圖」與「統計圖表」兩種繪製類型,本項目將針對統計地圖之
「面量圖」呈現方式做詳細之參數設定介紹,可設定之參數有:

1.分級方式

預設為等距法( EQUALINTERVAL),其餘方式有:

去除前後5%資料等距法 ( EQUALINTERVAL5)、等量法 (QUANTILE)、自訂間距 (USER_DEFINED)

2.分級數設定

使用系統提供分級法之分級數設定。可填入整數2~10,未填入之預設值為5

3.自訂統計分級區間設定

自訂統計分級區間設定,由小至大依序於陣列內輸入分級區間值(包括最小及最大值)

例:輸入[100, 300, 700, 900]表示分為三級,第一級為100~未滿300;第二級為300~未滿700

第三級為700~未滿900,
        若數值小於100或大於900,則併入最近之區間一併呈現。

4.統計值篩選設定(非必填)

統計值篩選設定,預設為不篩選,其設定種類有:

不篩選 (DEFAULT) 、統計值由大至小排序後取前十筆統計資料 (TOP_TEN) ,以及所有統計值由大至小排序後

取最後十筆統計資料 (LAST_TEN)

5.時序性面量圖設定

   繪製時序性面量圖時使用,填入欲作為分級標準之統計時間點,若未填則以資料集中最後一個時間點作為分級標準

    (可判別的時間格式)

6.KML附含Z值設定

設定輸出之KML檔案是否附帶Z值,以在三維圖台呈現立體效果,預設為false

7.文字標記設定

影像檔匯出之標記文字設定,由物件LabelSettings取得,若未設定則不進行文字標記詳細設定可參照面量圖標記設定

8.統計圖配色設定

統計圖配色,由物件ColorSettings取得,若未設定則以紅色漸層進行配色
可設定最大值、最小值以及預設值,格式為16進位RGB(#RRGGBB)

亦可自行設定不同的顏色,作為各分級的配色。若有未設定顏色的分級,則以系統預設顏色進行配色。

9.選擇使用整數進行統計計算與展示(非必填)

預設為false,使用資料庫對統計欄位是否為整數的定義進行設定

 

程式碼如下:

 

           function DrawStatMap(data) {                                    //統計地圖繪製

                        var mColor = {                                                      //設定統計圖配色

                                maxColor: document.getElementById("maxColor").value,     //設定最大值顏色

                                minColor: document.getElementById("minColor").value,      //設定最小值顏色

                                defaultColor: "#EEEEEE"                                               //設定統計值為NULL時之預設顏色

                        };

                               

                        var pChoropleth = {                                             //面量圖參數設定

                                classifyMethod: classType,                          //設定分級方法

                                classes: document.getElementById("classNum").value,  //設定分級數

                                color: mColor,                                               //設定配色

                                   //color: [‘#771E81’],         //自訂分級區間配色矩陣 

                                KMLwithZ: false,                                           //KML檔附含Z值設定

                                useInt: true                                                    //使用整數進行統計設定

                        };           

                        var option = {                                                                //統計地圖參數設定

                                pChoropleth: pChoropleth,

exportKML: true,                                  //匯出KML檔設定

                                baseLevel: BaseLevel.COUNTY

                        };

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

                        var Map = new StatMap(containerObj, data, MapKind.CHOROPLETH, option);

//繪製統計地圖

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

                }

回到上方