symbol aggregation layer basic configuration-DataV(DataV)-阿里云帮助中心

Configure the symbol aggregation layer, including symbol size, color, annotations, and interaction behavior.

Chart style

The symbol aggregation layer is a sub-widget of Basic Flat Map 4.0 that displays the distribution density of geographic points as aggregated symbols. You can independently configure the layer's styles and data, including symbol size, color, and annotations. {6F9001E4-D1CC-43B6-95D1-ED3DFB6CB468}

Style panel

Note

When you configure interaction effects, the configurations for click and hover display modes are visible only in preview, publish, or interaction mode.

Search Configuration: Click the 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 symbol aggregation layer sub-widget provides several quick styles. You can select a style for your application.

General: Set the general configuration items for the symbol aggregation layer.

Parameter	Description
Visible Level	The zoom level range in which the layer is visible.
Opacity	The opacity of the layer. Valid values: 0 to 100%. Higher values make the layer more opaque.

Graphic: Set the graphic configuration items for the symbol aggregation layer.

Parameter	Description
Aggregation Shape	The aggregation style. Valid values: Vector and Symbol. Note Vector shapes support outlines. Symbol shapes do not support outlines or color changes.
Vector Shape	The shape for vector aggregation. Select a built-in shape or provide a custom shape URL. Available only when Aggregation Shape is set to Vector.
Symbol Shape	The shape for symbol aggregation. Select a built-in shape or provide a custom shape URL. Available only when Aggregation Shape is set to Symbol.
Shape Radius	The shape radius for vector aggregation. For more information, see Use the size mapper to configure the mapped radius for different symbols.
Fill Color	The fill color for vector aggregation. For more information, see Use the color mapper to configure the mapped color for different symbols.
Vector Outline	The color and thickness of the outline for vector aggregation. Valid values: 0 to 5 px. Available only when Aggregation Shape is set to Vector.
Aggregation Annotation	The text style for aggregation annotations, including font, weight, size, and color.
Single Point Icon	The style of a single (non-aggregated) symbol point icon. Icon Shape: Set the shape style of the single point icon. For more information, see Use the shape mapper to configure the mapped shape for different symbols. Icon Size: Drag the slider to set the size of the single point icon. The value ranges from 0 to 400 px. Relative Position: Set the position of the icon relative to the symbol point. Options are Bottom and Center. Relative Offset: Set the horizontal and vertical offset of the icon. The value ranges from -100 to 100 px.

Label: Set the style parameters for labels in the symbol aggregation layer.

Parameter	Description
Show Label	Enable this option to show labels on the symbol aggregation layer.
Display Method	The label display mode. Valid values: Show All, Click, and Mouseover.
Relative Position	The position of the label relative to the symbol. Valid values: Left, Center, Right, Top, and Bottom.
Relative Offset	The horizontal and vertical offset of the label. Valid values: -100 to 100 px.
Content Style	The content style for labels. Row Style: Click the or icon to the right of Row Style to add or delete a row content style. Click the or icon to configure the display layout for multiple row content styles. Click the icon to copy the configuration of the currently selected content style and add a new row content with the same configuration. Line Field: The field name for the line content. This must match a field in the data panel. Field Style: Set the style for the line field, including font, size, color, and weight. Field Prefix: Set the content, spacing, font, font size, color, and weight of the field prefix. Click the icon to the left of Field Prefix to show or hide the Field Prefix style. Field Suffix: Sets the content, spacing, font, font size, color, and weight. Click the icon to the left of Field Suffix to show or hide the style settings for Field Suffix. Max Width: The maximum width of a single label line in pixels. Content exceeding this width wraps to the next line. Line Height Ratio: The line height ratio for the label. Valid values: 1 to 2. Content Outline: Sets the outline style for the label content, including the color and thickness. Click the icon to the left of Content Outline to show or hide the Content Outline settings. Content Shadow: Sets the style for the label's content shadow, including its color, blur value, and x and y offsets. Click the icon to the left of Content Shadow to show or hide the Content Shadow settings.
Background Style	The background style for labels. Click the icon to the left of Background Style to show or hide the Background Style settings. Background Type: The label background type. Valid values: Vector and Image. Background Color: The background color of the label. Available only when Background Type is set to Vector. Border Style: The border style of the label, including line type, width, and color. Available only when Background Type is set to Vector. Border Radius: The border radius for the four corners of the label, in pixels. Available only when Background Type is set to Vector. Image Template: The template for the background image. Available only when Image Template is set to Image. Opacity: The opacity of the background image. Valid values: 0 to 100. Available only when Image Template is set to Image. Content Padding: The padding between the label content and the top, bottom, left, and right borders.

Interaction: Configure interaction for the symbol aggregation layer.

In preview or publish mode, graphic interaction styles appear when you click or hover over a map element. Click the icon to the left of Graphic Interaction to enable Graphic Interaction.

Parameter

Description

Click State

The click focus, graphic, and label styles. Use the icon to enable or disable the Graphic Interaction click state.

Click Focus: The focus range when a symbol is clicked. Drag the slider to adjust. Valid values: 1 to 5.
Graphic: Set the graphic style for the symbol aggregation layer in the Click State. This includes Aggregation Shape, Vector Shape, Symbol Shape, Shape Radius, Fill Color, Vector Outline, Aggregation Annotation, and Single Point Icon.
Label: Set the label style for the symbol aggregation layer in the Click State. This includes Show Label, Relative Position, Relative Offset, Content Style, and Background Style.

Mouseover State

The graphic and label styles. Use the icon to enable or disable the Graphic Interaction mouseover state.

Graphic: Set the graphic style for the symbol aggregation layer in the Mouseover State. This includes Aggregation Shape, Vector Shape, Symbol Shape, Shape Radius, Fill Color, Vector Outline, Aggregation Annotation, and Single Point Icon.
Label: Set the label style for the symbol aggregation layer in the Mouseover State. This includes Show Label, Relative Position, Relative Offset, Content Style, and Background Style.

Condition: Configure conditional styles.

Conditional Style: Click the or icon on the right to add or delete a conditional style. Click the or icon to arrange multiple conditional styles. Click the icon to copy the current conditional style configuration and add a new one with the same settings. For more information about style configurations, see Use the condition tree.

Graphic: Turn on this switch to configure the graphic items for the style. Turn it off to disable the configuration.

Parameter	Description
Icon Shape	Set the shape style of the icon. Use the icon to confirm whether to apply the current style when the condition is met.
Icon Size	Drag the slider to set the size of the icon. The value ranges from 0 to 400 px. Use the icon to confirm whether to apply the current style when the condition is met.
Relative Position	Set the position of the icon relative to the symbol point. Options are Bottom and Center. Use the icon to confirm whether to apply the current style when the condition is met.
Relative Offset	Set the horizontal and vertical offset of the icon. The value ranges from -400 to 400 px. Use the icon to confirm whether to apply the current style when the condition is met.

Custom Pop-up Style: Set the style parameters for custom pop-ups in the symbol aggregation layer.

Parameter	Description
Pop-up Switch	Enable this option to trigger a pop-up on Click or Mouseover.
Display Method	The pop-up trigger mode. Valid values: Click and Mouseover.
Relative Offset	The horizontal and vertical offset of the pop-up, in pixels. Valid values: -1000 to 1000 px.
Text Style	The text style within the pop-up, including font, size, color, and weight.
Show Empty Value	Enable this option to display "No data" in a pop-up for objects with no `info` field or an empty `info` field. If the switch is off, no pop-up appears for data without an `info` field.
Pop-up Style	Padding: The top, right, bottom, and left padding for text in the pop-up. Border Style: The border radius, width, and color of the pop-up. Background Color: The background color of the pop-up. Shadow Style: The color, blur radius, X offset, and Y offset of the pop-up shadow. Close Button: Enable this option to display a close button on the pop-up and set its color. Pointer Arrow: Enable this option to display a pointer arrow on the pop-up.

Data source panel

Field	Description
`lng`	The longitude of the symbol point.
`lat`	The latitude of the symbol point.
`popupType`	Optional. The pop-up type. This requires custom development.
`info`	Optional. The custom pop-up content. HTML snippets are supported.
`iconField`	Optional. The shape mapping field for the symbol 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 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 icon on the right to check the current data response result, or click the 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

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

Blueprint interaction

Click the icon in the upper-left corner of the page to go to the Blueprint page.
On the Layer Node tab, add the current widget to the main canvas.

View the Blueprint configuration parameters.

Events

Event	Description
When Data Is Updated	Triggered when the data response changes. Outputs the updated data.
When 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 of the widget's configuration panel in the canvas editor.
When a Point Is Clicked	Triggered when a point in the symbol aggregation layer is clicked. Outputs the point data.
When an Area Outside the Layer Is Clicked	Triggered when an area outside the layer is clicked. Outputs data.
When Mouse Enters an Element	Triggered when the mouse enters a layer element. Outputs the element data.
When Mouse Leaves an Element	Triggered when the mouse leaves a layer element. Outputs data.
When Mouse Moves over an Element	Triggered when the mouse moves over a layer element. Outputs data.
Component Loaded	Triggered after the data API request returns and the filter processes the data. Outputs the processed data in JSON format. For a data example, see the Data Response Result area on the Data Source tab of the widget's configuration panel in the canvas editor.

Actions

Action	Description
Import data	Imports data in the component's format and redraws the component without re-requesting data from the server. For a data example, see the Data Response area on the Data Source tab in the component's configuration panel in the canvas editor.
Request data	Re-requests data from the server, using data from an upstream processing or layer node as request parameters. For example, if a symbol aggregation layer has its API data source set to `https://api.test`, and the data passed to the Request data action is `{ id: '1'}`, then 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's style configuration. Click Copy Configuration to Clipboard on the component's Style panel to get the configuration data, then modify the style field values in the data processing node on the blueprint editor's configuration page.