The area thermal layer is a sub-component of the basic flat map. It supports independent styles, data, and interaction configurations, including the labeling, color, border, mouse interaction events, and location information of the area. It can represent the area information on the geographical location in the form of a thermal area. 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.

Settings

Settings tab
  • 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 widget configuration items.
  • Visibility Level: specifies the visibility level of the thermal layer.
  • Area Style: Set the area fill color and edge style of the heat layer.
    Parameter Description
    Fill Color The color of the area corresponding to the largest, smallest, and empty value values in the data.
    Stroke Style The color, thickness, and line type of each regional edge of the regional heat layer.
  • Label: Set the dimension display fields and text style parameters of the heatlayer area. Click the Eye icon icon on the left of a label to control the display and concealment of a label.
    Parameter Description
    Displayed Field The label field of the region. It needs to match the field name in the geographic data.
    Text Style For more information about the font family, text thickness, font size, color, and shadow color of text labels in each area of the area heat layer, see the color picker description for color modification.
    Note Only fonts that are installed on the system are displayed. If the selected font is not installed, the default font is displayed.
  • Popup Info: On the preview or publish page, click the pop-up box that appears in the section. Click the Eye icon icon on the left of the pop-up box to control the display and concealment of the pop-up box.
    Note To enable the pop-up feature, you must first set the info field.
    • info Field: Click the switch to turn on the info field, and set the info field as the content of the pop-up window. You can configure html tags for this field. If you turn off the info field switch, the content of the compatible name and value field is used as the content of the pop-up window.
    • Trigger Action: Select the type of the event to be displayed in the dialog box by using the Click or Mouseover.
    • Configuration Options: the configuration items content of the dialog box. You can select parent or custom.
      • parent: the default style.
      • custom: You can customize the text style, line height ratio, and fillet radius of the dialog box.
        Parameter Description
        Text Style Set the font, text weight, font size, and color of the text in the dialog box. For more information, see color picker description for color modification.
        Row-Height to Font-Size Ratio Specifies the high proportion of rows in the popup format.
        Border Radius Set the fillet radius value of the dialog box. The larger the value, the more rounded the fillet.
        Padding Set the distance between the text in the box and the four sides of the box.
        Background Color Sets the background color of the popup.
        Close Button Set the color, size, distance of the button from the top, and distance from the right side of the closed pop button.
  • Interaction Options
    Parameter Description
    Style on Hover You can click the Eye icon icon on the left of Style on Hover to enable or disable the hover interaction feature. After you turn on this switch, you can set the fill color, edge color, and thickness of the area when you move the pointer over. The effect can be seen only during preview or release.
    Click to Focus Click the Eye icon icon on the left to control whether to enable or disable the focus interaction function. When it is enabled, click the area. A certain range of proportions of focus will be performed based on the location of the area. The effect can only be seen during preview or release.

Data

Regional Thermal Layer Data Panel v2.x
  • Interface of GeoJSON Boundary Data: You can configure the geo-boundary geojson data interface to apply the extracted geo-boundary geojson data to DataV.
  • Choropleth Data Interface

    You can configure the heat value data interface to customize the style of the heat layer in a region. The regional heat layer supports data-first rendering.

    1. On the Data tab of the Choropleth Layer component, click Choropleth Data Interface.
    2. Click Set. In the Set Data Source panel, set Data Source Type to Static Data. The following table describes the parameters. Thermal value data interface v2.x

      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. Parameters
      Log field Description
      area_id The adcode number of the region.
      name The name of the region.
      value The value of the region. It is used in conjunction with the maximum, minimum, and no data configuration items of the fill color in the configuration panel to control the color of the corresponding region.
      Note The range of the hexadecimal color values is calculated based on the range of values of the value properties in the data source.
      info Optional. The content of the pop-up window.
    3. You can also configure fields such as strokeColor (line color), weight (line width), dashArray (dashed line), and fillColor (fill color) in the data source.

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

Table 2. Parameters
Parameter Description
Controlled Mode If 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 Request After 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 Source In 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 widget data.
Data Filter If 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 Result The 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 Choropleth Layer component has interactive configurations. When you click a region, move the pointer over a region, or move the pointer over a region, a data request is triggered and a callback value is thrown. This way, when you click, move the pointer over a region, or move the pointer over a region, you can dynamically load data in different regions. By default, the area_id value of the clicked area is thrown. For more information about the configuration, see Component callback ID configuration.

Configure interactions in Blueprint Editor

  1. On the Canvas Editor page, click the Add to Blueprint Editor icon to the right of the Choropleth Layer in the Basic Plat Map subcomponent management list.
  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. Regional Heat Layer Blueprint Editor Parameter v2.x
    • Event
      Event Description
      On Completion of Interface of GeoJSON Boundary Data Request The geo-boundary geojson data interface requests the events that are returned after being processed by the filter, and the processed JSON-formatted data is also thrown. For more information about specific data examples, see the Data Response Result section on the Data tab of the canvas editor.
      On Completion of Choropleth Data Interface Request The thermal value data interface requests the events that are thrown after being processed by the filter, and the processed JSON-formatted data is also thrown. For more information about specific data examples, see the Data Response Result section on the Data tab of the canvas editor.
      On Failure of Interface of GeoJSON Boundary Data Request When a geo-boundary geojson data interface request fails, the event is returned and processed by the filter, and the processed JSON-formatted data is also thrown. For more information about specific data examples, see the Data Response Result section on the Data tab of the canvas editor.
      On Failure of Choropleth Data Interface Request When a thermal value data interface request fails (the request may be caused by network problems or interface errors, etc.), the event is returned and processed by the filter, and the processed JSON format data is also thrown. For more information about specific data examples, see the Data Response Result section on the Data tab of the canvas editor.
      On Click of Area Thrown when you click an area in the area heat layer.
      On Moving Pointer into Area. When the mouse moves into an area block of the thermal layer of the area, an event is triggered and data is thrown.
      On Moving Pointer Out of Area An event is triggered and data is thrown when the mouse moves out of an area block of the area heat layer.
    • Action
      Action Description
      Request Interface of GeoJSON Boundary Data This 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 configured as http://api.test and the data passed to the Request Interface of GeoJSON Boundary Data action is { id: '1'}, the final request interface is http://api.test?id=1.
      Request Choropleth Data Interface This 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 configured as http://api.test in the area heat layer, and the data passed to the action of the Request Choropleth Data Interface is { id: '1'}, the final request interface is htp://api.test?id=1.
      Import Interface of GeoJSON Boundary Data After 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 more information about specific data examples, see the Data Response Result section on the Data tab of the canvas editor.
      Import Choropleth Data Interface After 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 more information about specific data examples, see the Data Response Result section on the Data tab of the canvas editor.
      Show A widget is shown without the need to specify parameters.
      Hide A widget is hidden without the need to specify parameters.