本文介紹標簽層的圖表樣式和各配置項的含義。
圖表樣式
標簽層是3D平面地圖(v3.x版本)的子組件,支持獨立的樣式、數據和交互配置,包括經緯度彈窗多種嵌入形式、CSS自定義彈窗樣式和輪播/非輪播樣式等。
配置面板
搜索配置:單擊配置面板右上角的搜索配置,可在搜索配置面板中輸入您需要搜索的配置項名稱,快速定位到該配置項,系統支持模糊匹配。詳情請參見搜索資產配置。
通用:設置標簽層的通用配置項。
參數
說明
不透明度
標簽層的不透明度,范圍為0~100,單位%。數值越大標簽層越不透明。
圖形:設置標簽層的圖形配置項。
圖標形狀:設置標簽層在3D平面地圖上顯示的圖標形狀,單擊,上傳本地圖片自定義設置圖標形狀。請參見形狀映射器使用說明,配置不同圖標的形狀映射樣式。
圖標尺寸:標簽層圖標的尺寸樣式參數。
參數
說明
寬度
標簽層圖標的寬度,范圍為0~200,單位px。
高度
標簽層圖標的高度,范圍為0~200,單位px。
內容邊距:單擊數字,設置內容邊距大小。
標簽:設置標簽層內標簽的樣式參數。
整體寬度
適應類型:設置標簽的適應類型,包括自適應和固定寬度
固定寬度:設置標簽的整體寬度為固定寬度,單位為px。
文本溢出:設置標簽文字的文本溢出處理方式,包括切斷、換行和省略號。默認為省略號。
主標題:設置標簽內主標題的樣式,單擊主標題左側的圖標,可控制主標題樣式的顯隱。
參數
說明
標題字段
設置標簽的標題字段內容,需要與地理數據中的字段名稱相匹配,默認為name字段。
文本樣式
設置標簽標題內的文本樣式,包括文本的字體樣式、字號大小、顏色和文本粗細值。
標題背景
設置標簽主標題內的背景樣式。
背景顏色:設置標簽主標題的背景顏色。
邊框樣式:設置標簽主標題邊框的樣式,包括邊框的線類型,線寬的值和顏色。
邊框圓角:設置標簽主標題邊框的圓角在四個方向的值,單位px。
內容邊距:設置標簽中的主標題內容距離上下左右四個方向的邊距值。
主內容:設置標簽內主內容的樣式,單擊主內容左側的圖標,可控制主內容樣式的顯隱。
參數
說明
每行樣式
單擊每行樣式右側的或圖標,添加或刪除一個每行內容樣式。 單擊或圖標配置多個每行內容樣式的排列方式。單擊圖標,即可復制當前選中的內容樣式并新增一個同樣配置的內容樣式。
行字段:行內容的字段名稱,需要和數據面板中的字段相匹配。
字段樣式:設置行字段樣式,包括字段的字體樣式、字號大小、顏色和粗細值。
字段前綴:設置字段前綴的具體內容 、內容間隔值、字體、字號大小、顏色和粗細值。單擊字段前綴左側的圖標,可控制字段前綴樣式的顯隱。
字段后綴:設置字段后綴的具體內容 、內容間隔值、字體、字號大小、顏色和粗細值。單擊字段后綴左側的圖標,可控制字段后綴樣式的顯隱。
行高比例
標簽的行高比例值,取值范圍為1~2。
內容背景
設置標簽主內容的背景樣式。
背景顏色:設置標簽主內容的背景顏色。
邊框樣式:設置標簽主內容邊框的樣式,包括邊框的線類型,線寬的值和顏色。
邊框圓角:設置標簽主內容邊框的圓角在四個方向的值,單位px。
內容邊距:設置標簽主內容中的內容距離上下左右四個方向的邊距值。
背景框:設置標簽內背景框的樣式,單擊背景框左側的圖標,可控制背景框樣式的顯隱。
參數
說明
背景類型
標簽背景框的背景類型,可選矢量和圖片。
背景顏色
設置標簽的背景顏色,僅在背景類型選擇矢量時可配置。
圖片模板
選擇背景圖片的模板樣式,僅在圖片模板選擇圖片時可配置。
不透明度
設置背景圖片的不透明度值,取值范圍為0~100,僅在圖片模板選擇圖片時可配置。
邊框樣式
設置標簽背景邊框的樣式,包括邊框的線類型,線寬的值和顏色,僅在背景類型選擇矢量時可配置。
邊框圓角
設置標簽背景邊框的圓角在四個方向的值,單位px,僅在背景類型選擇矢量時可配置。
內容邊距
設置標簽背景框中的內容距離上下左右四個方向的邊距值。
動效:設置標簽層的動效參數。
參數
說明
顯示方式
標簽動效的顯示方式。可選輪播和全顯。
輪播順序
標簽動效的輪播順序。可選隨機輪播和順序輪播,顯示方式選擇輪播時展示。
輪播數量
標簽層輪播內容的數量,范圍為0~50,單位個,顯示方式選擇輪播時展示。
輪播時長
標簽層圖標的輪播時長,顯示方式選擇輪播時展示。
進入時長:設置標簽進入時長,范圍為0~5,單位秒。
停留時長:設置標簽停留時長,范圍為1~500,單位秒。
消失時長:設置標簽消失時長,范圍為0~5,單位秒。
條件:條件樣式說明。
條件樣式:單擊右側的或圖標,添加或刪除一個條件樣式。 單擊或圖標配置多個條件樣式的排列樣式。單擊圖標,即可復制當前選中的條件樣式配置并新增一個同樣配置的條件樣式。具體配置請參見條件樹使用說明。
圖形:設置該條件下標簽層內的圖形樣式。單擊圖形左側的圖標,可控制該條件下標簽層內對應圖形的顯隱。
主圖標:設置該條件下標簽中主圖標的樣式。單擊左側圖標,可控制主圖標樣式的開啟或關閉。
參數
說明
圖標形狀
標簽層標簽內主圖標的形狀樣式,您可以單擊樣式右側的下拉選項框,選擇系統內置多種圖標樣式;也可在下拉框面板的輸入框內自定義輸入圖片的URL地址,將遠程服務器上的圖片作為標簽圖標;或者單擊輸入框右側的圖標,上傳本地圖片作為標簽圖標。
圖標尺寸
設置主圖標在寬度和高度上的尺寸大小,取值范圍為0~200,單位px。
標簽:單擊左側的圖標,可控制該條件下標簽層內對應標簽的顯隱。
主標題:單擊左側的圖標,可控制該條件下標簽層內對應主標題的顯隱。
參數
說明
文本樣式
設置標簽標題內的文本樣式,包括文本的字體樣式、字號大小、顏色和文本粗細值。
標題背景
設置標簽主標題內的背景樣式。
背景顏色:設置標簽主標題的背景顏色。
邊框樣式:設置標簽主標題邊框的樣式,包括邊框的線類型,線寬的值和顏色。
邊框圓角:設置標簽主標題邊框的圓角在四個方向的值,單位px。
內容邊距:設置標簽中的主標題內容距離上下左右四個方向的邊距值。
主內容:單擊左側的圖標,可控制該條件下標簽層內對應主內容的顯隱。
參數
說明
行高比例
標簽的行高比例值,取值范圍為1~2。
內容背景
設置標簽主內容的背景樣式。
背景顏色:設置標簽主內容的背景顏色。
邊框樣式:設置標簽主內容邊框的樣式,包括邊框的線類型,線寬的值和顏色。
邊框圓角:設置標簽主內容邊框的圓角在四個方向的值,單位px。
背景框:單擊左側的圖標,可控制該條件下標簽層內對應背景框的顯隱。
參數
說明
背景類型
標簽背景框的背景類型,可選矢量和圖片。
背景顏色
設置標簽的背景顏色,僅在背景類型選擇矢量時可配置。
圖片模板
選擇背景圖片的模板樣式,僅在圖片模板選擇圖片時可配置。
不透明度
設置背景圖片的不透明度值,取值范圍為0~100,僅在圖片模板選擇圖片時可配置。
邊框樣式
設置標簽背景邊框的樣式,包括邊框的線類型,線寬的值和顏色,僅在背景類型選擇矢量時可配置。
邊框圓角
設置標簽背景邊框的圓角在四個方向的值,單位px,僅在背景類型選擇矢量時可配置。
數據面板(默認模式)
當組件是以默認模式添加后,您可以單擊數據面板右上角的分析模式,切換到分析模式數據面板。
配置字段說明
字段 | 說明 |
| 標簽的經度。 |
| 標簽的緯度。 |
| 標簽的高度。 |
| 標簽的圖標樣式。 |
| 標簽圖標所在的URL地址。 說明 自定義的任意字段支持html標簽,可以配合字段映射一同使用。 |
配置項 | 說明 |
受控模式 | 打開開關,資產初始化狀態下不請求數據,僅通過回調ID或藍圖編輯器配置的方法發起請求數據;關閉開關,可以使用自動更新請求數據。開關默認為關閉狀態。 |
自動更新請求 | 選中后可以設置動態輪詢,還可以手動輸入輪詢的時間頻次。取消選中后則不會自動更新,需要手動刷新頁面,或通過藍圖編輯器和回調ID事件來觸發請求更新數據。 |
數據源 | 單擊配置數據源,可在設置數據源面板中修改數據源類型和數據查詢代碼、預覽數據源返回結果以及查看數據響應結果,詳情請參見配置資產數據。 |
數據過濾器 | 數據過濾器提供數據結構轉換、篩選和一些簡單的計算功能。單擊添加過濾器,可在設置數據源面板配置數據過濾器腳本,詳情請參見過濾器使用說明。 |
數據響應結果 | 展示數據請求的響應結果。當數據源發生改變時,可單擊右側的圖標,實時查看數據響應結果。 |
數據面板(分析模式)
在地圖中以分析模式創建,添加子組件時,圖層欄內會自動在當前子組件上方對應生成一個分析器,且需要提前創建數據集以供分析模式子組件選擇并配置使用,創建數據集和分析器交互使用說明詳情,請參見添加數據集和BI分析器交互使用說明。
標簽層子組件BI分析數據配置面板中的詳細操作說明,請參見BI分析模式數據面板功能介紹。
配置字段說明
字段 | 說明 |
| 標簽的經度。 |
| 標簽的緯度。 |
| 標簽的高程。 |
| 標簽的圖標地址。 |
| 標簽的HTML片段或URL。 |
當組件是以分析模式添加后,您可以單擊切換數據面板右上角的默認模式,即可在彈窗對話框內確認退出分析模式并刪除該分析組件對應的分析器。退出分析模式后,當前分析模式組件會轉換成普通模式組件,組件數據面板為默認模式。
交互面板
交互說明
交互 | 說明 |
| 選中啟用,開啟組件交互功能。標簽層組件擁有交互配置,當單擊選中某個數據項時拋出回調值,默認拋出數據中的 |
藍圖編輯器交互配置
在畫布編輯器頁面,單擊3D平面地圖子組件管理列表中標簽層右側的圖標。
說明以BI分析模式添加的子組件無藍圖交互功能。
單擊頁面左上角的圖標。
在藍圖編輯器配置頁面,單擊導入節點欄內的標簽層組件,在畫布中可以看到如下圖所示的標簽層的藍圖編輯器配置參數。
事件
事件
說明
當數據接口請求完成時
數據接口請求返回并經過過濾器處理后拋出的事件,同時拋出處理后的JSON格式的數據。具體數據示例請參見畫布編輯器中組件右側配置面板數據頁簽的數據響應結果區域。
當數據接口請求失敗時
數據接口請求失敗時(請求失敗的情況可能是:網絡問題或接口報錯等)返回并經過過濾器處理后拋出的事件,同時拋出處理后的JSON格式的數據。具體數據示例請參見畫布編輯器中組件右側配置面板數據頁簽的數據響應結果區域。
當點擊點時
當單擊標簽層上的標簽點時拋出的事件,同時拋出該區域對應的數據項。
動作
動作
說明
請求數據接口
重新請求服務端數據,上游數據處理節點或圖層節點拋出的數據將作為參數。例如標簽層配置了API數據源為
https://api.test
,傳到請求數據接口動作的數據為{ id: '1'}
,則最終請求接口為https://api.test?id=1
。導入數據接口
按組件繪制格式處理數據后,導入組件,重新繪制。不需要重新請求服務端數據。具體數據示例請參見畫布編輯器中組件右側配置面板數據頁簽的數據響應結果區域。
顯示
顯示組件,不需要參數。
隱藏
隱藏組件,不需要參數。
更新配置
更新組件配置,不需要參數。