面量圖文字標記

匯出面量圖文字標記

本項目說明如何將匯出的面量圖純影像增加「文字標記」之做法，此文字標記設定僅適用於面量圖匯出，
可設定之參數說明如下：

1.文字標記內容

預設為全部匯出等距法( ALL )，可設定之類型有: 行政區/統計區 (NAME)、統計值 (VALUE)、名稱+統計值 (ALL)

以及統計區全名(FULLNAME)。

2.文字字體設定

預設為正常(NORMAL )，可設定之類型有: 正常 (NORMAL)、粗體 (BOLD)。

3.文字大小設定

文字大小單位為pt，預設值為14。

4.標記文字配色

文字配色，格式為16進位RGB (#RRGGBB)，預設為深灰色 (#333333)。

5.文字暈圈設定

設定是否加入文字暈圈，預設值為不使用 (false)。

6.文字暈圈配色

文字暈圈配色，格式為16進位RGB (#RRGGBB)，預設為白色 (#FFFFFF)。

7.文字標記重疊設定

是否允許文字標記互相重疊，若設為false則程式將自動計算文字標記位置，並且隱藏部份標記文字，預設值為true。

其程式碼寫法依序為：

1.      開啟地圖匯出設定

     var option = {

             pChoropleth: pChoropleth,

             exportImage: true,                                        //開啟純影像輸出設定

             size: {height: 550, width: 1100},          //指定地圖影像的影像寬高尺寸

             useBasemap: false

     };

2.      設定文字標記參數

     pChoropleth = {          

             label: {                                                     //設定面量圖標記文字標記

                     contentType:"ALL",                       //文字內容設定

                     weight:"BOLD",                              //設定字體

                     size:10,                                            //設定標記文字大小, 單位為pt

                     color:"#020756",                          //設定標記文字顏色

                     outline:true,                                   //設定是否加上文字暈圈

                     outlineColor:"#FFFFFF",                       //設定文字暈圈顏色

                     overlay: false                                 //設定文字標記間是否允許相互重疊

     };

3.      繪製統計地圖，且其Function callback (result)包含繪製結果，並建立一div放置影像

     map.drawMap(function (result){

                var mapImage = document.getElementById("MapImage ");

4.      建立一image物件，並使用result.imageUrl輸出影像位址

               var img = document.createElement("img"); //在網頁建立一個image物件

               img.setAttribute("style", "border:solid 1px;");

               img.src = result.imageUrl[0];                          //使用屬性result.imageUrl[0]取得影像連結

               mapImage.appendChild(img);                               //將影像連結加入image物件進行顯示

           });