區(qū)域熱力層是基礎(chǔ)平面地圖的子組件,支持獨(dú)立的樣式、數(shù)據(jù)和交互配置,包括區(qū)域的標(biāo)注、顏色、邊線(xiàn)、鼠標(biāo)交互事件以及位置信息等,能夠以熱力區(qū)域的形式表現(xiàn)地理位置上的區(qū)域信息。本文介紹區(qū)域熱力層各配置項(xiàng)的含義。

注意 當(dāng)前為v2.x版本的區(qū)域熱力層子組件指導(dǎo)文檔,如需查看該子組件v1.x版本的文檔內(nèi)容詳情,請(qǐng)參見(jiàn)區(qū)域熱力層(v1.x版本)。
單擊子組件管理下方的區(qū)域熱力層,進(jìn)入配置面板配置區(qū)域熱力層的樣式和數(shù)據(jù)。
說(shuō)明 如果子組件管理中沒(méi)有區(qū)域熱力層,說(shuō)明您還未添加區(qū)域熱力層子組件,請(qǐng)參見(jiàn)地圖容器(v2.x版本)進(jìn)行添加。

配置

配置面板
  • 搜索配置:?jiǎn)螕?span id="z68uejxpaoma" class="ph uicontrol" id="d7e22">配置面板右上角的搜索配置,可在搜索配置面板中輸入您需要搜索的配置項(xiàng)名稱(chēng),快速定位到該配置項(xiàng),系統(tǒng)支持模糊匹配。詳情請(qǐng)參見(jiàn)搜索資產(chǎn)配置
  • 可見(jiàn)級(jí)別:設(shè)置區(qū)域熱力層的可見(jiàn)級(jí)別值,在設(shè)定的級(jí)別范圍內(nèi)區(qū)域熱力層可見(jiàn),級(jí)別之外不可見(jiàn)。
  • 區(qū)域樣式:設(shè)置區(qū)域熱力層的區(qū)域填充顏色和邊線(xiàn)樣式參數(shù)。
    參數(shù) 說(shuō)明
    填充顏色 數(shù)據(jù)中最大、最小及為空的value值對(duì)應(yīng)區(qū)域的顏色。
    邊線(xiàn)樣式 區(qū)域熱力層各區(qū)域邊線(xiàn)的顏色、粗細(xì)和線(xiàn)類(lèi)型。
  • 標(biāo)注:設(shè)置區(qū)域熱力層的區(qū)域的標(biāo)注顯示字段、文本樣式參數(shù)。單擊標(biāo)注左側(cè)的眼睛圖標(biāo)圖標(biāo),可控制標(biāo)注的顯隱。
    參數(shù) 說(shuō)明
    顯示字段 區(qū)域的標(biāo)注字段,需要與地理數(shù)據(jù)中字段名稱(chēng)匹配。
    文本樣式 區(qū)域熱力層各區(qū)域文本標(biāo)注的字體系列、文本粗細(xì)、字號(hào)、顏色和陰影色,請(qǐng)參見(jiàn)顏色選擇器說(shuō)明進(jìn)行顏色修改。
    說(shuō)明 請(qǐng)選擇系統(tǒng)中的字體,如果您的系統(tǒng)中沒(méi)有所選的字體,標(biāo)注會(huì)使用默認(rèn)字體。
  • 彈框:在預(yù)覽或發(fā)布頁(yè)面,單擊區(qū)域出現(xiàn)的彈框樣式。單擊彈框左側(cè)的眼睛圖標(biāo)圖標(biāo),可控制彈框的顯隱。
    說(shuō)明 開(kāi)啟彈窗功能需要先設(shè)置info字段。
    • info字段:?jiǎn)螕糸_(kāi)關(guān),開(kāi)啟info字段,設(shè)置info字段作為彈窗內(nèi)容,該字段支持配置html標(biāo)簽;如果關(guān)閉info字段開(kāi)關(guān),則兼容namevalue字段內(nèi)容作為彈窗內(nèi)容。
    • 事件類(lèi)型:選擇通過(guò)點(diǎn)擊區(qū)域鼠標(biāo)移入時(shí)事件作為彈框顯示的類(lèi)型。
    • 配置選項(xiàng):彈框樣式的配置項(xiàng)內(nèi)容,可選擇父容器默認(rèn)自定義配置。
      • 父容器默認(rèn):系統(tǒng)自帶的默認(rèn)樣式。
      • 自定義配置:自定義配置彈框的文本樣式、行高比例、圓角半徑等參數(shù)。
        參數(shù) 說(shuō)明
        文本樣式 設(shè)置彈框內(nèi)文本的字體、文字粗細(xì)、字號(hào)和顏色,請(qǐng)參見(jiàn)顏色選擇器說(shuō)明進(jìn)行顏色修改。
        行高比例 設(shè)置彈框格式的行高比例值。
        圓角半徑 設(shè)置彈框的圓角半徑值,數(shù)值越大圓角越圓。
        外邊距 設(shè)置彈框內(nèi)文本與彈框四邊的距離。
        背景色 設(shè)置彈框的背景色。
        關(guān)閉按鈕 設(shè)置關(guān)閉彈框按鈕的顏色、大小、按鈕離頂部的距離和離右側(cè)的距離。
  • 交互配置
    參數(shù) 說(shuō)明
    懸停樣式 單擊懸停樣式左側(cè)眼睛圖標(biāo)圖標(biāo),可控制懸停交互功能的開(kāi)啟或關(guān)閉。開(kāi)啟后可設(shè)置鼠標(biāo)懸停時(shí)的區(qū)域的填充顏色、區(qū)域邊線(xiàn)顏色和粗細(xì),僅在預(yù)覽或發(fā)布時(shí)才能看到效果。
    點(diǎn)擊聚焦 單擊左側(cè)眼睛圖標(biāo)圖標(biāo),可控制點(diǎn)擊聚焦交互功能的開(kāi)啟或關(guān)閉。開(kāi)啟后,單擊區(qū)域,會(huì)根據(jù)區(qū)域位置進(jìn)行一定范圍比例的聚焦,僅在預(yù)覽或發(fā)布時(shí)才能看到效果。

數(shù)據(jù)

區(qū)域熱力層數(shù)據(jù)面板v2.x
  • 地理邊界geojson數(shù)據(jù)接口:通過(guò)配置地理邊界geojson數(shù)據(jù)接口,可將提取到的區(qū)域GeoJSON邊界數(shù)據(jù)應(yīng)用到DataV中,配置方法如下。
    1. 數(shù)據(jù)提取。
      使用GeoJSON行政區(qū)劃邊界提取小工具DataV.GeoAtlas,最低可以提取區(qū)縣級(jí)邊界數(shù)據(jù),區(qū)域adcode可以查閱省市區(qū)adcode與經(jīng)緯度映射表,提取方法如下。
      • 省級(jí):區(qū)域熱力層默認(rèn)顯示為全國(guó)范圍內(nèi),各個(gè)省和直轄市區(qū)域熱力層數(shù)據(jù),可以直接使用。
      • 地市級(jí):以提取浙江省范圍內(nèi)所有地級(jí)市邊界數(shù)據(jù)為例,提取方法如下圖所示。提取邊界數(shù)據(jù)
      • 區(qū)縣級(jí):以提取肇慶市范圍內(nèi)所有區(qū)縣邊界數(shù)據(jù)為例,提取方法如下圖所示。提取邊界數(shù)據(jù)
      • 鄉(xiāng)鎮(zhèn)街道及自定義區(qū)域:鄉(xiāng)鎮(zhèn)街道數(shù)據(jù)需要用戶(hù)自己獲取。根據(jù)需要自定義區(qū)域邊界,如中國(guó)內(nèi)地可以分為東部地區(qū)、西部地區(qū)、華南地區(qū)、華北地區(qū)、華中地區(qū)五大區(qū),可以根據(jù)對(duì)應(yīng)包含的省級(jí)邊界數(shù)據(jù)合并得到。
    2. 數(shù)據(jù)應(yīng)用。
      將提取到的數(shù)據(jù)配置到DataV中,配置方法如下。
      1. 選擇區(qū)域熱力層 組件數(shù)據(jù)頁(yè)簽下的地理邊界geojson數(shù)據(jù)接口。
      2. 單擊配置數(shù)據(jù)源,在設(shè)置數(shù)據(jù)源面板中,選擇數(shù)據(jù)源類(lèi)型API。
      3. 將提取到的JSON API粘貼到數(shù)據(jù)輸入?yún)^(qū),如下圖所示。使用JSON API數(shù)據(jù)

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

        https://geo.datav.aliyun.com/areas/bound/441200_full.json
      4. 發(fā)布大屏項(xiàng)目,可以看到配置的區(qū)域熱力層。
    在數(shù)據(jù)配置的過(guò)程中,可能會(huì)出現(xiàn)區(qū)域文字標(biāo)注有偏移的問(wèn)題,解決方法如下。
    • 查看下您的區(qū)域熱力層版本,目前可以使用的區(qū)域熱力層組件包括區(qū)域熱力層v0.2.4及以上版本。如果您使用的區(qū)域熱力層版本較低,需要先刪除該層,再重新添加。
    • GeoJSON提取工具中的數(shù)據(jù)已更新,需使用新的GeoJSON數(shù)據(jù)文件。
    • 修改參數(shù)。
      肇慶市的區(qū)縣級(jí)GeoJSON數(shù)據(jù)為例,高要區(qū)文字標(biāo)注有偏移。地理位置偏移
      1. 使用DataV.GeoAtlas邊界生成器工具,上傳肇慶市的區(qū)縣級(jí)GeoJSON數(shù)據(jù)文件,在屬性表面板中添加customLabelPosition屬性參數(shù)。
        屬性表面板找到高要區(qū)的參數(shù),編輯并新增一列customLabelPosition屬性列,添加自定義"customLabelPosition": [112.500801,22.927694]屬性。
        圖 1. 修改屬性
        修改屬性
        圖 2. 查看修改的屬性
        查看修改的屬性
      2. 保存修改后,將GeoJson文件下載到本地,并將GeoJson文件上傳到自己的服務(wù)器或者OSS上,生成一個(gè)新的API。
      3. 選擇區(qū)域熱力層 > 數(shù)據(jù) > 地理邊界geojson數(shù)據(jù)接口。
      4. 單擊配置數(shù)據(jù)源,在設(shè)置數(shù)據(jù)源面板中選擇數(shù)據(jù)源類(lèi)型API
      5. 將修改后新生成的JSON API地址粘貼到數(shù)據(jù)輸入?yún)^(qū),設(shè)置完成后,高要區(qū)標(biāo)注顯示正常。
  • 熱力值數(shù)據(jù)接口

    您可以通過(guò)配置熱力值數(shù)據(jù)接口,自定義區(qū)域熱力層的樣式。區(qū)域熱力層支持?jǐn)?shù)據(jù)優(yōu)先渲染。

    1. 選擇區(qū)域熱力層 組件數(shù)據(jù)頁(yè)簽下的熱力值數(shù)據(jù)接口。
    2. 單擊配置數(shù)據(jù)源,在設(shè)置數(shù)據(jù)源面板中,選擇數(shù)據(jù)源類(lèi)型靜態(tài)數(shù)據(jù),參數(shù)說(shuō)明如下。熱力值數(shù)據(jù)接口v2.x

      上圖中的示例JSON代碼如下。

      [
        {
          "area_id": "710000",
          "value": 64
        },
        {
          "area_id": "330000",
          "value": 388
        },
        {
          "area_id": "150000",
          "value": 82
        },
        {
          "area_id": "210000",
          "value": 478
        },
        {
          "area_id": "220000",
          "value": 491
        },
        {
          "area_id": "230000",
          "value": 849
        },
        {
          "area_id": "310000",
          "value": 273
        },
        {
          "area_id": "320000",
          "value": 656
        },
        {
          "area_id": "340000",
          "value": 157
        },
        {
          "area_id": "350000",
          "value": 764
        },
        {
          "area_id": "360000",
          "value": 797
        },
        {
          "area_id": "370000",
          "value": 337
        },
        {
          "area_id": "410000",
          "value": 32
        },
        {
          "area_id": "420000",
          "value": 225
        },
        {
          "area_id": "430000",
          "value": 693
        },
        {
          "area_id": "440000",
          "value": 19
        },
        {
          "area_id": "450000",
          "value": 141
        },
        {
          "area_id": "460000",
          "value": 906
        },
        {
          "area_id": "650000",
          "value": 904
        },
        {
          "area_id": "810000",
          "value": 526
        },
        {
          "area_id": "820000",
          "value": 407
        }
      ]
      表 1. 字段說(shuō)明
      字段 說(shuō)明
      area_id 區(qū)域的adcode編號(hào),可通過(guò)DataV.GeoAtlas獲取。
      name 地區(qū)的名稱(chēng)。
      value 地區(qū)的值,與配置面板中填充顏色的最大值、最小值、無(wú)數(shù)據(jù)配置項(xiàng)配合使用,可控制對(duì)應(yīng)區(qū)域的顏色。
      說(shuō)明 根據(jù)數(shù)據(jù)的value區(qū)間得出scale區(qū)間,從而計(jì)算從最大到最小的顏色漸變區(qū)間。
      info (可選)彈窗內(nèi)容。
    3. 您也可以在數(shù)據(jù)源中配置 strokeColor(線(xiàn)顏色)、weight(線(xiàn)寬)、dashArray(虛線(xiàn))、fillColor(填充顏色)等字段。
      地圖中對(duì)應(yīng)的區(qū)域?qū)⒏鶕?jù)您設(shè)置的參數(shù)進(jìn)行渲染。其中fillColor支持red#fff000、rgba(0,256,0,0.5)三種形式設(shè)置參數(shù),如下圖所示。配置地圖邊界樣式
表 2. 配置項(xiàng)說(shuō)明
配置項(xiàng) 說(shuō)明
受控模式 打開(kāi)開(kāi)關(guān),資產(chǎn)初始化狀態(tài)下不請(qǐng)求數(shù)據(jù),僅通過(guò)回調(diào)ID或藍(lán)圖編輯器配置的方法發(fā)起請(qǐng)求數(shù)據(jù);關(guān)閉開(kāi)關(guān),可以使用自動(dòng)更新請(qǐng)求數(shù)據(jù)。開(kāi)關(guān)默認(rèn)為關(guān)閉狀態(tài)。
自動(dòng)更新請(qǐng)求 選中后可以設(shè)置動(dòng)態(tài)輪詢(xún),還可以手動(dòng)輸入輪詢(xún)的時(shí)間頻次。取消選中后則不會(huì)自動(dòng)更新,需要手動(dòng)刷新頁(yè)面,或通過(guò)藍(lán)圖編輯器和回調(diào)ID事件來(lái)觸發(fā)請(qǐng)求更新數(shù)據(jù)。
數(shù)據(jù)源 單擊配置數(shù)據(jù)源,可在設(shè)置數(shù)據(jù)源面板中修改數(shù)據(jù)源類(lèi)型和數(shù)據(jù)查詢(xún)代碼、預(yù)覽數(shù)據(jù)源返回結(jié)果以及查看數(shù)據(jù)響應(yīng)結(jié)果,詳情請(qǐng)參見(jiàn)配置資產(chǎn)數(shù)據(jù)
數(shù)據(jù)過(guò)濾器 數(shù)據(jù)過(guò)濾器提供數(shù)據(jù)結(jié)構(gòu)轉(zhuǎn)換、篩選和一些簡(jiǎn)單的計(jì)算功能。單擊添加過(guò)濾器,可在設(shè)置數(shù)據(jù)源面板配置數(shù)據(jù)過(guò)濾器腳本,詳情請(qǐng)參見(jiàn)過(guò)濾器使用說(shuō)明。
數(shù)據(jù)響應(yīng)結(jié)果 展示數(shù)據(jù)請(qǐng)求的響應(yīng)結(jié)果。當(dāng)數(shù)據(jù)源發(fā)生改變時(shí),可單擊右側(cè)的刷新圖標(biāo) 圖標(biāo),實(shí)時(shí)查看數(shù)據(jù)響應(yīng)結(jié)果。

交互

選中啟用,開(kāi)啟組件交互功能。區(qū)域熱力層子組件擁有交互配置,可單擊某個(gè)區(qū)域、鼠標(biāo)移入?yún)^(qū)域或鼠標(biāo)移出區(qū)域時(shí),觸發(fā)數(shù)據(jù)請(qǐng)求,拋出回調(diào)值,實(shí)現(xiàn)在單擊、鼠標(biāo)移入或移出某個(gè)區(qū)域時(shí),動(dòng)態(tài)加載不同區(qū)域的數(shù)據(jù)。默認(rèn)拋出所單擊區(qū)域的area_id值,具體配置請(qǐng)參見(jiàn)組件回調(diào)ID配置

藍(lán)圖編輯器交互配置

  1. 在畫(huà)布編輯器頁(yè)面,單擊基礎(chǔ)平面地圖子組件管理列表中區(qū)域熱力層右側(cè)的導(dǎo)出到藍(lán)圖編輯器圖標(biāo)。
  2. 單擊頁(yè)面左上角的藍(lán)圖圖標(biāo)圖標(biāo)。
  3. 在藍(lán)圖編輯器配置頁(yè)面,單擊導(dǎo)入節(jié)點(diǎn)欄內(nèi)的區(qū)域熱力層組件,在畫(huà)布中可以看到如下圖所示的區(qū)域熱力層的藍(lán)圖編輯器配置參數(shù)。區(qū)域熱力層藍(lán)圖編輯器參數(shù)v2.x
    • 事件
      事件 說(shuō)明
      當(dāng)?shù)乩磉吔?span id="z68uejxpaoma" class="help-letter-space">geojson數(shù)據(jù)接口請(qǐng)求完成時(shí) 地理邊界geojson數(shù)據(jù)接口請(qǐng)求返回并經(jīng)過(guò)過(guò)濾器處理后拋出的事件,同時(shí)拋出處理后的JSON格式的數(shù)據(jù)。具體數(shù)據(jù)示例請(qǐng)參見(jiàn)畫(huà)布編輯器中組件右側(cè)配置面板數(shù)據(jù)頁(yè)簽的數(shù)據(jù)響應(yīng)結(jié)果區(qū)域。
      當(dāng)熱力值數(shù)據(jù)接口請(qǐng)求完成時(shí) 熱力值數(shù)據(jù)接口請(qǐng)求返回并經(jīng)過(guò)過(guò)濾器處理后拋出的事件,同時(shí)拋出處理后的JSON格式的數(shù)據(jù)。具體數(shù)據(jù)示例請(qǐng)參見(jiàn)畫(huà)布編輯器中組件右側(cè)配置面板數(shù)據(jù)頁(yè)簽的數(shù)據(jù)響應(yīng)結(jié)果區(qū)域。
      當(dāng)?shù)乩磉吔?span id="z68uejxpaoma" class="help-letter-space">geojson數(shù)據(jù)接口請(qǐng)求失敗時(shí) 地理邊界geojson數(shù)據(jù)接口請(qǐng)求失敗時(shí)(請(qǐng)求失敗的情況可能是:網(wǎng)絡(luò)問(wèn)題或接口報(bào)錯(cuò)等)返回并經(jīng)過(guò)過(guò)濾器處理后拋出的事件,同時(shí)拋出處理后的JSON格式的數(shù)據(jù)。具體數(shù)據(jù)示例請(qǐng)參見(jiàn)畫(huà)布編輯器中組件右側(cè)配置面板數(shù)據(jù)頁(yè)簽的數(shù)據(jù)響應(yīng)結(jié)果區(qū)域。
      當(dāng)熱力值數(shù)據(jù)接口請(qǐng)求失敗時(shí) 熱力值數(shù)據(jù)接口請(qǐng)求失敗時(shí)(請(qǐng)求失敗的情況可能是:網(wǎng)絡(luò)問(wèn)題或接口報(bào)錯(cuò)等)返回并經(jīng)過(guò)過(guò)濾器處理后拋出的事件,同時(shí)拋出處理后的JSON格式的數(shù)據(jù)。具體數(shù)據(jù)示例請(qǐng)參見(jiàn)畫(huà)布編輯器中組件右側(cè)配置面板數(shù)據(jù)頁(yè)簽的數(shù)據(jù)響應(yīng)結(jié)果區(qū)域。
      點(diǎn)擊區(qū)域時(shí) 當(dāng)單擊區(qū)域熱力層某一塊區(qū)域時(shí)拋出。
      鼠標(biāo)移入?yún)^(qū)域觸發(fā) 當(dāng)鼠標(biāo)移入?yún)^(qū)域熱力層的某一區(qū)域塊時(shí)觸發(fā)事件并拋出數(shù)據(jù)。
      鼠標(biāo)移出區(qū)域觸發(fā) 當(dāng)鼠標(biāo)移出區(qū)域熱力層的某一區(qū)域塊時(shí)觸發(fā)事件并拋出數(shù)據(jù)。
    • 動(dòng)作
      動(dòng)作 說(shuō)明
      請(qǐng)求地理邊界geojson數(shù)據(jù)接口 重新請(qǐng)求服務(wù)端數(shù)據(jù),上游數(shù)據(jù)處理節(jié)點(diǎn)或圖層節(jié)點(diǎn)拋出的數(shù)據(jù)將作為參數(shù)。例如區(qū)域熱力層配置了API數(shù)據(jù)源為http://api.test,傳到請(qǐng)求地理邊界geojson數(shù)據(jù)接口動(dòng)作的數(shù)據(jù)為{ id: '1'},則最終請(qǐng)求接口為http://api.test?id=1。
      請(qǐng)求熱力值數(shù)據(jù)接口 重新請(qǐng)求服務(wù)端數(shù)據(jù),上游數(shù)據(jù)處理節(jié)點(diǎn)或圖層節(jié)點(diǎn)拋出的數(shù)據(jù)將作為參數(shù)。例如區(qū)域熱力層配置了API數(shù)據(jù)源為http://api.test,傳到請(qǐng)求熱力值數(shù)據(jù)接口動(dòng)作的數(shù)據(jù)為{ id: '1'},則最終請(qǐng)求接口為htp://api.test?id=1。
      導(dǎo)入地理邊界geojson數(shù)據(jù)接口 按組件繪制格式處理數(shù)據(jù)后,導(dǎo)入組件,重新繪制。不需要重新請(qǐng)求服務(wù)端數(shù)據(jù)。具體數(shù)據(jù)示例請(qǐng)參見(jiàn)畫(huà)布編輯器中組件右側(cè)配置面板數(shù)據(jù)頁(yè)簽的數(shù)據(jù)響應(yīng)結(jié)果區(qū)域。
      導(dǎo)入熱力值數(shù)據(jù)接口 按組件繪制格式處理數(shù)據(jù)后,導(dǎo)入組件,重新繪制。不需要重新請(qǐng)求服務(wù)端數(shù)據(jù)。具體數(shù)據(jù)示例請(qǐng)參見(jiàn)畫(huà)布編輯器中組件右側(cè)配置面板數(shù)據(jù)頁(yè)簽的數(shù)據(jù)響應(yīng)結(jié)果區(qū)域。
      顯示 顯示組件,不需要參數(shù)。
      隱藏 隱藏組件,不需要參數(shù)。