Grid Aggregation Layer (v4.x)

更新时间:
复制 MD 格式

Configure the style, data, and interaction settings of the Grid Aggregation Layer.

Chart style

The Grid Aggregation Layer is a sub-widget of Basic Flat Map 4.0 that aggregates points into grids to visualize point density across geographical locations. You can configure grid size, color, and labels.image

Style panel{70B2ADC8-1E98-4621-82F6-96B5CD0297D7}

  • Search Configuration: Click the image icon in the upper-right corner of the Style panel to search for configuration items by name. Fuzzy matching is supported. Search for a configuration item.

  • Quick Styles: The Grid Aggregation Layer sub-widget provides preset styles that you can apply directly.

  • General: Configure general settings for the Grid Aggregation Layer.

    Parameter

    Description

    Visibility Level

    Set the visibility level for the Grid Aggregation Layer. The layer is visible only within the specified level range.

    Opacity

    Set the layer opacity. Valid values: 0 to 100%. Higher values make the layer more opaque.

  • Graphics: Configure graphics settings for the Grid Aggregation Layer.

    Parameter

    Description

    Grid type

    Select a grid type. Options include Standard, Honeycomb, and Circle.

    Aggregate function

    Select an aggregate function. The map recalculates and updates its display based on the selected function. Available functions include but are not limited to COUNT, SUM, AVG, MAX, and MIN.

    Aggregation radius

    Specify the aggregation radius based on actual map distance. Valid values: 0 to 1000 km.

    Grid size

    Set the size of the grid. For more information, see Use the size mapper to configure the mapping size styles for different grids.

    Grid color

    Set the color style of the grid. For more information, see Use the color mapper to configure the mapping color styles for different grids.

    Grid outline

    Set the color and thickness of the grid outline based on the current grid radius. Thickness valid values: 0 to 50.

    Grid shadow

    Set the color, blur, and horizontal or vertical offset of the grid shadow relative to the grid centroid.

    Grid label

    Click the 眼睛图标 icon on the left to show or hide the grid label style.

    Text style: Set the font, font weight, font size, and color of the label text.

Data Source panel{1342943E-D0F0-4213-979A-0535227B4787}

Field

Description

lng

The longitude of the grid point.

lat

The latitude of the grid point.

value

(Optional) The aggregation weight value of the grid point.

Data Item Configuration

Description

Data Source

The component's data source displays the data fields contained within the component using code editing or visual editor. You can also modify the data type to flexibly configure the component's data.

Data Mapping

When you need to customize chart field configurations, you can set different field mappings in the Data Mapping module to map these fields to the corresponding fields of the component. This allows for real-time data matching without altering the data source fields. Additionally, click the image icon to configure field styles individually.

Filter

Open the Filter to select an existing data filter or create a new one, and configure the data filter script to achieve data filtering capabilities. For more information, see manage data filters.

Data Response Result

This feature displays the component's data in real-time. When the component's data source changes, the data response result will display the latest data accordingly. In case of a delayed system response, you can click the image icon on the right to check the current data response result, or click the image icon on the right to obtain the most recent data for the component. You can also click to view examples to see sample response results for the current component.

Disable Loading State

Check the check box to hide the loading content during component updates and data dashboard previews. Unchecking will display the loading content. The default setting is unchecked.

Controlled Mode

Check the check box to prevent data requests upon the component's initialization. Data requests will only be initiated through global variables or methods configured in the blueprint editor. Unchecking allows for automatic update requests. The default setting is unchecked.

Automatic Update Request

Check the check box to manually set the polling frequency for dynamic polling. Clearing this option disables automatic updates, requiring manual page refreshes or data request triggers through the blueprint editor and global variable events for updates.

Advanced panel

{62F5B4A4-51B9-4FBB-88F3-8ADF9D60D409}

Configure interaction events or associate global variables for filter interactions between widgets. Configure widget interactions.

Blueprint interaction

  1. Click the image icon in the upper-left corner of the page to open the Blueprint page.

  2. On the Layer Nodes tab, add the current widget to the main canvas.

  3. View the Blueprint configuration parameters.image

    Note

    Click the image icon in the anchor point area on the right to view event and action parameter tooltips.

    • Events

      Event

      Description

      When data is updated

      Triggered when the data response result changes, and returns the updated data.

      When data request status changes

      Triggered when the data request status changes. The callback parameter is the current status. For a data example, see the Data response result area on the Data Source tab in the widget's configuration panel.

      Component Loaded

      Triggered after a data API request is returned and processed by a filter. Returns the processed data in JSON format. For a data example, see the Data Response area on the Data Source tab in the widget's configuration panel.

    • Actions

      Action

      Description

      Import Data API

      Processes data into the format required by the component, then imports the data to redraw the component without re-requesting data from the server. Data example:

      [
        {
          "lng": 126.75, // longitude 
          "lat": 42.95, // latitude 
          "value": 22 // aggregation weight value
        }
      ]

      Request Data API

      Re-requests data from the server. Data from an input data processing node or a layer node is used as a parameter. For example, if a grid aggregation layer has its API data source set to https://api.test and the data passed to the Request Data API action is { id: '1'}, the final request URL is https://api.test?id=1.

      Toggle Visibility

      The Toggle Visibility, Show, and Hide actions do not require parameters by default. You can add animation configurations as needed. See the data example.

      {
        // Animation type. Optional values: appear|fade|slideToUp. The default is fade. If left blank, there is no animation.
        "animationType": "fade",
        // Animation duration. The default is 1000 ms.
        "animationDuration": 1000,
        // Animation curve. Optional values: linear|easeInOutQuad|easeInOutExpo. The default is linear.
        "animationEasing": "linear"
      }

      Show

      Hide

      Update Component Configuration

      Dynamically updates the component style configuration. To obtain the configuration data, go to the Style panel and click Copy Configuration to Clipboard. Then modify the style field values as needed in the data processing node on the blueprint editor page.