全部產品
Search
文件中心

DataV:地圖容器(v1.x版本)

更新時間:Jun 19, 2024

地圖容器是基礎平面地圖中用於承載地圖本身和各子組件的容器,支援添加地區熱力層、點熱力層等子組件,支援配置地圖的位置、顏色、滑鼠互動事件等,能夠多角度、多形式地渲染全國各城市地理位置的即時資料。本文介紹基礎平面地圖容器各配置項的含義。

重要

當前為v1.x版本的地圖容器組件指導文檔,如需查看該組件v2.x版本的文檔內容詳情,請參見地圖容器(v2.x版本)

配置

基礎平面地圖配置面板

  • 子組件管理

    • 添加子組件

      1. 在控制台中單擊基礎平面地圖組件,進入右側的配置頁面。

      2. 單擊子組件管理左側的+號。

      3. 選擇一個或多個子組件,單擊添加子組件。添加成功後,子組件會顯示在子組件管理中。

      4. 單擊已經添加的子組件,配置子組件參數,如下圖所示。配置子組件

      5. 配置完成後,單擊返回表徵圖,返回到基礎平面地圖配置面板,配置其他子組件。

    • 複製、編輯、刪除子組件:滑鼠移至已經添加的子組件上,單擊右側的複製表徵圖表徵圖,複製子組件。單擊編輯表徵圖表徵圖,修改子組件名稱。單擊刪除表徵圖表徵圖,刪除子組件。

      說明

      更多子組件的相關操作請參見管理地圖子組件

  • 搜尋配置:單擊配置面板右上方的搜尋配置,可在搜尋配置面板中輸入您需要搜尋的配置項名稱,快速定位到該配置項,系統支援模糊比對。詳情請參見搜尋資產配置

  • 圖表尺寸:包括組件的寬度和高度,單位為px。可單擊鎖定長寬比按鍵表徵圖鎖定組件的寬高比,等比例修改組件的寬高。再次單擊進行解鎖,解鎖後寬高比不受限制。
  • 圖表位置:包括組件的橫座標縱座標,單位為px。橫座標為組件左上方距離頁面左邊界的像素距離,縱座標為組件左上方距離頁面上邊界的像素距離。
  • 旋轉角度:以組件的中心為中心點,進行旋轉,單位為度(°)。
    • 手動輸入角度值,控制組件的旋轉角度。
    • 拖動圓圈旋轉控製圖標表徵圖內的黑點,控制組件的旋轉角度。
    • 單擊左右翻轉表徵圖表徵圖,控制組件左右翻轉樣式。
    • 單擊上下翻轉表徵圖表徵圖,控制組件上下翻轉樣式。
  • 不透明度:取值範圍為0~1。為0時,圖表隱藏;為1時,圖表全部顯示。預設為1
  • 全域設定:設定地圖背景色、地圖縮放層級、地圖中心經緯度、控制比例尺控制項顯隱等參數。

    • 地圖背景:地圖的背景顏色,請參見顏色選取器說明進行修改。

    • 地圖縮放:地圖的縮放層級。

      說明

      地圖縮放支援分數級縮放。

    • 地圖中心:地圖中心的經緯度。

    • 比例尺控制項:單擊比例尺控制項右側的眼睛表徵圖,可在地圖上顯示比例尺控制項。開啟後,可調整比例尺控制項的字型顏色和邊框顏色。

    • 開啟拖拽:開啟開關,開啟地圖拖拽功能。在預覽或發佈頁面下,可單擊滑鼠拖拽地圖。

    • 開啟縮放:開啟開關,開啟地圖縮放功能。在預覽或發佈頁面下,可滾動滑鼠滾輪,對地圖進行縮放。

    • 地圖互動:開啟開關,開啟地圖互動功能。在預覽或發佈頁面下,可單擊聚焦到某個地區,並查看該地區的資料配置資訊。

    您也可以通過配置資料來源來更改地圖中心點和縮放等級。配置基礎平面地圖資料來源

    樣本資料如下。

    [
         {
           "zoom": 4,
           "lng": 112,
           "lat": 34
         }
       ]

資料

基礎平面地圖資料面板

上圖中的樣本JSON代碼如下。

[
     {
       "zoom": 4,
       "lng": 112,
       "lat": 34
     }
   ]
表 1. 欄位說明

欄位

說明

zoom

(可選)地圖的縮放等級,對應配置面板中的地圖縮放。如果兩者都進行了配置,DataV優先使用資料中的配置。

lng

(可選)地圖中心位置的經度,對應配置面板中的地圖中心 > 經度。如果兩者都進行了配置,DataV優先使用資料中的配置。

lat

(可選)地圖中心位置的緯度,對應配置面板中的地圖中心 > 緯度。如果兩者都進行了配置,DataV優先使用資料中的配置。

互動

選中啟用,開啟組件互動功能。當地圖移動時地圖移動結束時,會拋出您自訂的變數值。具體配置請參見組件回調ID配置

它的部分子組件支援互動配置,即回調ID,例如:地區熱力層、線熱力層、散點層。通過回調ID,可以實現地圖的互動功能,具體請參見 配置組件互動組件回調ID配置

藍圖編輯器互動配置

  1. 在畫布編輯器頁面,按右鍵組件,選擇匯出到藍圖編輯器
  2. 單擊頁面左上方的藍圖表徵圖表徵圖。
  3. 在藍圖編輯器配置頁面,單擊匯入節點欄內的基礎平面地圖組件,在畫布中可以看到如下圖所示的基礎平面地圖的藍圖編輯器配置參數。基礎平面地圖藍圖編輯器參數

    • 事件

      事件

      說明

      當資料介面請求完成時

      資料介面請求返回並經過過濾器處理後拋出的事件,同時拋出處理後的JSON格式的資料。具體資料請參見上文的資料樣本

      地圖移動時

      地圖中心點發生移動時拋出的事件,參數說明如下。

      {
        // 緯度
        lat: 38.5714
        // 經度
        lng: 106.5306
        // 縮放等級
        zoom: 4.3
        // 觸發移動的類型
        type: "move_mouse"
      }

      地圖移動結束

      地圖中心點移動結束時拋出的事件,參數說明如下。

      {
        // 緯度
        lat: 38.5714
        // 經度
        lng: 106.5306
        // 縮放等級
        zoom: 4.3
        // 觸發移動的類型
        type: "moveend_mouse"
      }
    • 動作

      動作

      說明

      請求資料介面

      重新請求服務端資料,上遊資料處理節點或圖層節點拋出的資料將作為參數。例如基礎平面地圖配置了API資料來源為http://api.test,傳到請求資料介面動作的資料為{ id: '1'},則最終請求介面為http://api.test?id=1

      匯入資料介面

      按組件繪製格式處理資料後,匯入組件,重新繪製。不需要重新請求服務端資料。具體資料請參見上文的資料樣本

      更新群組件配置

      動態更新組件的樣式配置。需要先在組件的配置面板中,單擊複製配置到剪貼簿,擷取組件配置資料。再根據需要在藍圖編輯器配置頁面的資料處理節點中更改對應樣式的欄位值。

      顯示

      顯示組件,不需要參數。

      隱藏

      隱藏組件,不需要參數。

      切換顯隱狀態

      切換組件顯示或者隱藏,參數說明如下。

          {
            // 顯示為true,隱藏為false。
            "status": true,
            // 顯示動畫。
            "animationIn": {
              // 動畫方式,可選fade,不填無動畫。
              "animationType": "fade",
              // 顯示延時,單位為ms。
              "animationDuration": 1000,
              // 顯示動畫函數,可選linear|easeInOutQuad|easeInOutExpo。
              "animationEasing": "linear"
            },
            // 隱藏動畫。
            "animationOut": {
              // 動畫方式,可選fade,不填無動畫。
              "animationType": "fade",
              // 隱藏延時,單位為ms。
              "animationDuration": 1000,
              // 隱藏動畫函數,可選linear|easeInOutQuad|easeInOutExpo。
              "animationEasing": "linear"
            }
          }

      移動

      將組件移動到指定位置,參數說明如下。

          {
            // 移動方式。絕對位置:to,相對定位:by。預設值:to。
              "positionType": "to",
            // 指定位置。x座標,y座標。
            "attr": {
              "x": 0,
              "y": 0
            },
            // 動畫方式。
            "animation": {
              "enable": false,
              // 動畫延時。
              "animationDuration": 1000,
              // 動畫曲線。可選值為:linear|easeInOutQuad|easeInOutExpo。
              "animationEasing": "linear"
            }
          }