Point aggregation layer (v2.x)-DataV(DataV)-阿里云帮助中心

The point aggregation layer is a sub-component of the basic flat map. It supports independent configuration of style, data, and interactions, including aggregation style, default icon style, series settings, and tooltip style. When you zoom into an aggregation, it resolves into individual scatter points that represent data at specific geographical locations. This document describes the configuration options for the point aggregation layer.

Important

This document covers the v2.x point aggregation layer sub-component. For documentation on the v1.x version, see Point Aggregation Layer (v1.x).

Click Point aggregation layer under Sub-component management to open the configuration panel and configure the style and data for the Point aggregation layer.

Note

If Point Aggregation Layer is not listed under Sub-component Management, you must first add the point aggregation layer sub-component. For more information, see Map Container (v2.x).

Configurations

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.
Visible Level: Sets the zoom level range at which the point aggregation layer is visible.

Aggregation Style: Sets the style of aggregated scatter points.

Parameter	Description
Aggregation Shape	The shape used for aggregations. Options are Circle and Hexagon.
Radius Mapping	If enabled, the radius of an aggregation shape is proportional to the number of scatter points it contains; use the Radius Range option to set the range. If disabled, use the Radius option to set a fixed radius.
Radius	The fixed radius of the aggregation shape. The value must be between 5 and 100 pixels. A larger radius includes more scatter points. This option is available only when Radius Mapping is disabled.
Radius Range	Drag the sliders to set the minimum and maximum radius for an aggregation shape. The value must be between 5 and 100 pixels. A larger radius includes more scatter points. This option is available only when Radius Mapping is enabled.
Fill Color	The fill color of the aggregation shape, defined by a Min Value and a Max Value. Min Value: The color for aggregations with the fewest points. For details on how to modify the color, see Color Picker. DataV determines this by calculating the number of scatter points within each aggregation's radius. Max Value: The color for aggregations with the most points. For details on how to modify the color, see Color Picker. DataV determines this by calculating the number of scatter points within each aggregation's radius.
Border Style	The color and width of the aggregation shape's border, in pixels.
Text Style	The font family, weight, size, color, and shadow for the text inside the aggregation shape. For details on how to modify the color, see Color Picker.

Default Icon: Configures the image, size, and position of the default icon for scatter points.

Parameter	Description
Image Path	In the Image Path section: To add a default icon, drag a local image into the area or click to select one. To remove the current image, hover over it and click Delete. To replace the current image, hover over it, click Change, and select a new local image. Alternatively, enter a URL to use a remote image.
Image Size	Sets the width and height of the default icon.
Relative Position	The position of the default icon relative to the scatter point. Options are Bottom and Center.
Offset	Sets the horizontal and vertical offset of the default icon.

Series Settings: Use the icons to add (), delete (), rearrange (, ), or duplicate () a series.
Type filter value: Corresponds to the type field in the data source and is used to map a type value to a specific style for scatter points.
Set the icon style for each series type. For more information, see the default icon parameter in configurations.

Tooltip: Customizes the tooltip that appears when you interact with a scatter point icon in preview or on the published page. Click the icon to the left of Tooltip to show or hide the tooltip.

Note

To enable the pop-up feature, you must first set the info field.

Info field: Click the switch to enable the info field and set the info field as the pop-up content. This field supports HTML tags. If the switch for the info field is disabled, the content of the name and value fields is used as the pop-up content.
Event Type: The event that triggers the tooltip. Options are Click or Mouse Enter.

Configuration Options: The styling options for the tooltip. You can select Parent Container Default or Custom Configuration.

Parent Container Default: Uses the system's default style.

Custom Configuration: Allows you to customize the tooltip's text style, line height ratio, border radius, and other parameters.

Parameter	Description
Text Style	Sets the font family, weight, size, color, and shadow for the text inside the tooltip. For details on how to modify the color, see Color Picker.
Line Height Ratio	Sets the line height ratio for the tooltip content.
Border Radius	Sets the border radius of the tooltip. A larger value creates more rounded corners.
Padding	Sets the distance between the tooltip text and the four edges of the tooltip.
Background Color	Sets the background color of the tooltip.
Close Button	Sets the color, size, and distance from the top and right edges for the close button.

Interaction Settings

Parameter	Description
Hover Style	Click the icon to the left of Hover Style to enable or disable the hover interaction. When enabled, you can set the fill color and the size ratio for the aggregation icon when a user hovers over it. The effect is only visible in preview or on the published page.
Click to Focus	Drag the slider to set the zoom-in ratio when a user clicks an aggregation icon. The effect is only visible in preview or on the published page.

Data

Table 1. Field descriptions

Field	Description
lng	The longitude of the scatter point.
lat	The latitude of the scatter point.
type	(Optional) Use this field with the Series Settings to define different icon styles for scatter points. Note If a series value is not configured or if a point's type does not match any configured series, the Default Icon style is used.
value	In the data panel, you can customize the value, name, or info fields to specify the information for the pop-up annotation of a point.
name
info

Table 2. Configuration option descriptions
Parameter	Description
Controlled Mode	When enabled, the component does not request data upon initialization. Data requests can only be initiated through a callback ID or methods configured in the Blueprint Editor. When disabled, you can use the automatic update request feature. This option is disabled by default.
Automatic Update Request	When selected, you can set a polling interval to automatically refresh data. If unselected, data is not automatically updated. You must manually refresh the page or trigger a data request through the Blueprint Editor or a callback ID event.
Data Source	Click Configure Data Source to open the Set Data Source panel. In this panel, you can change the data source type, modify data queries, and preview the data response. For more information, see Configure Asset Data.
Data Filter	A data filter allows for data transformation, filtering, and simple calculations. Click Add Filter to configure a data filter script in the Set Data Source panel. For more information, see Use Data Filters.
Data Response	Displays the response from the data request. When the data source changes, click the icon to view the latest data response in real time.

Interaction

Table 3. Interaction description

Interaction	Description
When a point is clicked	Select Enable to enable the component's interaction feature. The point aggregation layer sub-component has interaction settings. When you click a scatter point, a callback value is returned. By default, this value consists of the lng and lat fields from the data. For more information, see Component callback ID configuration.
When the mouse enters a point	Select Enable to turn on the component interaction feature. The point aggregation layer sub-component has interaction settings. When you hover over a scatter point, the sub-component emits a callback value. By default, this value contains the lng and lat fields from the data. For more information, see Component Callback ID Configuration.

Blueprint Editor interaction configuration

On the canvas editor page, in the Sub-component Management list for the Basic Flat Map, click the icon next to Point Aggregation Layer.
Click the icon in the upper-left corner of the page.

In the Blueprint Editor, click the Point Aggregation Layer component in the import node list. The configuration parameters for the point aggregation layer appear on the canvas.

Events

Event	Description
When data request is successful	Emitted after a data request succeeds and the response is processed by a data filter. The processed data is passed with the event. For a data example, see the Data Response section in the Data tab of the component configuration panel.
When data request fails	Emitted when a data request fails (for example, due to a network or API error). The response is processed by a data filter, and the resulting data is passed with the event. For a data example, see the Data Response section in the Data tab of the component configuration panel.
When a point is clicked	Emitted when a user clicks a scatter point. The event passes the point's longitude and latitude data.
When the mouse enters a point	Emitted when a user hovers over a scatter point. The event passes the point's longitude and latitude data.

Actions

Action	Description
Request Data	This action re-requests data from the server, and uses the data output by upstream data processing nodes or layer nodes as parameters. For example, if a point aggregation layer has its API data source configured as `http://api.test`, and the data passed to the request data action is `{ id: '1'}`, the final request URL is `http://api.test?id=1`.
Update Data	Updates the component with new data, bypassing a server request. The provided data must conform to the required format. For a data example, see the Data Response section in the Data tab of the component configuration panel.
Show	Shows the component. No parameters are required.
Hide	Hides the component. No parameters are required.