統計地圖-分級符號圖

繪製統計地圖-分級符號圖

本項目將針對統計地圖之「分級符號圖」呈現方式做詳細之參數設定介紹，可設定之參數說明如下：

1. classifyMethod 分級方式

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

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

2. classes 分級數設定

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

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

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

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

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

4.SymbolStyle 符號樣式設定

預設為圓形，也可選擇系統內建的符號樣式，如：圓形(circle)、星形(star)、
方形(square)、三角形(triangle)

5.fillColor 與outlineColor 符號填色與框線色彩設定

格式為16進位RGB(#RRGGBB)，填色預設為深紅色(#4A1010)，框線為黑色（#000000）

6.outlineWidth 符號框線線寬設定

單位為pixel，預設值為1

7.styleUrl 使用自定義符號

以URL連結方式填入，支援格式為png

8.maxSize與minSize 分級符號最大最小尺寸設定

   單位為pixel，若未設定則系統將自動進行尺寸設定

9. useInt 選擇使用整數進行計算

   使用整數進行統計計算及展示(非必填)，預設使用資料庫對統計欄位是否為整數的定義進行設定

程式碼如下：

        var pSymbol = {                                              //建立分級符號圖參數設定集合

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

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

                symbolStyle: symbolType,                                          //設定符號樣式

                fillColor: document.getElementById("fColor").value,              //設定符號填色

                outlineColor: document.getElementById("lColor").value,      //設定邊線顏色

                outlineWidth: document.getElementById("lWidth").value,
               //設定邊線線寬

                maxSize: document.getElementById("maxSize").value,
                //設定最大符號尺寸

                minSize:document.getElementById("minSize").value,
                //設定最小符號尺寸

                useInt: true

        };           

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

                pSymbol: pSymbol

     };

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

        var Map = new StatMap(containerObj, data, MapKind.SYMBOL, option);         //繪製統計地圖

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

        }