線熱力層是基礎平面地圖的子組件,支持獨立的樣式、數據和交互配置,能夠以熱力線的形式表現地理位置上的線路信息,適用于地圖上線路圖的大屏展示,例如展示地鐵線路圖。本文介紹線熱力層各配置項的含義。
重要 當前為v2.x版本的線熱力層子組件指導文檔,如需查看該子組件v1.x版本的文檔內容詳情,請參見線熱力層(v1.x版本)。
配置
- 搜索配置:單擊配置面板右上角的搜索配置,可在搜索配置面板中輸入您需要搜索的配置項名稱,快速定位到該配置項,系統支持模糊匹配。詳情請參見搜索資產配置。
- 可見級別:設置線熱力層的可見級別值,在設定的級別范圍內線熱力層可見,級別之外不可見。
- 線樣式:設置線條配置類型、線顏色、線粗細和線類型等參數。
參數 說明 配置類型 配置類型包括默認配置和數據映射。 線顏色 - 當選擇配置類型為默認配置時,熱力線顏色默認設置為一種顏色。
- 當選擇配置類型為數據映射時,數據value值最大、最小、為空時對應的熱力線的顏色,請參見顏色選擇器說明進行修改。處于最大值和最小值之間的線,根據value值映射成最大值到最小值之間的漸變顏色。
重要 如果數據中設置了color字段,則線的顏色以color字段為準。線粗細 熱力線的粗細。 線類型 熱力線的類型。 - 系列配置:單擊右側的或圖標,增加或刪除一個系列。 單擊或圖標配置多個數據系列的排列樣式。
參數 說明 類型過濾值 與數據源中的type字段對應,配置您所設置的type值對應散點熱力線的樣式。 配置類型/線顏色/線粗細 設置每一個系列的配置類型、線顏色和線粗細,具體請參見配置下的線樣式。 - 彈框:在預覽或發布頁面,單擊熱力線,顯示線的詳細信息彈框樣式。單擊彈框左側的圖標,可控制彈框的顯隱。 說明 開啟彈窗功能需要先設置info字段。
- info字段:打開開關,開啟info字段,設置info字段作為彈窗內容,該字段支持配置html標簽;如果關閉info字段開關,則兼容name和value字段內容作為彈窗內容。
- 事件類型:選擇通過點擊或鼠標移入事件作為彈框顯示的類型。
- 配置選項:彈框樣式的配置項內容,可選擇父容器默認或自定義配置。
- 父容器默認:系統自帶的默認樣式。
- 自定義配置:自定義配置彈框的文本樣式、行高比例和圓角半徑等參數。
參數 說明 文本樣式 設置彈框內文本的字體、文字粗細、字號、顏色和陰影色,請參見顏色選擇器說明進行顏色修改。 行高比例 設置彈框格式的行高比例值。 圓角半徑 設置彈框的圓角半徑值,數值越大圓角越圓。 外邊距 設置彈框內文本與彈框四邊的距離。 背景色 設置彈框的背景色。 關閉按鈕 設置關閉彈框按鈕的顏色、大小、按鈕離頂部的距離和離右側的距離。
- 交互配置
參數 說明 懸停樣式 單擊懸停樣式左側圖標,可控制懸停交互功能的開啟或關閉。開啟后可設置鼠標懸停時的熱力線的顏色、粗細和類型,僅在預覽或發布時才能看到效果。 點擊聚焦 單擊左側圖標,可控制點擊聚焦交互功能的開啟或關閉。開啟后,單擊熱力線,會根據熱力線的位置進行一定范圍比例的聚焦,僅在預覽或發布時才能看到效果。
數據
該組件需要配置兩個數據源,地理邊界geojson數據接口和熱力值數據接口。
- 地理邊界geojson數據接口:geojson類型的數據,要求類型為 LineString。如果需要跟映射數據對應,必須保證有唯一的 link_id 或者 id 字段。關于geojson的標準可以參見 geojson.org。 說明 properties字段對應配置面板中的彈窗信息,您可以自定義該字段值進行配置。
- 熱力值數據接口
上圖中的示例JSON代碼如下。
[ { "link_id": 1, "value": 1, "info": "名稱:1</br>數值:1" }, { "link_id": 2, "type": "type1", "value": 20 }, { "link_id": 3, "type": "type1", "value": 3 }, { "link_id": 4, "type": "type1", "value": 4 }, { "link_id": 5, "type": "type2", "value": 5 }, { "link_id": 6, "type": "type2", "value": 5 }, { "link_id": 7, "value": 7 }, { "link_id": 8, "value": 8 } ]
表 1. 字段說明 字段 說明 link_id 線關聯ID,通過該字段,與矢量線數據進行對應。 type 線類型,與配置面板中系列類型過濾值對應。 value 線的權重值,是配置面板中設置最大值、最小值、空值顏色的依據。 info (可選)彈窗內容,如果為空,則彈窗信息顯示為對應的矢量線數據中的properties字段的內容。如果不為空,彈窗信息顯示為info字段的內容。 color (可選)線熱力層支持數據優先的渲染,如果您配置了color(線顏色)、weight(線寬)、dashArray(虛線)等字段,那么會優先使用這些屬性來對關聯的線進行渲染。
配置項 | 說明 |
---|---|
受控模式 | 打開開關,資產初始化狀態下不請求數據,僅通過回調ID或藍圖編輯器配置的方法發起請求數據;關閉開關,可以使用自動更新請求數據。開關默認為關閉狀態。 |
自動更新請求 | 選中后可以設置動態輪詢,還可以手動輸入輪詢的時間頻次。取消選中后則不會自動更新,需要手動刷新頁面,或通過藍圖編輯器和回調ID事件來觸發請求更新數據。 |
數據源 | 單擊配置數據源,可在設置數據源面板中修改數據源類型和數據查詢代碼、預覽數據源返回結果以及查看數據響應結果,詳情請參見配置資產數據。 |
數據過濾器 | 數據過濾器提供數據結構轉換、篩選和一些簡單的計算功能。單擊添加過濾器,可在設置數據源面板配置數據過濾器腳本,詳情請參見過濾器使用說明。 |
數據響應結果 | 展示數據請求的響應結果。當數據源發生改變時,可單擊右側的圖標,實時查看數據響應結果。 |
交互
藍圖編輯器交互配置
- 在畫布編輯器頁面,單擊基礎平面地圖子組件管理列表中線熱力層右側的圖標。
- 單擊頁面左上角的圖標。
- 在藍圖編輯器配置頁面,單擊導入節點欄內的線熱力層組件,在畫布中可以看到如下圖所示的線熱力層的藍圖編輯器配置參數。
- 事件
事件 說明 當地理邊界geojson數據接口請求完成時 地理邊界geojson數據接口請求返回并經過過濾器處理后拋出的事件,同時拋出處理后的JSON格式的數據。具體數據示例請參見畫布編輯器中組件右側配置面板數據頁簽的數據響應結果區域。 當熱力值數據接口請求完成時 熱力值數據接口請求返回并經過過濾器處理后拋出的事件,同時拋出處理后的JSON格式的數據。具體數據示例請參見畫布編輯器中組件右側配置面板數據頁簽的數據響應結果區域。 當地理邊界geojson數據接口請求失敗時 地理邊界geojson數據接口請求失敗時(請求失敗的情況可能是:網絡問題或接口報錯等)返回并經過過濾器處理后拋出的事件,同時拋出處理后的JSON格式的數據。具體數據示例請參見畫布編輯器中組件右側配置面板數據頁簽的數據響應結果區域。 當熱力值數據接口請求失敗時 熱力值數據接口請求失敗時(請求失敗的情況可能是:網絡問題或接口報錯等)返回并經過過濾器處理后拋出的事件,同時拋出處理后的JSON格式的數據。具體數據示例請參見畫布編輯器中組件右側配置面板數據頁簽的數據響應結果區域。 當點擊線時 當單擊某條線時觸發事件,拋出link_id字段數據。 當鼠標移入時 當鼠標移入某條線時觸發事件,拋出link_id字段數據。 - 動作
動作 說明 請求地理邊界geojson數據接口 重新請求服務端數據,上游數據處理節點或圖層節點拋出的數據將作為參數。例如線熱力層配置了API數據源為 https://api.test
,傳到請求地理邊界geojson數據動作的數據為{ id: '1'}
,則最終請求接口為https://api.test?id=1
。請求熱力值數據接口 重新請求服務端數據,上游數據處理節點或圖層節點拋出的數據將作為參數。例如線熱力層配置了API數據源為 https://api.test
,傳到請求熱力值數據動作的數據為{ id: '1'}
,則最終請求接口為https://api.test?id=1
。導入地理邊界geojson數據接口 按組件繪制格式處理數據后,導入組件,重新繪制。不需要重新請求服務端數據。具體數據示例請參見畫布編輯器中組件右側配置面板數據頁簽的數據響應結果區域。 導入熱力值數據接口 按組件繪制格式處理數據后,導入組件,重新繪制。不需要重新請求服務端數據。具體數據示例請參見畫布編輯器中組件右側配置面板數據頁簽的數據響應結果區域。 顯示 顯示組件,不需要參數。 隱藏 隱藏組件,不需要參數。
- 事件