圖表樣式

區域熱力層是基礎平面地圖 4.0的子組件，支持獨立的樣式、數據和交互配置，包括區域的標注、顏色、邊線、鼠標交互事件以及位置信息等，能夠以熱力區域的形式表現地理位置上的區域信息。

樣式面板

• 搜索配置：單擊樣式面板右上角的搜索配置項圖標，可在搜索配置面板中輸入您需要搜索的配置項名稱，快速定位到該配置項，系統支持模糊匹配。詳情請參見搜索配置項。

• 快速樣式：區域熱力層子組件具備快速樣式功能，您可以根據實際應用場景選擇不同的樣式。

• 通用：設置區域熱力層的通用配置參數項。

  參數	說明
  可見級別	設置區域熱力層的可見級別值，在設定的級別范圍內區域熱力層可見，級別之外不可見。
  不透明度	設置區域熱力層的不透明度值，取值范圍為0~100，單位%。數值越大熱力層樣式越不透明。

• 圖形：設置區域熱力層的圖形樣式參數項。區域填充顏色和邊線樣式參數。

  參數	說明
  填充顏色	數據中最大、最小及為空的value值對應區域的顏色。請參見顏色映射器使用說明，配置不同區域的映射顏色樣式。
  描邊樣式	區域熱力層各區域邊線的顏色、粗細和線的類型。 說明 線型支持數字輸入，如：4,4，第一個數字表示實線長度，第二個數字表示間隔長度。
  填充紋理	單擊填充紋理左側的圖標，可控制區域塊的填充紋理樣式顯隱。 紋理形狀：區域紋理的形狀樣式，請參見形狀映射器使用說明，配置不同區域的填充紋理的映射形狀樣式。 紋理顏色：請參見顏色映射器使用說明，配置不同區域的紋理映射顏色樣式。 紋理縮放比例：區域紋理的縮放倍數，范圍為0.1~10。

• 標簽：設置區域熱力層的區域的標簽配置項參數。

  • 顯示標簽：區域的標簽樣式，單擊顯示標簽左側的圖標，可控制顯示標簽的顯隱。

  • 顯示方式：區域標簽的顯示方式，可選全顯、點擊和懸浮。

  • 內容樣式：區域標簽的內容樣式參數配置項。

    參數	說明
    每行樣式	單擊每行樣式右側的或圖標，添加或刪除一個每行內容樣式。 單擊或圖標配置多個每行內容樣式的排列方式。單擊圖標，即可復制當前選中內容樣式配置內容并新增一個同樣配置的每行內容。 行字段：行內容的字段名稱，需要和數據面板中的字段相匹配。 字段樣式：設置行字段樣式，包括字段的字體樣式、字號大小、顏色和粗細值。 字段前綴：設置字段前綴的具體內容 、內容間隔值、字體、字號大小、顏色和粗細值。單擊字段前綴左側的圖標，可控制字段前綴樣式的顯隱。 字段后綴：設置字段后綴的具體內容 、內容間隔值、字體、字號大小、顏色和粗細值。單擊字段后綴左側的圖標，可控制字段后綴樣式的顯隱。
    最大寬度	設置標簽顯示的單行最大寬度，單位為px，字段內容超出該長度將自動換行顯示。
    行高比例	區域標簽的行高比例值，取值范圍為1~2。
    內容描邊	區域標簽的內容描邊樣式，包括設置描邊的顏色和描邊粗細值，單擊內容描邊左側的圖標，可控制內容描邊的顯隱。
    內容陰影	區域標簽的內容陰影樣式，包括設置陰影的顏色、陰影模糊值和陰影偏移度在x和y方向上的值，單擊內容陰影左側的圖標，可控制內容陰影的顯隱。

  • 背景樣式：設置區域標簽的背景樣式參數，單擊背景樣式左側的圖標，可控制背景樣式的顯隱。

    參數	說明
    背景類型	標簽背景的類型，可選矢量和圖片。
    背景顏色	設置標簽的背景顏色，僅在背景類型選擇矢量時可配置。
    邊框樣式	設置標簽邊框的樣式，包括邊框的線類型，線寬的值和顏色。僅在背景類型選擇矢量時可配置。
    邊框圓角	設置標簽邊框的圓角在四個方向的值，單位px。僅在背景類型選擇矢量時可配置。
    圖片模板	選擇背景圖片的模板樣式，僅在背景類型選擇圖片時可配置。
    不透明度	設置背景圖片的不透明度值，取值范圍為0~100，僅在背景類型選擇圖片時可配置。
    內容邊距	設置標簽中的內容距離上下左右四個方向的邊距值。

• 交互：區域熱力層的交互配置項。

  • 圖形交互

    參數	說明
    點擊聚焦	單擊左側圖標，可控制點擊聚焦交互功能的開啟或關閉。開啟后，單擊區域，會根據區域位置進行一定范圍比例的聚焦，僅在預覽或發布時才能看到效果。
    懸停樣式	單擊懸停樣式左側圖標，可控制懸停交互功能的開啟或關閉。開啟后可設置鼠標懸停時的區域的填充顏色、區域描邊線顏色和粗細，僅在預覽或發布時才能看到效果。

• 條件：條件樣式說明。

  條件樣式：單擊右側的或圖標，添加或刪除一個條件樣式。 單擊或圖標配置多個條件樣式的頁面布局。單擊圖標，即可復制當前選中條件樣式配置內容并新增一個同樣配置的條件樣式。具體樣式配置說明，請參見條件樹使用說明。

  圖形：打開開關，配置該樣式中的圖形配置項；關閉開關，無法配置該樣式下的圖形配置項。

  參數	說明
  填充顏色	單擊左側的圖標，可控制是否應用該條件下的區域填充顏色。
  填充紋理	單擊左側的圖標，可控制是否應用該條件下的區域的填充紋理。 紋理形狀：單擊左側的圖標，可控制是否應用該條件下的區域的紋理形狀。 紋理顏色：單擊左側的圖標，可控制是否應用該條件下的區域的紋理顏色。 紋理縮放比例：單擊左側的圖標，可控制是否應用該條件下的區域的紋理縮放比例。范圍為0.1~10。

• 自定義彈框樣式：設置區域熱力層內自定義彈框的樣式參數。

  參數	說明
  彈框開關	打開開關，可以通過點擊或懸浮觸發彈框。
  顯示方式	設置區域熱力層彈框顯示的方式，可選，包括點擊和懸浮兩種方式。
  相對偏移	設置彈窗在水平和垂直方向的相對偏移像素距離，取值范圍為-1000~1000，單位px。
  文本樣式	設置彈框內的文本樣式，包括文本的字體樣式、字號大小、顏色和文本粗細值。
  顯示空值	打開開關，在無info字段或空info字段對象上可以彈框顯示為“無數據”，關閉開關時，對于無info字段的數據，交互不會彈出對應的彈框。
  彈框樣式	內邊距：設置彈框文本的內容距離上下左右四個方向的邊距值。 邊框樣式：設置彈框邊框的圓角值、線寬和顏色。 背景顏色：設置彈框的背景顏色 投影樣式：設置彈框投影的模糊色、模糊半徑、X偏移和Y偏移。 關閉按鈕：打開開關，區域熱力層的彈框顯示關閉按鈕和按鈕的顏色。 指向箭頭：打開開關，區域熱力層的彈框顯示指向箭頭。

數據源面板

• 地理邊界geojson數據接口：通過配置地理邊界geojson數據接口，可將提取到的區域GeoJSON邊界數據應用到DataV中，配置方法如下。

  1. 數據提取。

     使用GeoJSON行政區劃邊界提取小工具DataV.GeoAtlas，最低可以提取區縣級邊界數據，區域adcode可以查閱省市區adcode與經緯度映射表，提取方法如下。

     • 省級：區域熱力層默認顯示為全國范圍內，各個省和直轄市區域熱力層數據，可以直接使用。

     • 地市級：以提取浙江省范圍內所有地級市邊界數據為例，提取方法如下圖所示。

     • 區縣級：以提取肇慶市范圍內所有區縣邊界數據為例，提取方法如下圖所示。

     • 鄉鎮街道及自定義區域：鄉鎮街道數據需要用戶自己獲取。根據需要自定義區域邊界，如中國內地可以分為東部地區、西部地區、華南地區、華北地區、華中地區五大區，可以根據對應包含的省級邊界數據合并得到。

  2. 數據應用。

     將提取到的數據配置到DataV中，配置方法如下。

     1. 選擇數據源頁簽下的地理邊界geojson數據接口。

     2. 在設置數據源面板中，選擇數據源類型為API。

     3. 將提取到的JSON API粘貼到數據輸入區。

        上圖中提取到了肇慶市包含子區域的邊界信息，示例API如下。

        https://geo.datav.aliyun.com/areas/bound/441200_full.json

     4. 發布大屏項目，可以看到配置的區域熱力層。

  在數據配置的過程中，可能會出現區域文字標注有偏移的問題，解決方法如下。

  • 查看下您的區域熱力層版本，目前可以使用的區域熱力層組件包括區域熱力層v0.2.4及以上版本。如果您使用的區域熱力層版本較低，需要先刪除該層，再重新添加。

  • GeoJSON提取工具中的數據已更新，需使用新的GeoJSON數據文件。

  • 修改參數。

    以肇慶市的區縣級GeoJSON數據為例，高要區文字標注有偏移。

    1. 使用DataV.GeoAtlas邊界生成器工具，上傳肇慶市的區縣級GeoJSON數據文件，在屬性表面板中添加customLabelPosition屬性參數。

       在屬性表面板找到高要區的參數，編輯并新增一列customLabelPosition屬性列，添加自定義"customLabelPosition": [112.500801,22.927694]屬性。

       修改屬性 查看修改的屬性

    2. 保存修改后，將GeoJson文件下載到本地，并將GeoJson文件上傳到自己的服務器或者OSS上，生成一個新的API。

    3. 選擇數據源頁簽下的地理邊界geojson數據接口。

    4. 在設置數據源面板中選擇數據源類型為API。

    5. 將修改后新生成的JSON API地址粘貼到數據輸入區，設置完成后，高要區標注顯示正常。

• 數據接口

  您可以通過配置數據接口，自定義區域熱力層的樣式。區域熱力層支持數據優先渲染。

  1. 選擇數據源頁簽下的數據接口。

  2. 在設置數據源面板中選擇數據源類型為靜態數據，參數說明如下。

     字段	說明
     adcode	區域的adcode編號，可通過DataV.GeoAtlas獲取。
     name	可選，地區的名稱。
     colorField	可選，地區的顏色映射字段。
     textureShapeField	可選，地區的紋理形狀映射字段。
     textureColorField	可選，地區的紋理顏色映射字段。
     value	可選，地區的值，與配置面板中填充顏色的最大值、最小值、無數據配置項配合使用，可控制對應區域的顏色。
     popupType	可選，彈窗類型（需要搭配二次開發功能使用）。
     info	可選，自定義彈窗內容。

高級面板

打開開關，開啟關聯全局變量功能。在單擊、雙擊、鼠標移入或移出某個區域時，可觸發數據請求，拋出臨時變量，實現動態加載不同區域的數據。默認拋出所單擊區域的adcode值，具體配置請參見組件交互配置。

藍圖交互

1. 單擊頁面左上角的圖標，進入藍圖頁面。

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

3. 查看藍圖配置參數。

   • 事件

     事件	說明
     當數據接口請求完成時	數據接口請求返回并經過過濾器處理后拋出的事件，同時拋出處理后的JSON格式的數據。具體數據示例請參見畫布編輯器中組件右側配置面板數據源頁簽的數據響應結果區域。
     當地理邊界geojson數據接口請求完成時	地理邊界GeoJSON數據接口請求返回并經過過濾器處理后拋出的事件，同時拋出處理后的JSON格式的數據。具體數據示例請參見畫布編輯器中組件右側配置面板數據源頁簽的數據響應結果區域。
     當內置topojson數據接口請求完成時	內置topojson數據接口請求返回并經過過濾器處理后拋出的事件，同時拋出處理后的JSON格式的數據。具體數據示例請參見畫布編輯器中組件右側配置面板數據源頁簽的數據響應結果區域。
     點擊區域時	當單擊區域熱力層某一塊區域時拋出。
     當區域被雙擊觸發	當區域熱力層某一塊區域被雙擊觸發時拋出數據。
     鼠標移入區域觸發	當鼠標移入區域熱力層的某一區域塊時觸發事件并拋出數據。
     鼠標移出區域觸發	當鼠標移出區域熱力層的某一區域塊時觸發事件并拋出數據。

   • 動作

     動作	說明
     導入數據接口	按組件繪制格式處理數據后，導入組件，重新繪制。不需要重新請求服務端數據。具體數據示例請參見畫布編輯器中組件右側配置面板數據源頁簽的數據響應結果區域。
     請求數據接口	重新請求服務端數據，上游數據處理節點或圖層節點拋出的數據將作為參數。例如區域熱力層配置了API數據源為https://api.test，傳到請求數據接口動作的數據為{ id: '1'}，則最終請求接口為https://api.test?id=1。
     切換顯隱	切換組件顯示或者隱藏，不需要參數。
     顯示	顯示組件，參考數據示例。 { "animationType": "",//動畫方式，可選值：fade，不填無動畫。 "animationDuration": 1000,//動畫延遲，單位ms。 "animationEasing": ""http://動畫曲線 }
     隱藏	隱藏組件，參考數據示例。 { "animationType": "",//動畫方式，可選值：fade，不填無動畫。 "animationDuration": 1000,//動畫延遲，單位ms。 "animationEasing": ""http://動畫曲線 }
     更新組件配置	動態更新組件的樣式配置。需要先在組件的樣式面板中，單擊復制配置到剪貼板，獲取組件配置數據。再根據需要在藍圖編輯器配置頁面的數據處理節點中更改對應樣式的字段值。