全部產品
Search
文件中心

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

更新時間:Jun 19, 2024

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

重要

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

配置

基礎平面地圖配置頁面

  • 子組件管理

    • 添加子組件

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

      2. 單擊子組件管理左側的添加表徵圖。

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

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

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

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

      說明

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

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

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

  • 高清渲染:retina屏可以在開啟該功能的情況下獲得超高解析度適配,但是效能會下降,根據機器配置情況酌情開啟該功能。

  • 全域設定:設定地圖背景色、地圖縮放層級、地圖中心經緯度、控制比例尺控制項顯隱等參數。

    參數

    說明

    地圖背景

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

    地圖縮放

    控制地圖父容器的縮放範圍及預設層級。

    • 縮放範圍:縮放範圍控制父容器只能在縮放範圍內操作,取值範圍0~20。

    • 預設層級:預設層級設定父容器預設顯示層級,需要設定在縮放範圍內,取值範圍0~20。

    說明

    地圖縮放支援分數級縮放。縮放層級控制父容器只能在縮放範圍內操作;預設層級設定父容器預設顯示層級,需要設定在縮放範圍內。

    地圖中心

    地圖中心的經緯度。

    座標系

    地圖的座標系類型,可選通用座標自訂兩個類型。

    • 通用座標:通用座標包括EPSG3857EPSG4326BD09,系統預設設定為EPSG3857座標系,如果切換成別的類型的通用座標,底圖層對應的瓦片URL需要重新設定。

    • 自訂:您可以自訂設定座標系,包括配置座標系的EPSGproj參數經度原點緯度原點解析度。自訂座標系詳情請參見自訂座標系的地圖

    比例尺控制項

    單擊比例尺控制項右側的開關表徵圖表徵圖,可在地圖上顯示比例尺控制項。開啟後,可調整比例尺控制項的字型的顏色、邊框的顏色、比例尺控制項在水平和垂直方向的位移值。

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

    樣本資料如下。

    [
         {
           "zoom": 4,
           "lng": 112,
           "lat": 34
         }
    ]
  • 彈框配置:設定地圖彈框的文本樣式、行高比例、圓角半徑等參數。

    參數

    說明

    文本樣式

    設定彈框內文本的字型、文字粗細、字型大小和顏色,請參見顏色選取器說明進行顏色修改。

    行高比例

    設定彈框格式的行高比例值,取值範圍為0.5~5。

    圓角半徑

    設定彈框的圓角半徑值,數值越大圓角弧度越大,取值範圍為0~20。

    外邊距

    設定彈框內文本與彈框四邊的距離。

    背景色

    設定彈框的背景色。

    關閉按鈕

    設定關閉彈框的按鈕顏色、按鈕的大小、按鈕與組件框的頂部距離和與組件框右側的距離值,取值範圍為0~100。

  • 互動配置:設定地圖互動功能的參數。

    參數

    說明

    開啟拖拽

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

    開啟縮放

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

    地圖互動

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

資料

基礎平面地圖資料面板v2.x

表 1. 欄位說明

欄位

說明

zoom

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

lng

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

lat

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

互動

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

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

藍圖編輯器互動配置

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

    • 事件

      事件

      說明

      當資料介面請求完成時

      資料介面請求返回並經過過濾器處理後拋出的事件,同時拋出處理後的JSON格式的資料。具體資料樣本請參見畫布編輯器中組件右側配置面板資料頁簽的資料響應結果地區。

      當資料介面請求失敗時

      資料介面請求失敗時(請求失敗的情況可能是:網路問題或介面報錯等)返回並經過過濾器處理後拋出的事件,同時拋出處理後的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

      匯入資料介面

      按組件繪製格式處理資料後,匯入組件,重新繪製。不需要重新請求服務端資料。具體資料樣本請參見畫布編輯器中組件右側配置面板資料頁簽的資料響應結果地區。

      顯示

      顯示組件,不需要參數。

      隱藏

      隱藏組件,不需要參數。

      設定視圖

      設定地圖視圖的地圖中心點和縮放層級。參考資料樣本如下。

      {
        //縮放層級,需要在設定的縮放層級範圍內。
        "zoom":4.5,
        //經度範圍:[-180,180]
        "lng":108,  
        //緯度範圍:[-180,180]
        "lat":38
      }

      設定縮放層級

      設定地圖的縮放層級。參考資料樣本如下。

      {
        //縮放層級,需要在設定的縮放層級範圍內。
        "zoom":4.5
      }

      設定縮放範圍

      設定地圖的層級縮放範圍。參考資料樣本如下。

      {
        //縮放層級範圍:[最小層級,最大層級]。
        "range":[
        3,  
        18
        ]
      }

      設定最大視圖範圍

      設定地圖最大視圖的座標範圍。參考資料樣本如下。

      {  
      //座標範圍:[[最小緯度,最小經度],[最大緯度,最大經度]]
      "bounds": [
          [
            0,
            72
          ],
          [
            53,
            138
          ]
        ]
      }

      飛行到指定位置

      設定飛行到指定位置點的經緯度和縮放層級和飛線的時間間隔。參考資料樣本如下。

      {
        //縮放層級,需要在設定的縮放層級範圍內。
        "zoom": 4.5,
        //經度範圍:[-180,180]
        "lng": 108,
        //緯度範圍:[-90,90]
        "lat": 38,
        //間隔時間,單位:秒
        "duration": 0.25
      }

      飛行到指定範圍

      設定飛行到指定範圍的座標範圍和飛行間隔時間。參考資料樣本如下。

      {
        //座標範圍:[[最小緯度,最小經度],[最大緯度,最大經度]]
        "bounds": [
          [
            0,
            72
          ],
          [
            53,
            138
          ]
        ],
        //時間間隔,單位:秒
        "duration": 0.25
      }

      更新群組件配置

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

      切換顯隱狀態

      切換組件顯示或者隱藏。參考資料樣本如下。

          {
            // 顯示為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"
            }
          }