流式氣泡層是基礎平面地圖的子組件,支持獨立的樣式和數據配置,包括氣泡的大小、位置、顏色、動畫效果以及經緯度等,能夠以流式氣泡的形式表現地理位置上的點數據信息。本文介紹流式氣泡層各配置項的含義。

注意 當前為v1.x版本的流式氣泡層子組件指導文檔,如需查看該子組件v2.x版本的文檔內容詳情,請參見流式氣泡層(v2.x版本)
單擊子組件管理下方的流式氣泡層,進入配置面板配置流式氣泡層的樣式和數據。
說明 如果子組件管理中沒有流式氣泡層,說明您還未添加流式氣泡層子組件,請參見地圖容器(v1.x版本)進行添加。

配置

流式氣泡層配置面板
  • 搜索配置:單擊配置面板右上角的搜索配置,可在搜索配置對話框中輸入您需要搜索的配置項名稱,快速定位到該配置項,系統支持模糊匹配。詳情請參見搜索組件配置
  • 字體:流式氣泡的文本字體。
  • 字號:流式氣泡的文本大小。
  • 字體顏色:流式氣泡的文本顏色,請參見顏色選擇器說明進行修改。
  • 參考定位點:勾選后,顯示定位點,作為調整圖標位置時的參考點使用,實際使用的時候請關閉此選項。去勾選,隱藏定位點,只有在預覽或者發布時,才能顯示效果。參考定位點配置項
  • 圖標圖片:流式氣泡圖標的圖片。單擊圖標圖片,刪除當前圖片,再次單擊上傳本地圖片。如果您需要使用遠程服務器上的圖片,可以在圖標圖片上方的輸入框中輸入圖片的URL地址。
  • 圖標寬度:圖標的寬度,取值范圍為0~100,單位為px。
  • 圖標高度:圖標的高度,取值范圍為0~100,單位為px。
  • 圖標X偏移:圖標相對于定位點的X偏移量,取值范圍為-100~100,單位為px。建議設置為圖標寬度的一半來水平居中。
  • 圖標Y偏移:圖標相對于定位點的Y偏移量,取值范圍為-100~100,單位為px。建議設置為圖標高度值來下對齊圖標,設置為圖標高度值的一半來垂直居中。
  • 背景顏色:流信息的背景顏色。
  • 內容寬度:流式氣泡文本信息的寬度,取值范圍為0~300,單位為px。
  • 外邊距:流式氣泡文本信息距離文字信息框四邊的距離。
  • 圓角半徑:流式氣泡文字框的圓角半徑,值越大,邊角越圓。默認為0,即為長方形。
  • 內容X偏移:流式氣泡文本信息相對于圖標的X偏移量,取值范圍為-100~100,單位為px。
  • 內容Y偏移:流式氣泡文本信息相對于圖標的Y偏移量,取值范圍為-100~100,單位為px。
  • 多行對齊:流式信息的多行對齊方式,包括左對齊居中右對齊。僅當數據中的info信息設置為多行時有效。
  • 緩存:打開開關,系統會自動緩存您的氣泡數據,并且可以自定義緩存條數。當數據發生變化時,系統不會清空您已經緩存的數據。
  • 順序:打開開關,系統按照數據的順序進行循環冒泡,關閉開關,系統進行隨機冒泡。
  • 冒泡數目:流式氣泡每次冒泡的數量,當設置的數目小于數據條數時,系統采用循環冒泡的方式。
  • 平鋪時間:流式氣泡平鋪動畫的持續時間,單位為s。
  • 停留時間:流式氣泡平鋪動畫的停留時間,單位為s。
  • 消失時間:流式氣泡平鋪動畫的消失時間,單位為s。
  • 更新時間:流式氣泡平鋪動畫的更新時間,單位為s。

數據

流式氣泡層數據面板

可下載上圖中的示例JSON代碼

表 1. 字段說明
字段 說明
lng 流式氣泡的經度。
lat 流式氣泡的緯度。
info 流式氣泡的文本信息,可自定義,支持使用</br>換行,例如自定義信息</br>自定義信息
表 2. 配置項說明
配置項 說明
受控模式 打開開關,組件初始化狀態下不請求數據,僅通過回調ID或藍圖編輯器配置的方法發起請求數據;關閉開關,可以使用自動更新請求數據。
自動更新請求 選中后可以設置動態輪詢,還可以手動輸入輪詢的時間頻次。
數據源 單擊配置數據源,可在設置數據源頁面中修改數據源類型和數據查詢代碼、預覽數據源返回結果以及查看數據響應結果。詳情請參見配置組件數據
數據過濾器 單擊添加過濾器,可在設置數據源頁面中配置數據過濾器,詳情請參見組件過濾器使用說明
數據響應結果 展示數據請求的響應結果。當數據源發生改變時,可單擊右側的刷新數據圖標,實時查看數據響應結果。

交互

此組件沒有交互事件。

藍圖編輯器交互配置

  1. 在畫布編輯器頁面,單擊基礎平面地圖子組件管理列表中流式氣泡層右側的導出到藍圖編輯器圖標。
  2. 單擊頁面左上角的藍圖圖標圖標。
  3. 在藍圖編輯器配置頁面,單擊導入節點欄內的流式氣泡層組件,在畫布中可以看到如下圖所示的流式氣泡層的藍圖編輯器配置參數。流式氣泡層藍圖編輯器參數
    • 事件

      當數據接口請求完成時:數據接口請求返回并經過過濾器處理后拋出的事件,同時拋出處理后的JSON格式的數據。具體數據請參見上文的數據示例

    • 動作
      動作 說明
      請求數據接口 重新請求服務端數據,上游數據處理節點或圖層節點拋出的數據將作為參數。例如流式氣泡層配置了API數據源為http://api.test,傳到請求數據接口動作的數據為{ id: '1'},則最終請求接口為http://api.test?id=1
      導入數據接口 按組件繪制格式處理數據后,導入組件,重新繪制。不需要重新請求服務端數據。具體數據請參見上文的數據示例
      顯示 顯示組件,不需要參數。
      隱藏 隱藏組件,不需要參數。