DataV:frame-animation-layers-of-v3-x

Chart style

The frame animation layer is a subcomponent of the base flat map 3.0. You can use custom frame animation types to mark specific points on the map.

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.

• General: Configure the general settings of the frame animation layer.

  Metric	description
  Visible Level	Sets the visible level range. The layer is visible within the specified range and hidden outside it.
  Opacity	The opacity of the frame animation layer, in %. Valid values: 0 to 100. A larger value indicates a more opaque layer.

• Graphics: Configure the graphics settings of the frame animation layer.

  Metric	description
  Dynamic Shape	Select the animated image style. You can select one of the five built-in styles from the Style drop-down list. You can also enter the URL of a frame animation image in the input box to use a remote image, or click the icon to upload a local frame animation image.
  Dynamic Size	Set the width and height of the animated image. Valid values: 0 to 400. Unit: pixels.

• Dynamic Effect: Drag the slider to set the playback speed of the frame animation. Valid values: 0 to 2.

• Label: Configure the label style of the frame animation layer.

  Metric	description
  Show Label	Turn on this switch to display labels on the frame animation layer.
  Display Mode	The trigger mode for displaying labels. Valid values: Click and Hover.
  Relative Position	The position of the label relative to the animation point. Valid values: Left, Center, Right, Top, and Bottom.
  Relative Offset	The horizontal and vertical offset of the label. Unit: px. Valid values: -100 to 100.
  Content Style	Configure the content style for the label. Click the or icon on the right side of Style per Line to add or delete a line style. Click the or icon to adjust the arrangement of multiple content styles. Click the icon to duplicate the selected content style. Row Field: The name of the row field, which must match a field in the data panel. Field Style: Specify the font style, font size, color, and weight of the row field. Field Prefix: Specify 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 prefix. Field Suffix: Specify the content, spacing, font, font size, color, and weight of the field suffix. Click the icon to the left of Field Suffix to show or hide the suffix. Field Width: The width of the field displayed on the label. Valid values: Adaptive and Fixed Width. Unit: pixels. Row High Ratio: The row height ratio of the label. Valid values: 1 to 2. Content Stroke: The stroke style of the label content, including the color and weight. Click the icon to the left of Content Stroke to show or hide the stroke. Content Shadow: The shadow style of the label content, including the shadow color, blur value, and X/Y offset. Click the icon to the left of Content Shadow to show or hide the shadow.
  Background Style	Configure the background style of labels in the frame animation layer. Click the icon to the left of Background Style to show or hide the background. Background Type: The type of the label background. Valid values: Vector and Image. Background Color: Set the background color of the label. This parameter is available only when Background Type is set to Vector. Border Style: Set the border style of the label, including the line type, line width, and color. This parameter is available only when Background Type is set to Vector. Border Fillet: The border radius of the label. Unit: pixels. This parameter is available only when Background Type is set to Vector. Image Template: Select a template style for the background image. This parameter is available only when Image Template is set to Image. Opacity: The opacity of the background image. Valid values: 0 to 100. This parameter is available only when Image Template is set to Image. Content Margin: The padding between the label content and the label border.

• Interactive: Configure the interaction settings of the frame animation layer.

  • Graphic Interaction: The interaction effect that appears when you click a frame animation on the preview or published page. Click the icon to the left of Graphic Interaction to show or hide this setting.

    Size Scale: Drag the slider to set the size scale of the animated graphic. Valid values: 1 to 2.

• Condition: Configure conditional styles for the frame animation layer.

  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: Turn on this switch to configure the graphic settings for a conditional style. Turn off the switch to disable graphic configuration.

    Metric	description
    Dynamic Shape	Select a dynamic image style. You can select one of the five built-in styles from the Style drop-down list. You can also enter the URL of a frame animation image in the input box to use a remote image, or click the icon to upload a local frame animation image.
    Dynamic Size	Set the width and height of the dynamic image in this condition. Valid values: 0 to 400. Unit: px.

  • Dynamic Effect: Drag the slider to set the playback speed of the animation under this condition. Valid values: 0 to 2.

• Custom dialog box style: Configure the custom dialog box for the frame animation layer.

  Metric	description
  Bomb switch	Turn on this switch to enable the pop-up, which can be triggered by click or hover.
  Display Mode	The trigger mode for displaying the pop-up. Valid values: Click and Hover.
  Relative Offset	The horizontal and vertical offset of the pop-up. Valid values: -1000 to 1000. Unit: pixels.
  Text Style	Set the text style in the dialog box, including the font, font size, color, and weight.
  Display null values	Turn on this switch to display "No Data" in the pop-up for objects without an info field or with an empty info field.
  Box Style	Padding: The padding between the pop-up text and the top, bottom, left, and right borders. Border Style: The border radius, line width, and color of the pop-up border. Background Color: Set the background color of the dialog box. Projection Style: The blur color, blur radius, X offset, and Y offset of the pop-up shadow. Close Button: Turn on this switch to display a close button in the pop-up. You can also configure the button color. Pointing Arrow: Turn on this switch to display a pointing arrow on the pop-up.

Data Sources panel

Advanced Panel

Turn on this switch to enable widget interactions. You can click or hover over a frame animation point to trigger a data request and pass temporary variables for dynamically loading data. By default, the lng and lat values of the clicked point are returned. For more information, see Component interaction configuration.

Blueprint Interaction

1. Click the icon in the upper-left corner to go to the Blueprint page.

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

3. View blueprint configuration parameters.

   • Event

     Event	Description
     When the data interface request is completed	This event is triggered after a data interface request is responded to and processed by a filter. The processed JSON data is returned. For specific data examples, see the Data Response Result section on the Data Source tab in the right-side configuration panel.
     When you click a point	Triggered when a frame animation point is clicked.
     When the mouse moves in	Triggered when the mouse moves over a frame animation point on the map. The point data is returned.

   • Action

     Action	Description
     Request Data Interface	Requests server data again. Data from an upstream data processing node or layer node is used as a parameter. For example, if the API data source is https://api.test and the data passed to request data interface is { id: '1'}, the final request URL is https://api.test?id=1.
     Import data	Imports pre-processed data for the widget to redraw without requesting server data again. For specific data examples, see the Data Response Result section on the Data Source tab in the right-side configuration panel.
     Switch Display /Hide	Toggles the visibility of the widget. No parameters are required.
     Display	Displays 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	Hides 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 }
     Update component configurations	Dynamically updates the style configurations of the widget. In the Style panel, click Copy Configuration to Clipboard to obtain the widget configuration data. Then modify the style field for the data processing node in Blueprint Editor.