全部產品
Search
文件中心

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

更新時間:Nov 19, 2024

地圖容器是3D平面地圖(v3.x版本)組件中用於承載地圖本身和各子組件的容器,支援添加標籤層、單點柱狀層、呼吸氣泡層等子組件,支援配置地圖的通用、自然、地形和裝飾樣式,能夠多角度、多形式地渲染平面地圖的3D效果。本文介紹3D平面地圖容器各配置項的含義。

地圖模式

3D平面地圖包括中國地圖世界地圖兩種地圖模式,其組件配置和子組件配置完全一致,以後章節內容均以中國地圖模式介紹各配置項的含義。image

快速樣式

3D平面地圖組件具有快速樣式功能,您可以根據實際應用情境,選擇不同的樣式。包括但不限於極夜黑湛藍松綠石藍紫魅黑金樣式。image

鏡頭設定

  1. 單擊畫布中3D平面地圖組件右上方的image按鍵或者雙擊組件進入鏡頭設定介面。image

  2. 在鏡頭設定介面,您可以自由改變地圖的鏡頭視角,更改完成後需要將設定的地圖鏡頭視角儲存。

    通過滑鼠更改地圖鏡頭視角的方法有如下幾種:

    • 雙擊地圖中的省或直轄市地區及地市級地區,即可下鑽定位並放大該地區視角到地圖正中間。

    • 雙擊地圖空白處,即可上鑽一級且定位並放大該上鑽後地區視角到地圖正中間。

    • 單擊並按住滑鼠右鍵,可以拖動平移地圖。

    • 上下滾動滑鼠滑輪,可以縮放地圖的大小。

    • 單擊並按住滑鼠左鍵,可以旋轉地圖。

  3. 設定完地圖鏡頭後,單擊儲存並退出設定,即可儲存地圖鏡頭後關閉鏡頭設定介面。

    說明

    退出鏡頭設定介面後,依舊可以重新進入修改地圖鏡頭樣式。每次新進入鏡頭設定頁面,鏡頭視角如有改動都需要重新儲存。

子組件管理

  • 添加子組件

    1. 畫布中單擊3D平面地圖組件,進入右側的配置頁面。

    2. 單擊面板左側的image表徵圖,展開子組件面板子組件管理面板

    3. 單擊添加需要添加的子組件,添加成功後,子組件會顯示在子組件管理列表中。image

    4. 單擊已經添加的子組件,配置子組件參數。image.png

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

  • 複製、刪除和重新命名子組件:滑鼠移至已經添加的子組件上,單擊滑鼠右鍵,分別選擇複製刪除子組件,完成複製和刪除操作。雙擊子組件,完成重新命名操作。image.png

    說明

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

樣式面板image

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

    • 尺寸:包括組件的寬度和高度,單位為px。

    • 定位:包括組件的橫座標縱座標,單位為px。橫座標為組件左上方距離頁面左邊界的像素距離,縱座標為組件左上方距離頁面上邊界的像素距離。

    • 旋轉:以組件的中心為中心點,進行旋轉,單位為度(°)。

      • 手動輸入角度值,控制組件的旋轉角度。

      • 單擊image表徵圖,控制組件左右翻轉樣式。

      • 單擊image表徵圖,控制組件上下翻轉樣式。

    • 不透明度:取值範圍為0~1。為0時,圖表隱藏;為1時,圖表全部顯示。預設為1

  • 通用:地圖容器的通用配置。

    參數

    說明

    視圖位移

    地圖視圖位移樣式,配置地圖在視覺上的水平和垂直方向的位移量值、取值範圍-100~100。

    視圖角度

    地圖的傾斜角度和旋轉角度值。

    視圖縮放

    地圖的地圖距離視線的比例大小值,取值範圍0.5~2。

    螢幕像素

    地圖螢幕像素設定。高效能情境下關閉自適應,適當調低螢幕像素比以減少GPU佔用。

    背景顏色

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

    情境互動

    地圖情境互動功能,包括可選中情境拖拽、縮放和旋轉的互動配置,在預覽或發佈頁面下,可實現互動效果。

  • 自然:地圖的自然效果配置。

    • 光照:地圖光照效果。

      參數

      說明

      環境光線

      設定環境光線的顏色和光照強度值,取值範圍0~100。

      平行光

      設定平行光沿著x軸、y軸和z軸三個方向的角度值、光照顏色和光照強度值,取值範圍0~100。

    • 水體:地圖中的水體效果樣式,可單擊眼睛表徵圖表徵圖控制水體樣式的顯隱。

      參數

      配置

      水體顏色

      地圖水體的顏色。

      法線貼圖

      地圖水體的法線貼圖樣式,目前只有一種樣式可選。

      光照顏色

      水體的光照顏色。

      光照方向

      拖動滑塊,設定水體在x、y、z三個方向的光照範圍。

      流動速度

      拖動滑塊,設定水體在水平和垂直方向的流動速度值,取值範圍-100~100。

      波浪大小

      拖動滑塊,設定水體波浪樣式大小值,取值範圍1~100。

      倒影畸變

      拖動滑塊,設定水體倒影影像畸變程度值,取值範圍0~10。

    • 霧化效果:地圖霧化效果樣式,可單擊眼睛表徵圖表徵圖控制霧化效果的顯隱。

      參數

      說明

      顏色

      設定地圖霧化的顏色。

      距離

      拖動滑塊,設定地圖霧化距離,取值範圍0~100。

  • 地形:設定地圖地形的樣式參數。

    • 主體地形:設定當前所有子組件資料顯示的地區地形的樣式,在主體地形內可以配置互動操作,單擊眼睛表徵圖表徵圖控制主體地形的顯隱。

      • 地形高度比:拖動滑塊,設定地形的高度範圍值和高度拉低比例值。

        參數

        說明

        範圍

        主體地形高度比例範圍值,預設值1,取值範圍0.01~1。

        拉低比例

        小面積地區相對於主體地形高度的比例值,取值範圍0.01~1。

      • 地區邊界

        參數

        說明

        描邊樣式

        地圖中地區邊界的描邊樣式,包括設定描邊線的粗細值和描邊線的顏色,可單擊眼睛表徵圖表徵圖控制描邊樣式的顯隱。

        飛線樣式

        地圖中地區邊界內的飛線樣式,包括設定飛線的類型、選擇飛線的混合模式、飛線的長度值、飛線的粗細值大小、飛線的顏色和飛線在正負控制方向上的飛行速度值,可單擊眼睛表徵圖表徵圖控制飛線樣式的顯隱。

        文字標註

        地圖中地區邊界內的文字標註樣式,包括設定文字的字型樣式。文字粗細樣式、字型大小大小、文字的顏色、文字描邊粗細值和描邊的顏色,可單擊眼睛表徵圖表徵圖控制文字標註的顯隱。

      • 頂面樣式:設定主體地形頂面樣式參數,包括可自訂調整頂面的金屬質感範圍值、粗糙程度範圍值、材質的顏色;還可以單擊眼睛表徵圖表徵圖控制頂面紋理貼圖、法線貼圖、發光貼圖樣式和蒙版遮罩樣式的顯隱,選擇不同貼圖的類型及貼圖強度值以及顏色。

        說明

        紋理貼圖法線貼圖發光貼圖在配置樣式時,支援單紋理貼圖柵格瓦片服務地址兩種形式,其中柵格瓦片服務地址為xyz瓦片服務,URL連結中必須包含{x}{y}{z}預留位置, 如果您使用自有柵格服務,則需要提供至少12層的瓦片。

      • 側面樣式:設定主體地形側面樣式參數,包括可自訂開啟或關閉側面倒影的效果、側面材質的顏色、選擇側面紋理貼圖的樣式和發光貼圖的樣式、設定發光貼圖顏色、強度值和在水平及垂直方向的發光速率值。單擊眼睛表徵圖表徵圖控制紋理貼圖和發光貼圖的顯隱。

      • 發光圍欄:設定主體地形發光圍欄樣式參數,包括可自訂開啟或關閉發光圍欄倒影的效果、主體地形底部高度值、高度比例範圍的值、圍欄材質的顏色、圍欄紋理貼圖的樣式以及發光貼圖的樣式、設定發光貼圖顏色、強度值和在水平及垂直方向的發光速率值。單擊眼睛表徵圖表徵圖控制發光貼圖的顯隱。

    • 背景地形:設定地圖除了主體地形以外的背景地形地區的樣式,背景地形設定不會響應互動事件,可單擊眼睛表徵圖表徵圖控制背景地形的顯隱。

      • 地形高度比:拖動滑塊,設定背景地形相對於主體地形的高度比例值。

      • 地區邊界:背景地形中地區邊界的描邊樣式,包括設定描邊線的粗細值和描邊線的顏色,可單擊眼睛表徵圖表徵圖控制描邊樣式的顯隱。

      • 頂面樣式:設定背景地形頂面樣式參數,包括可自訂調整頂面的金屬質感範圍值、粗糙程度範圍值、材質的顏色;還可以單擊眼睛表徵圖表徵圖控制頂面紋理貼圖、法線貼圖和發光貼圖樣式的顯隱,選擇不同貼圖的類型及貼圖強度值以及顏色。

        說明

        紋理貼圖法線貼圖發光貼圖在配置樣式時,支援單紋理貼圖柵格瓦片服務地址兩種形式,其中柵格瓦片服務地址為xyz瓦片服務,URL連結中必須包含{x}{y}{z}預留位置, 如果您使用自有柵格服務,則需要提供至少12層的瓦片。

      • 側面樣式:設定背景地形側面樣式參數,包括可自訂開啟或關閉側面倒影的效果、側面材質的顏色、選擇側面紋理貼圖的樣式和發光貼圖的樣式、設定發光貼圖顏色和強度值。單擊眼睛表徵圖表徵圖控制發光貼圖的顯隱。

  • 裝飾:設定地圖裝飾樣式的參數。

    • 動態裝飾:單擊眼睛表徵圖表徵圖控制動態裝飾的顯隱。

      參數

      說明

      底部高度比

      拖動滑塊,調整底部高度比例值,取值範圍0.01~10。

      旋轉速度

      設定動態裝飾的旋轉速度值,取值範圍-100~100,單位度/每幀。

      呼吸速度

      設定動態裝飾的呼吸速度值,取值範圍0~100。

      縮放比例

      設定動態裝飾的縮放比例值,取值範圍0~2。

      材質顏色

      設定動態裝飾材質的顏色。

      紋理貼圖

      設定動態裝飾材質的紋理貼圖樣式,可選四種類型的貼圖。

      粗糙程度

      拖動滑塊,調整動態裝飾的粗糙程度範圍值,取值範圍0~100。

      金屬質感

      拖動滑塊,調整動態裝飾的金屬質感範圍值,取值範圍0~100。

      光暈效果

      設定動態裝飾材質的光暈效果的顏色、可選四種類型的貼圖樣式、貼圖強度值。單擊眼睛表徵圖表徵圖控制發光貼圖的顯隱。

    • 背景網格:單擊眼睛表徵圖表徵圖控制背景網格的顯隱。

      參數

      說明

      底部高度比

      拖動滑塊,調整底部高度比例值,預設值為0,取值範圍0.01~10。

      材質顏色

      設定背景網格材質的顏色。

      紋理貼圖

      設定背景網格材質的紋理貼圖樣式,可選四種類型的貼圖、設定在水平和垂直方向平鋪的值。單擊眼睛表徵圖表徵圖控制紋理貼圖的顯隱。

      粗糙程度

      拖動滑塊,調整背景網格的粗糙程度範圍值,取值範圍0~100。

      金屬質感

      拖動滑塊,調整背景網格的金屬質感範圍值,取值範圍0~100。

      光暈效果

      設定背景網格材質的光暈效果的顏色、可選四種類型的貼圖樣式、貼圖強度值、在水平和垂直方向平鋪的值以及在水平和垂直方向的發光速率值。單擊眼睛表徵圖表徵圖控制發光貼圖的顯隱。

  • 邊界:設定地圖邊界樣式的參數。

    • 國界:設定國界的邊界顏色和邊界粗細。

    • 海岸:設定海岸線的邊界顏色和邊界粗細。

    • 省界:設定省界的邊界顏色和邊界粗細。

資料來源面板image

資料項目配置

說明

資料來源

組件的資料來源中通過代碼編輯可視化編輯展示了組件所包含的資料欄位。也可以修改資料類型,靈活配置組件資料。

資料對應

當您需要自訂圖表欄位配置時,可以在資料對應模組設定不同的欄位對應內容,將這些欄位對應到組件對應的欄位上。無需修改資料來源中的欄位,就可以實現資料的即時匹配。也可以單擊image表徵圖對欄位分別樣式配置。

過濾器

開啟過濾器,選擇已建立的資料過濾器或建立資料過濾器,並配置資料過濾器指令碼,實現資料的篩選功能。詳情請參見管理資料過濾器

資料響應結果

即時展示了組件所使用的資料。當組件資料來源發生變化時,資料響應結果會對應展示最新的資料。如果系統反應延遲,您可以單擊右側的image表徵圖,查看資料響應結果,也可以單擊右側的image表徵圖,擷取組件的最新資料。您也可以單擊查看樣本,查看當前組件的響應結果樣本。

禁止載入態

勾選複選框,在組件更新和預覽資料看板時,將看不到組件初始化時的載入內容,去勾選則相反。預設為去勾選狀態。

受控模式

勾選複選框,組件初始化狀態下不請求資料,僅通過全域變數或藍圖編輯器配置的方法發起請求資料;去勾選複選框,可以使用自動更新請求資料。預設為去勾選狀態。

自動更新請求

勾選複選框,可以手動輸入輪詢的時間頻次設定動態輪詢。清除後則不會自動更新,需要手動重新整理頁面,或通過藍圖編輯器和全域變數事件來觸發請求更新資料。

進階面板image

事件

說明

當地區被點擊時觸發

開啟開關,開啟組件互動功能。當當地區被點擊時觸發時,會拋出treeIDadcode變數值。具體配置請參見組件互動配置

當地區被雙擊觸發

開啟開關,開啟組件互動功能。當當地區被雙擊觸發時,會拋出treeIDadcode變數值。具體配置請參見組件互動配置

當地區上鑽觸發

開啟開關,開啟組件互動功能。當當地區上鑽觸發時,會拋出treeIDadcode變數值。具體配置請參見組件互動配置

藍圖互動

  1. 單擊頁面左上方的image表徵圖,進入藍圖頁面。

  2. 圖層節點頁簽下,添加當前組件至主畫布中。

  3. 查看藍圖配置參數。image

    • 事件

      事件

      說明

      當自訂下鑽層級資料介面請求完成時

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

      當內建世界陸地邊界資料介面請求完成時

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

      當內建中國國家邊界資料介面請求完成時

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

      當地區被點擊時觸發

      地區被單擊時拋出的事件,參考資料樣本。

      {
        "treeID": 1,//層級樹節點編碼
        "adcode": ""//地區編碼
      }

      當地區被雙擊觸發

      地區被雙擊時拋出的事件,參考資料樣本。

      {
        "treeID": 1,//層級樹節點編碼
        "adcode": ""//地區編碼
      }

      當地區上鑽觸發

      地區上鑽時拋出的事件,參考資料樣本。

      {
        "treeID": 1,//層級樹節點編碼
        "adcode": ""//地區編碼
      }
    • 動作

      動作

      說明

      匯入自訂下鑽層級資料介面

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

      請求自訂下鑽層級資料介面

      重新請求服務端資料,上遊資料處理節點或圖層節點拋出的資料將作為參數。例如地圖容器配置了API資料來源為https://api.test,傳到請求自訂下鑽層級資料介面動作的資料為{ id: '1'},則最終請求介面為https://api.test?id=1

      更新自訂地區

      更新自訂地區,存在以下三種配置自訂地區欄位的情況。

      • defaultArea:不改變地區資料,僅改變當前主體地形地區。

      • data:設定地區資料並顯示根節點。

      • data和defaultArea :設定地區資料,並顯示設定的主體地形地區。

      參考資料樣本。

      {  
        "data": {},  //TopoJSON對象
        "defaultArea": "" //預設區域樹節點編碼,取資料中treeID或adcode欄位
      }

      設定相機

      設定相機,參考資料樣本。

      {
        "target": {   //相機視點位置
          "x": 105,
          "y": 35,
          "z": -100307
        },
        "position": {  //相機視點位置
          "x": 105,
          "y": -70,
          "z": 17659888
        },
        "maxDistance": 100000000  //最大距離
      }

      更新配置

      更新配置,不需要參數 。

      移動

      將組件移動到指定位置,參考資料樣本。

          {
            // 移動方式。絕對位置:to,相對定位:by。預設值:to。
              "positionType": "to",
            // 指定位置。x座標,y座標。
            "attr": {
              "x": 0,
              "y": 0
            },
            // 動畫方式。
            "animation": {
              "enable": false,
              // 動畫延時。
              "animationDuration": 1000,
              // 動畫曲線。可選值為:linear|easeInOutQuad|easeInOutExpo。
              "animationEasing": "linear"
            }
          }

      切換顯隱

      切換組件顯示或者隱藏,不需要參數。

      顯示

      顯示組件,參考資料樣本。

      {
        "animationType": "",//動畫方式,可選值:fade,不填無動畫。
        "animationDuration": 1000,//動畫延遲,單位ms。
        "animationEasing": ""//動畫曲線
      }

      隱藏

      隱藏組件,參考資料樣本。

      {
        "animationType": "",//動畫方式,可選值:fade,不填無動畫。
        "animationDuration": 1000,//動畫延遲,單位ms。
        "animationEasing": ""//動畫曲線
      }

      更新群組件配置

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