Area heatmap layer (v1.x)

Configuration

• 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 Configurations.

• Label

  • Label field: The label field for the region. It must match a field name in the geographic data.

  • Color: The color of the label. See Color picker instructions to change the color.

  • Shadow color: The shadow color of the label.

  • Font: The font family of the label.

    Note

    Select a font that is installed on your system. If the selected font is not available, the component uses a default font.

  • Font size: The size of the label text.

• Fill color: The colors for regions that correspond to the maximum, minimum, and null values in the data.

• Border options: The color, width, and dash style for the borders of each area in the area heatmap layer.

• Interaction configuration

  • Hover: The color of the area on hover. This effect is visible only in preview or after publishing.

  • Show Tooltip: Turn on to show tooltip information. Turn off to hide tooltip information.

  • Click to focus: Turn on the switch to enable the click-to-focus feature.

  • Focus Scope Ratio: The focus range of the clicked area.

  • Callback ID: A variable that links data between components. You must set this variable to a specific field in the data.

    Note

    This feature has been moved to the Interaction panel. The feature in the Configuration panel will be deprecated. Please upgrade as soon as possible. The new version of the interaction feature supports configuring multiple fields.

Data

• Geographic boundary GeoJSON API: You can configure this API to apply extracted regional GeoJSON boundary data to DataV. The configuration method is as follows.

  1. Extract data.

     Use the DataV.GeoAtlas tool to extract GeoJSON administrative division boundaries. You can extract data down to the district and county level.

     • Provincial level: By default, the area heatmap layer displays data for all provinces and municipalities in the Chinese mainland. You can use this data directly.

     • City level: The following figure shows how to extract boundary data for all prefecture-level cities in Zhejiang Province.

     • District/County level: The following figure shows how to extract boundary data for all districts and counties in Zhaoqing.

     • Township/Sub-district and custom areas: You must obtain township and sub-district level data yourself. You can also define custom regions by merging existing boundaries. For example, you can merge provincial boundaries to create larger regions, such as Eastern, Western, Southern, Northern, and Central China.

  2. Apply the data.

     1. Select Area Heatmap Layer > Data > Geographic Boundary GeoJSON API.

     2. Click Configure Data Source. In the Set Data Source dialog box, set Data Source Type to API.

     3. Paste the extracted JSON API into the data input field.

        The preceding figure shows the extracted boundary information for sub-regions of Zhaoqing. The following is an example API.

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

     4. Publish the large-screen project to view the configured area heatmap layer.

  You might encounter label offset issues during data configuration. The following steps describe how to resolve them.

  • Check your area heatmap layer version. This feature is available in v0.2.4 and later. If you are using an earlier version, 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 files.

  • Modify parameters.

    For example, in the district-level GeoJSON data for Zhaoqing City, the text label for Gaoyao District is offset.

    1. Use the DataV.GeoAtlas boundary generator tool to upload the district- and county-level GeoJSON data file for Zhaoqing City, and then in the properties pane, add the customLabelPosition parameter.

       In the properties pane, find the parameters for Gaoyao District. Edit the parameters to add a new customLabelPosition property with the custom attribute "customLabelPosition": [112.500801,22.927694].

       Figure 1. Modify attributes

       Figure 2. View modified attributes

    2. After saving the changes, download the GeoJSON file to your local machine. Then, upload it to your own server or to OSS to get a new URL.

    3. Select area heatmap layer > data > geographic boundary GeoJSON API.

    4. Click Configure Data Source, and in the Set Data Source panel, set Data Source Type to API.

    5. Paste the updated JSON API address into the data input area. After the configuration is complete, the Gaoyao District label is displayed correctly.

• Heat Value Data API

  You can customize the appearance of the area heatmap layer by configuring a heat value data API. This data source provides values that determine the color of each area.

  1. Select Area Heatmap Layer > Data > Heat Value Data API.

  2. Set Data Source Type to Static Data. The parameters are described as follows.

     Table 1. Field descriptions

     Field	Description
     area_id	The adcode of the area. You can obtain it by using DataV.GeoAtlas.
     value	This value determines the area's color based on the maximum, minimum, and null color settings in the configuration panel. Note The component calculates a color gradient from maximum to minimum based on the range of value fields in the data.
     info	(Optional) The content of the tooltip.

     Table 2. Configuration item descriptions

     Parameter	Description
     受控模式	When enabled, the component does not request data on initialization. Data requests must be triggered by a callback ID or the Blueprint Editor. This mode is disabled by default.
     自动更新请求	Enables automatic data polling at a specified interval. If disabled, updates must be triggered by a page refresh, a callback ID event, or the Blueprint Editor.
     Data source	Click Configure Data Source to modify the data source type and data query code, preview the results returned by the data source, and view the data response in the Set Data Source panel. For more information, see Configure Asset Data.
     Data Filter	Data filters provide data structure transformation, filtering, and simple calculation functions. Click Add Filter to configure a data filter script in the Set Data Source panel. For more information, see Filter Usage Instructions.
     Data response	Displays the data response. When the data source changes, click the icon on the right to view the updated response.

  3. You can also configure fields in the data source, such as color (line color), weight (line width), dashArray (dashed line), and fillColor (fill color).

     The corresponding area on the map is rendered based on the parameters that you set. The fillColor parameter supports values in three formats: red, #fff000, and rgba(0,256,0,0.5), as shown in the following figure.

Interaction

Select Enable to activate the component's interaction feature. The Area heatmap layer sub-component has interaction configurations that trigger a data request and emit a callback value to dynamically load data for different areas when you click an area, move the mouse pointer into an area, or move the mouse pointer out of an area. By default, the area_id value of the clicked area is emitted. For more information, see Component callback ID configuration.

Blueprint Editor interaction configuration

1. On the canvas editor page, in the basic flat map sub-component management list, click the icon to the right of the area heatmap layer.

2. Click the icon in the upper-left corner of the page.

3. On the Blueprint Editor configuration page, click the Area Heatmap Layer component in the Import Nodes bar. In the canvas, you can see the Blueprint Editor configuration parameters for the area heatmap layer, as shown in the following figure.

   • Events

     Event	Description
     When the geographic boundary GeoJSON API request is completed	Triggered after the geographic boundary GeoJSON API request succeeds and any data filters are applied. The event passes the processed data in JSON format.
     When the heat value data API request is completed	Triggered after the heat value data API request succeeds and any data filters are applied. The event passes the processed data in JSON format.
     When you click a region	Triggered when a user clicks an area. The event data can be passed to downstream components.
     Mouse Hover Trigger	Triggered when the cursor enters an area. The event passes data about that area.
     Mouse Out Trigger	Triggered when the cursor leaves an area. The event passes data about that area.

   • Actions

     Action	Description
     Request geographic boundary GeoJSON API	The data returned by an upstream data processing node or layer node is used as parameters to re-request data from the server. For example, if an area heatmap layer is configured with the API data source as http://api.test, and the data passed to the request geographic boundary GeoJSON API action is { id: '1'}, then the final request URL is http://api.test?id=1.
     请求热力值数据接口	Re-requests data from the server, passing the data output from an upstream data processing node or a layer node as a parameter. For example, if an area heatmap layer is configured with the API data source as http://api.test, and the data passed to the Request Heat Value Data API action is { id: '1'}, the final request URL is http://api.test?id=1.
     Import geographic boundary GeoJSON API	Updates the component with incoming data without sending a new request to the server. The data is processed to fit the required format before the component is redrawn.
     导入热力值数据接口	Updates the component with incoming data without sending a new request to the server. The data is processed to fit the required format before the component is redrawn.
     Display	Shows the component. No parameters are required.
     Hide	Hides the component. No parameters are required.