全部產品
Search
文件中心

DataV:線熱力層(v1.x版本)

更新時間:Jun 19, 2024

線熱力層是基礎平面地圖的子組件,支援獨立的樣式、資料和互動配置,能夠以熱力線的形式表現地理位置上的線路資訊,適用於地圖上線路圖的大屏展示,例如展示地鐵線路圖。本文介紹線熱力層各配置項的含義。

單擊子組件管理下方的線熱力層,進入配置面板配置線熱力層的樣式和資料。
說明 如果子組件管理中沒有線熱力層,說明您還未添加線熱力層子組件,請參見地圖容器(v1.x版本)進行添加。

配置

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

    • 顏色:資料value值最大、最小、為空白時對應的線的顏色,請參見顏色選取器說明進行修改。處於最大值和最小值之間的線,根據value值對應成最大值到最小值之間的漸層顏色。
      圖 1. 線熱力層顏色配置項配置
      圖 2. 線熱力層資料來源線熱力層資料來源
      重要 如果資料中設定了color欄位,則線的顏色以color欄位為準。
    • 粗細:熱力線的粗細。
    • 虛線:熱力線的類型。
  • 互動配置
    • 懸停:單擊眼睛表徵圖表徵圖,可控制懸停互動功能的開啟或關閉。開啟後可設定懸停顏色和懸停時線的粗細,僅在預覽或發布時才能看到效果。
    • 彈窗:開啟開關,單擊熱力線,顯示線的詳細資料,該資訊可在資料的properties屬性中進行配置,僅在預覽或發布時才能看到效果。
    • 點擊聚焦:開啟開關,單擊熱力線,會根據線的位置進行聚焦,僅在預覽或發布時才能看到效果。
    • 聚焦範圍比:熱力線的聚焦範圍比,僅當開啟了點擊聚焦配置項,且在預覽或發佈頁面時才能看到效果。
    • 回調ID:設定組件之間資料聯動的變數,需要配置為資料中的某一個欄位。
      重要 此功能已更新到互動面板中,配置面板的該功能將棄用,請儘快升級。新版本的互動功能支援配置多個欄位。

資料

該組件需要配置兩個資料來源,地理邊界geojson資料介面熱力值資料介面線熱力層地理邊界資料介面
  • 地理邊界geojson資料介面:geojson 類型的資料,要求類型為 LineString。如果需要跟熱力值射資料對應,必須保證有唯一的 link_id 或者 id 欄位。關於geojson的標準可以參見geojson.org
    本文僅提供一個簡單的程式碼範例,如下所示。
    {
      "type": "FeatureCollection",
      "features": [
        {
          "type": "Feature",
          "geometry": {
            "type": "LineString",
            "coordinates": [
              [
                109.4677734375,
                41.409775832009565
              ],
              [
                117.46582031249999,
                36.31512514748051
              ],
              [
                118.828125,
                32.0639555946604
              ],
              [
                114.9169921875,
                27.566721430409707
              ]
            ]
          }
        }
      ]
    }
    說明 properties欄位對應配置面板中的彈窗資訊,您可以自訂該欄位值進行配置。
  • 熱力值資料介面線熱力層熱力值資料

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

    [
      {
        "link_id": 1,
        "value": 1,
        "color": "#ED3229"
      },
      {
        "link_id": 2,
        "value": 1,
        "color": "#36B854"
      },
      {
        "link_id": 3,
        "value": 1,
        "color": "#FFD823"
      },
      {
        "link_id": 4,
        "value": 1,
        "color": "#320176"
      },
      {
        "link_id": 5,
        "value": 1,
        "color": "#320176"
      },
      {
        "link_id": 6,
        "value": 1,
        "color": "#823094"
      },
      {
        "link_id": 7,
        "value": 1,
        "color": "#CF047A"
      },
      {
        "link_id": 8,
        "value": 1,
        "color": "#F3560F"
      }
    ]
    表 1. 欄位說明
    欄位說明
    link_id線關聯ID,通過該欄位,與向量線資料進行對應。
    value線的權重值,是配置面板中設定最大值、最小值、空值顏色的依據。
    info(可選)彈窗內容,如果為空白,則彈窗資訊顯示為對應的向量線資料中的properties欄位的內容。如果不為空白,彈窗資訊顯示為info欄位的內容。
    color(可選)線熱力層支援資料優先的渲染,如果您配置了color(線顏色)、weight(線寬)、dashArray(虛線)等欄位,那麼會優先使用這些屬性來對關聯的線進行渲染,如下圖所示。線熱力層映射資料配置

互動

選中啟用,開啟組件互動功能。線熱力層子組件擁有互動配置,可單擊某個熱力線拋出回調值,預設拋出資料中的link_id欄位。具體配置請參見組件回調ID配置互動

藍圖編輯器互動配置

  1. 在畫布編輯器頁面,單擊基礎平面地圖子組件管理列表中線熱力層右側的匯出到藍圖編輯器表徵圖。
  2. 單擊頁面左上方的藍圖表徵圖表徵圖。
  3. 在藍圖編輯器配置頁面,單擊匯入節點欄內的線熱力層組件,在畫布中可以看到如下圖所示的線熱力層的藍圖編輯器配置參數。線熱力層藍圖編輯器參數
    • 事件
      事件說明
      當地理邊界geojson資料介面請求完成時地理邊界geojson資料介面請求返回並經過過濾器處理後拋出的事件,同時拋出處理後的JSON格式的資料。具體資料請參見上文的資料樣本
      當熱力值資料介面請求完成時熱力值資料介面請求返回並經過過濾器處理後拋出的事件,同時拋出處理後的JSON格式的資料。具體資料請參見上文的資料樣本
      當點擊線時當單擊某條線時觸發事件。
    • 動作
      動作說明
      請求地理邊界geojson資料介面重新請求服務端資料,上遊資料處理節點或圖層節點拋出的資料將作為參數。例如線熱力層配置了API資料來源為http://api.test,傳到請求地理邊界geojson資料介面動作的資料為{ id: '1'},則最終請求介面為http://api.test?id=1
      請求熱力值資料介面重新請求服務端資料,上遊資料處理節點或圖層節點拋出的資料將作為參數。例如線熱力層配置了API資料來源為http://api.test,傳到請求熱力值資料介面動作的資料為{ id: '1'},則最終請求介面為http://api.test?id=1
      匯入地理邊界geojson資料介面按組件繪製格式處理資料後,匯入組件,重新繪製。不需要重新請求服務端資料。具體資料請參見上文的資料樣本
      匯入熱力值資料介面按組件繪製格式處理資料後,匯入組件,重新繪製。不需要重新請求服務端資料。具體資料請參見上文的資料樣本
      顯示顯示組件,不需要參數。
      隱藏隱藏組件,不需要參數。