animated-bubbles-layer - DataV - Alibaba Cloud Documentation Center

This topic describes the meaning of each configuration items of the animated bubbles layer.

Chart style

The animated bubbles layer is a subcomponent of the basic planar map 4.0, and supports independent styles, data, and interaction configurations, including the size, animation effect, bubble type, longitude and latitude of a breathing bubble, and can represent point data information on a geographic location in the form of a breathing bubble. HUXI

Style Panel

Search Configuration: Click the Search configuration items icon in the upper-right corner of the Style panel. In the Search Configuration panel, enter the name of the configuration items that you want to search for and locate the configuration items. Fuzzy match is supported. For more information, see Search configuration items.
Quick Style: The Breath Bubble Layer subwidget provides a quick style. You can select a style based on your business requirements.

General: Set the general configuration items of the animated bubbles layer.

Metric	description
Visible Level	Set the visibility level value of the animated bubbles layer, which is animated bubbles layer visible within the specified level range and invisible outside the level.
Opacity	The opacity of the animated bubbles layer. Valid values: 0 to 100. Unit: %. The larger the value, the more opaque the layer.

Graphics: Set the graphics configuration items of the animated bubbles layer, including the shape style, radius size style, and bubble color style.

Metric	description
Bubble radius	For more information about how to configure the radius of the bubble, see Use the size mapper.
Relative Offset	The horizontal and vertical offset values of the bubble center. The offset value ranges from -100 to 100. Unit: px.
Specify the rotation angle	The rotation angle of the bubble relative to the center point of the bubble.
Bubble Style	Click the or icon next to Bubble Style to add or delete a bubble style. Click the or icon to configure a page layout with multiple bubble styles. Click the icon to copy the currently selected style configuration and add a bubble style with the same configuration. Shape: the icon style in the animated bubbles layer. You can click the drop-down box next to Style to select a variety of built-in icon styles. You can also enter the URL of the image in the input box of the drop-down panel to use the image on the remote server as the bubble icon. You can also click the icon on the right of the input box to upload a local image as the bubble icon. Color: the color of the bubble. For more information, see Color mapper. Size Scale: Set the scale of the bubble relative to the configuration items icon generated based on the bubble radius. The scale ranges from 0 to 1. Animation: animates the bubble breathing. Type: the type of animation for the bubble, including Rotation, Breathing, Fading, Glow, and Diffuse. Speed: specifies the execution time of the bubble animation. The value ranges from 500 to 5000. Unit: ms. Delay: specifies the animation delay of the bubble. Valid values: 0 to 1000. Unit: ms. Zoom Range: Specify the zoom range of the bubble. The range is from 1 to 5. You can configure this parameter when you select Breathing for Animation Type. Transparency Range: Drag the slider to set the transparency range of the bubble. The transparency range is from 0 to 100. This function is available only when you set the Animation Type field to Fold. Glow Color: Set the color of the bubble. You can set this parameter when you set the Animation Type parameter to Glow. Luminous Intensity: the luminous intensity of the bubble. Valid values: 1 to 5. Configurable when you select Glow for Animation Type. Luminous Radius: specifies the luminous radius of the bubble. The value ranges from 0 to 20. Configurable when Glow is selected for Animation Type. Size Correction: If the glowing edges of an image are abnormally aligned, adjust this parameter to adjust the size. The range is from -1 to 1. Configurable when Glow is selected for Animation Type. Diffusion Multiplier: Set the diffusion multiplier of the bubble relative to the icon that is generated based on the configuration items of the bubble radius. Valid values: 1 to 5. This parameter is available if you set the Animation Type parameter to Diffuse.

Label: Set the style parameters of the label in the animated bubbles layer.

Metric	description
Show Label	Turn on the switch to animated bubbles layer Show Label Style.
Display Mode	The display mode of the animated bubbles layer label. Valid values: Click and Hover.
Relative Position	The relative position of the animated bubbles layer label. Valid values: Left, Center, Right, Top, and Bottom.
Relative Offset	The horizontal and vertical offsets of the animated bubbles layer tag. Unit: pixels. Valid values: -100 to 100.
Content Style	Sets the content style of the animated bubbles layer label. Click the or icon next to Bubble Style to add or delete a style for each row. Click the or icon to configure the display layout with multiple content styles per line. Click the icon to copy the current selected content style configuration and add a new line of content with the same configuration. Row Field: the name of the row field, which must match the field in the data panel. Field Style: Specify the style of the line field, including the font style, font size, color, and weight of the field. Field Prefix: Specify the content, interval, font, font size, color, and weight of the field. Click the icon to the left of Field Prefix to control the display of Field Prefix. Field Suffix: specifies the content, interval, font, font size, color, and weight of the field suffix. Click the icon to the left of Field Suffix to control the value of Field Suffix. Maximum Width: specifies the maximum width of a single line to be displayed. Unit: pixels. If the field content exceeds the maximum width, the line will automatically wrap. Row High Ratio: the row high ratio of the tag. Valid values: 1 to 2. Content Stroke: the content stroke style of the tag, including the color and weight of the stroke. You can click the icon to the left of Content Stroke to control the appearance or concealment of the Content Stroke. Content Shadow: the content shadow style of the tag, including the shadow color, shadow blur value, and shadow offset value in the x and y directions. You can click the icon to the left of Content Shadow to control the visibility of Content Shadow.
Background Style	Set the background style parameters of the tag in the animated bubbles layer. Click the icon to the left of the background style to control the appearance and concealment of the background style. Background Type: the type of the background of the tag. You can select Vector or Image. Background Color: Specify the background color of the tag. This parameter is available only when you set Background Type to Vector. Border Style: Set the border style of the label, including the line type, line width, and color of the border. This parameter is available only when you set the Background Type parameter to Vector. Border Fillet: the rounded corners of the label border. Unit: pixels. This setting is available only when you select Vector for Background Type. Image Template: Select a template style for the background image. This option is available only when you select Image for Image Template. Opacity: the opacity of the background image. Valid values: 0 to 100. This parameter is available only when you select Image for Image Template. Content Margin: Specify the distance between the content in the tag and the content in the tag.

Interaction: animated bubbles layer interaction configuration items.
- Graphic Interaction: On the Preview or Publish page, click the graphical interaction style that appears in the bubble. You can click the icon on the left to enable the Graphic Interaction feature.
  - Size: Drag the slider to set the size range of the bubble. Valid values: 1 to 2.

Condition: the description of the condition style.

Conditional Style: Click the or icon to add or remove a conditional style. Click the or icon to configure the arrangement style of multiple conditional styles. Click the icon to copy the selected conditional style configuration and add a conditional style. For more information about how to configure a conditional tree, see Usage notes.

Graphic: If you turn on the switch, you can configure the graphic configuration items of the style. If you turn off the switch, you cannot configure the graphic configuration items of the style.

Metric	description
Bubble radius	Set the radius of the breathing bubble. You can use the icon to check whether the current style is applied when the current conditions are met.
Specify the rotation angle	The rotation angle of the bubble relative to the bubble center. You can use the icon to check whether the current style is applied when the bubble meets the current conditions.
Bubble Style	Click the or icon next to Bubble Style to add or delete a bubble style. Click the or icon to configure a page layout with multiple bubble styles. Click the icon to copy the currently selected style configuration and add a bubble style with the same configuration. Shape: the icon style in the animated bubbles layer. You can click the drop-down box on the right of Style to select a variety of built-in icon styles. You can also enter the URL of the image in the input box of the drop-down panel to use the image on the remote server as the bubble icon. You can also click the icon on the right of the input box to upload a local image as the bubble icon. You can the icon, confirms whether the current style is applied if the current condition is met. Color: specifies the color style of the bubble. You can use the icon to check whether the current style is applied when the bubble meets the current conditions. Size Scale: Set the scale of the bubble relative to the configuration items icon generated based on the bubble radius. The scale ranges from 0 to 1. You can the icon to check whether the current style is applied when the current conditions are met. Animation: sets the bubble breathing animation. You can use the icon to check whether the current animation style is applied when the current conditions are met. Type: the type of animation for the bubble, including Rotation, Breathing, Fading, Glow, and Diffuse. Speed: specifies the execution time of the bubble animation. The value ranges from 500 to 5000. Unit: ms. Delay: specifies the animation delay of the bubble. The value ranges from 0 to 1000. Unit: ms. Zoom Range: Set the zoom range of the bubble. The range is from 1 to 5. This can be configured when you select Breathing for Animation Type. Transparency Range: Drag the slider to set the transparency range of the bubble. The transparency range is from 0 to 100. This function is available only when you set the Animation Type field to Fold. Glow Color: Set the color of the bubble. You can set this value when you set Animation Type to Glow. Luminous Intensity: the luminous intensity of the bubble. The value ranges from 1 to 5. Configurable when you select Glow for Animation Type. Luminous Radius: Set the luminous radius of the bubble, which ranges from 0 to 20. Configurable when you select Glow for Animation Type. Size Correction: If the glowing edges of an image are abnormally aligned, adjust this parameter to adjust the size. The range is from -1 to 1. Configurable when you select Glow for Animation Type. Diffusion Multiplier: Set the diffusion factor of the bubble relative to the icon generated based on the configuration items of the bubble radius. The value ranges from 1 to 5. This parameter is available if you set the Animation Type parameter to Diffuse.

Custom dialog box style: Set the custom dialog box in the animated bubbles layer.

Metric	description
Bomb switch	If you turn on the switch, you can click or hover to trigger the pop-up.
Display Mode	The display mode of the animated bubbles layer pop-up box. You can select Click or Hover.
Relative Offset	The horizontal and vertical pixel offsets of the pop-up window. Valid values: -1000 to 1000. Unit: pixels.
Text Style	Set the text style in the dialog box, including the font style, font size, color, and weight of the text.
Display Nullable Values	If you turn on the switch, the pop-up box can be displayed as "no data" on the object without `info` fields or empty `info` fields. if you turn off the switch, the corresponding pop-up box will not pop up for the data without `info` fields.
Box Style	Padding: specifies the distance between the content of the popup text and the top, bottom, left, and right sides. Border Style: Set the rounded corners, line width, and color of the popup border. Background Color: Set the background color of the dialog box. Projection Style: specifies the blur color, blur radius, X offset, and Y offset of the pop-up projection. Close Button: If the switch is turned on, the animated bubbles layer popup box displays the close button and the color of the button. Pointing Arrow: If you turn on the switch, a pointing arrow is displayed in the animated bubbles layer dialog box.

Data Sources panel

Column	Description
`lng`	The longitude of the bubble.
`lat`	The latitude of the bubble.
`popupType`	Optional. The type of the pop-up window. This parameter must be used with the secondary development feature.
`info`	Optional. The custom content of the pop-up window.
`name`	Optional. The name of the bubble.
`value`	Optional. The value of the bubble.
`id`	The ID of the bubble.
`colorField`	Optional. The color mapping field of the bubble.
`radiusField`	Optional. The radius mapping field of the bubble.

Configure data items	Description
Data sources	You can use the code editor or visual editor to view the data fields contained in the widget. You can also modify the data type to flexibly configure the component data.
Data Mapping	If you need to customize chart field configurations, you can set different field mapping content in the Data Mapping module and field mapping these content to the corresponding fields of the widget. This allows you to match data without modifying the fields in the data source. You can also click the icon to configure the field style.
Configure a filter	Turn on Filter, select an existing data filter or create a data filter, and configure a data filter script to filter data. For more information, see Manage data filters.
Data Response Result	The Data Response Result section displays widget data in real time. If the data source of the widget changes, this section displays the latest data. If the system response is delayed, you can click the icon on the right to view the data response result. You can also click the icon on the right to obtain the latest data of the widget. You can also click View Example to view an example of the response result of the current component.
Forbid Loading	If you select the check box, you will not see the loaded content during component initialization when you update the component and preview the data kanban. If you select the check box, the opposite is true. By default, the status is deselected.
Controlled Mode	If you select the check box, the component does not request data in the initialized state, and only requests data by using global variables or the method configured in Blueprint Editor. If you clear the check box, you can use automatic update to request data. By default, the status is deselected.
Auto Data Request	Select the check box to manually enter the time frequency of polling to set dynamic polling. If you clear the page, the page is not automatically updated. You need to manually refresh the page or use Blueprint Editor and global variable events to trigger a request to update data.

Advanced Panel

Turn on the switch to enable the associated global variable function. When you click a bubble point or move the mouse into a bubble, a data request is triggered and a temporary variable is thrown. This way, data in different areas is dynamically loaded when you click or move the mouse into a bubble. By default, the lng and lat values of the clicked area are displayed. For more information, see Component interaction configuration.

Blueprint Interaction

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

In the View blueprint configuration parameters.

Event

Event	Description
When the data interface request is completed	The event is triggered with the processed JSON data after a data interface request is responded and processed by a filter. For more information about specific data examples, see the Data Response Result section of the Data Source tab in the right-side configuration panel of the canvas editor.
When you click on the bubble	Thrown when you click to animated bubbles layer a bubble.
When the mouse moves into the bubble	Triggers an event and throws data when the mouse moves into a bubble in the animated bubbles layer.

Action

Action	Description
Import 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 of the Data Source tab in the right-side configuration panel of the canvas editor.
Request 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, animated bubbles layer the API data source is `https://api.test` and the data transferred to the request data interface is `{ id: '1'}`, the final request interface is `https://api.test?id=1`.
Switch Display /Display	Specifies whether to show or hide a widget. No parameters are required.
Display	Display the widget. For more information, see Data example. `{ "animationType": "",// The animation method. Valid value: fade. If you do not specify this parameter, no animation is generated. "animationDuration": 1000,// The animation delay. Unit: ms. "animationEasing": ""// animation curve }`
Hide	Hide the component. For more information, see Data example. `{ "animationType": "",// The animation method. Valid value: fade. If you do not specify this parameter, no animation is generated. "animationDuration": 1000,// The animation delay. Unit: ms. "animationEasing": ""// animation curve }`
Update component configurations	Style configurations of widgets are dynamically updated. In the Style panel, click Copy Configuration to Clipboard to obtain the configuration data of the widget. After that, change the style field for the data processing node in Blueprint Editor.