The regional thermal layer is a sub-component of the basic flat map. It supports independent styles, data, and interaction configurations, including regional labels, colors, edges, mouse interaction events, and location information. It can display the regional information in the form of thermal regions. This topic describes the configuration items of the choropleth layer.

Click Choropleth Layer under Components. The Settings tab of Choropleth Layer appears.
Note If Components does not contain Choropleth Layer, add the Choropleth Layer component. For more information, see Map container (v1.x version).

Parameter

  • Search for Configurations: In the right-side panel of Canvas Editor, click the Settings tab, and click Search for Configurations in the upper-right corner. Enter the required configuration item in the search box, and click the search icon to quickly locate the configuration item. Fuzzy match is supported. For more information, see Search for asset configurations.
  • Label
    • Labeling Field: the labeling field of the region. The labeling field must match the field name in the geographical data.
    • Color: the color of the label. For more information, see the color picker description.
    • Shadow Color: the shadow color of the label.
    • Font: the font family of the label.
      Note Only fonts that are installed on the system are displayed. If the selected font is not installed, the default font is displayed.
    • Font Size: the font size of the label.
  • Fill Color: the colors of areas, which correspond to the values of the Minimum, Maximum, and No Data parameters.
  • Edge Options: the color, thickness, and dashed line type of the edge in each area of the regional thermal layer.
  • Interactive Configuration
    • Hover: the color that highlights the area where the pointer is positioned above. This effect is displayed only when you preview the layer or after you publish the layer.
    • Show Pop-up Window: If you turn on the switch, the information of the pop-up window is displayed. If you turn off the switch, the information of the pop-up window is closed.
    • Click to Focus: Turn on the switch to enable the click to focus feature.
    • Focus Range Ratio: the focus range of the clicked area.
    • Callback ID: the variable that is used to link data between widgets. Set this parameter to a field in the data.
      Note If the version of your widget is not the latest, upgrade the widget xxx and configure callback IDs in the Interaction tab.

The metadata of the filtering table.

  • Geo-boundary geoJSON data interface: You can configure a geo-boundary geoJSON data interface to apply the extracted region geoJSON boundary data to DataV. The configuration method is as follows.
    1. Data extraction.
      Use GeoJSON to extract widget DataV.GeoAtlas for administrative division boundaries. At the lowest level, you can extract district and county-level boundary data. The regional adcode can refer to the provincial and urban adcode and longitude and latitude mapping table. The extraction method is as follows.
      • Provincial: By default, the regional thermal layer is displayed nationwide, and the regional thermal layer data of each province and municipality can be directly used.
      • Prefecture-level: Take the boundary data of all prefecture-level cities in Zhejiang Province as an example.
      • District and county level: Take the boundary data of all districts and counties within the scope of Zhaoqing city as an example.
      • Township streets and custom regions: You need to obtain the data of township streets by yourself. Customize the boundaries of regions as needed. For example, the Chinese mainland can be divided into five regions: Eastern Region, Western Region, South China Region, North China Region, and Central China Region, which can be obtained by merging the corresponding provincial boundary data.
    2. Data application.
      Configure the extracted data to DataV as follows.
      1. Choose Regional Thermal Layer > Data > Geo-boundary geojson Data Interface.
      2. Click Configure Data Source. In the Set Data Source dialog box that appears, set Data Source Type to API.
      3. Paste the extracted JSON API into the data input area.

        In the preceding figure, the boundary information of the subareas in Zhaoqing is extracted. The sample API is as follows:

        https://geo.datav.aliyun.com/areas/bound/441200_full.json
      4. Publish the project on the dashboard. You can view the configured regional thermal layer.
    During data configuration, the area text label may be offset. The solution is as follows.
    • Check the version of your regional thermal layer. Currently, available regional thermal layer components include regional thermal layer v0.2.4 and later. If you use an earlier version of a regional thermal layer, you must delete the layer and add it again.
    • The data in the GeoJSON extraction tool has been updated. You must use the new GeoJSON data file.
    • Modify the values of one or more parameters.
      For example, the GeoJSON data of Zhaoqing City at the district and county level is marked with an offset in the text of Gaoyao District.
      1. Use the DataV.GeoAtlas boundary generator tool to upload the GeoJSON data file of Zhaoqing at the district and county level, and add customLabelPosition property parameters in the Property Sheet panel.

        In the Property Sheet panel, find the parameters in the Highlight section, edit and add a customLabelPosition attribute column, and add custom "customLabelPosition": [112.500801,22.927694] properties.

      2. After you save the modifications, download the GeoJSON file to your local computer and upload the GeoJSON file to your server or OSS to generate a new API.
      3. Choose Regional Thermal Layer > Data > Geo-boundary geojson Data Interface.
      4. Click Configure Data Source. In the Configure Data Source panel, set Data Source Type to API.
      5. Paste the newly generated JSON API URL into the data input area. After you configure the API URL, the markup in the Highlight and Highlight area is displayed as expected.
  • Thermal Value Interface

    You can customize the style of the regional heat layer by configuring the heat value data interface. The regional thermal layer supports data-first rendering.

    1. Choose Regional Thermal Layer > Data > Thermal Value Data Interface.
    2. Set Data Source Type to Static Data.

      Sample code in the preceding figure:

      [
        {
          "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
        }
      ]
      Table 1. Description
      FieldDescription
      area_idThe adcode of the region, which can be obtained by DataV.GeoAtlas.
      valueThe value of the area. It can be used together with the maximum, minimum, and no data configuration items values of the fill color in the configuration panel to control the color of the corresponding area.
      Note The range of the hexadecimal color values is calculated based on the range of values of the value properties in the data source.
      infoOptional. The content of the pop-up window.
    3. You can also configure fields such as color (line color), weight (line width), dashArray (dotted line), and fillColor (fill color) in the data source.

      The corresponding area in the map will be rendered according to the parameters you set. You can fillColor set parameters in the red, #fff000, and rgba(0,256,0,0.5) formats.

Table 2. Parameters
ParameterDescription
Controlled ModeIf you turn on the switch, data is not requested when a widget is initialized. Data requests are triggered only based on callback IDs or the method configured in Blueprint Editor. If you turn off the switch, data requests are automatically triggered. By default, the switch is turned off.
Auto Data RequestAfter you select the Auto Data Request check box, you can enable dynamic polling, and manually specify the polling interval. If you do not select this check box, data is not automatically requested. You must manually refresh the page to request data or use Blueprint Editor or callback ID events to trigger data requests.
Data SourceIn the right-side panel of Canvas Editor, click the Data tab. Click Set next to Static Data. In the Configure Datasource panel, select a data source from the Data Source Type drop-down list. Enter code for data query in the code editor, click Preview Data Response to preview the response of the data source, and then view the response. For more information, see Configure asset data.
Data FilterIf you select the Data Filter check box, you can convert the data structure, filter data, and perform simple calculations. If you click the plus sign (+) next to Add Filter, you can configure the script for the data filter in the editor that appears. For more information, see Use the data filter.
Data Response ResultThe response to a data request. If the data source changes, you can click the Refresh icon icon next to Data Response Result to view the data response in real time.

Interaction

Select the Enable check box to enable interactions between widgets. The Regional Thermal Layer component has interactive configurations. When you click an area, move the mouse to an area, or move the mouse out of an area, a data request is triggered and a callback value is thrown. This way, when you click an area, move the mouse to an area, or move the mouse out of an area, data in different areas is dynamically loaded. By default, the area_id value of the region that you click is returned. For more information, see Configure the callback ID of a widget.

Configure interactions in Blueprint Editor

  1. In Canvas Editor, click the Add to Blueprint Editor icon next to Regional Thermal Layer in the Basic Flat Map widget.
  2. Click the Blueprint Editor icon icon in the upper-left corner of the page.
  3. In the blueprint editor, click Choropleth Layer in the Added Nodes pane. You can configure parameters of the choropleth layer on the canvas.
    • Event
      EventDescription
      When a geo-boundary geojson data interface request is completedThe event that is thrown after the geo-boundary geojson data interface request is returned and processed by the filter. It also throws the processed JSON-formatted data. For specific data, see Data.
      When the heat value data interface request is completedThe event that is thrown after the heat value data interface request is returned and processed by the filter. It also throws the processed JSON-formatted data. For specific data, see Data.
      When you click a regionThe event parameter that is raised when you click an area in the regional heating layer and is sent to the downstream component for processing.
      Triggered by moving the mouse into a regionTriggers an event and throws data when the mouse moves into an area block in the area heat layer.
      Trigger when the mouse moves out of the regionTriggers an event and throws data when the mouse moves out of an area block in the area heat layer.
    • Policy Action
      ActionDescription
      Request geo-boundary geojson data interfaceThis action is performed to request the server data again. The data sent by an upstream data processing node or layer node is used as a parameter. For example, if the API data source is http://api.test and the data passed to the request geographic boundary geojson data interface is { id: '1'}, the final request interface is http://api.test?id=1.
      Request Heat Value InterfaceThis action is performed to request the server data again. The data sent by an upstream data processing node or layer node is used as a parameter. For example, if the API data source is http://api.test and the data passed to the Request Heat Value Data Interface is { id: '1'}, the final request interface is htp://api.test?id=1.
      Import geo-boundary geojson data interfaceAfter data of a widget is processed in accordance with its drawing format, the widget is imported for redrawing. You do not need to request server data again. For specific data, see Data.
      Import heat value dataAfter data of a widget is processed in accordance with its drawing format, the widget is imported for redrawing. You do not need to request server data again. For specific data, see Data.
      DisplayA widget is shown without the need to specify parameters.
      HideA widget is hidden without the need to specify parameters.