範例二:Open Layers Map控制項

利用OpenLayersMap搭配資料表的經緯度欄位，呈現出街道圖，搭配Olmap本身的設定功能達到，不同數值大小，畫出的圓圈大小相對不同，及其資料多層的呈現。


新增一頁儀表板頁面

  1. 在 [工具列] 中按一下新增儀表板頁面功能，並且將頁面名稱命名為Olmap_圓圈，按一下確定。

  2. 在新增View的視窗中，主要挑選裝置類型為PC後，即可點選確定。

  3. 接著選擇資料來源，並挑選Excel資料來源做為資料來源。


取得Excel資料

選擇Excel做為資料來源後，即會跳出可供選取的Exce檔案清單。若在清單中找不到需要的檔案時，可點選左上角的上傳按鈕，將目前頁面所需使用到的檔案上載至主機上供選取。

  1. 於檔案清單中選擇Population.xlsx的檔案。

  2. 確認右上角的自動抓取資料關連為勾選後，即可點選確定按鈕。

  3. 進入至版面頁籤後，即可開始進行設計。


    4. 版面設計

    1. 點選左上角切換至"控制項"頁籤中的視覺化控制項，拖拉OpenLayersMap至畫面上，並點選編輯控制項按鈕，以設定資料表。其設定對應如下

      2. 設定項目

      設定值

      地圖來源

      BingMap

      資料來源

      Excel1

      表格名稱

      Continent

      標點經度

      Lon

      標點緯度

      Lat

      標點方式

      圓圈

      數值欄位

      Population

      標籤內容

      $Excel1.Continent.Continent$+":
      "+dev.mask.format(Math.round
      ($Excel1.Continent.Population$/1000000),"#,##0")+"M"

      圓圈每單位數值

      40000000

      圓圈最大值

      120

      圓圈最小值

      15

    2. 切換至資料頁籤中，將使用進階地圖的選項勾選，接著點選新增圖層開始設定第二層圖層的資料對應。

      3. 設定項目

      設定值

      資料表

      Country

      圖層起始層數

      4

      標點經度

      Lon

      標點緯度

      Lat

      標點方式

      圓圈

      數值欄位

      Population

      標籤內容

      $Excel1.Country.Continent$+":"+
      dev.mask.format(Math.round
      ($Excel1.Country.Population$/10000)/100,"#,##0.##")+"M"

      圓圈每單位數值

      10000000

      圓圈最大值

      300

      圓圈最小值

      15

    3. 再點選新增圖層再繼續設定第三層圖層的資料對應。

      4. 設定項目

      設定值

      資料表

      City

      圖層起始層數

      6

      標點經度

      Lon

      標點緯度

      Lat

      標點方式

      圓圈

      數值欄位

      Population

      標籤內容

      $Excel1.City.City$+":"+
      dev.mask.format(Math.round
      ($Excel1.City.Population$/10000)/100,"#,##0.##")+"M"

      圓圈每單位數值

      300000

      圓圈最大值

      200

    4. 完成後即可點選存檔做測試。

     

    Copyright © 2014 Smart eVision Information Technology Inc. All rights reserved