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

Chart style

Frame animation layers are a subcomponent of the base flat map 3.0, with the ability to use custom frame animation graph types to mark specific point effects 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: Sets the general configuration items of the frame animation layer.

  Metric	description
  Visible Level	Sets the visible level value of the frame animation layer, which is visible within the set level range and invisible outside the level.
  Opacity	The opacity of the animation layer at the frame, in %, from 0 to 100. The larger the number, the more opaque the animation layer.

• Graphics: Sets the graphics configuration items of the frame animation layer.

  Metric	description
  Dynamic Shape	Select the style of the animated image. You can click the drop-down box next to Style to select one of the five built-in styles. You can also enter the URL of the frame animation image in the input box of the drop-down panel to use the frame animation image on the remote server as the animated image. You can also click the icon on the right of the input box to upload a local frame animation image as the animated 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 dynamic effect of the frame animation layer. The value range is from 0 to 2.

• Label: specifies the style parameters of the label in the frame animation layer.

  Metric	description
  Show Label	If you turn on the switch, the frame animation layer displays the label style.
  Display Mode	The display mode of the frame animation layer label. Valid values: Click and Hover.
  Relative Position	The relative position of the label of the animation layer. Valid values: Left, Center, Right, Top, and Bottom.
  Relative Offset	Specifies the relative horizontal and vertical offset values of the labels of the frame animation layer. Unit: px. Valid values: -100 to 100.
  Content Style	Sets the content style for the label of a frame animation layer. Click the or icon on the right side of Style per Line to add or delete a style for each line. Click the or icon to configure the arrangement of multiple content styles per row. Click the icon to copy the selected content style and add a content style 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: Specify 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. Field Width: the width of the field that is displayed on the label, including the adaptive type of the field. Valid values: Adaptive and Fixed Width. Set the width of the field based on the adaptive type. Unit: pixels. 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 for the tags in the frame animation layer. Click the icon to the left of the Background Style parameter to control the appearance and concealment of the Background Style parameter. Background Type: the type of the tag background. Valic values: Vector and Image. Background Color: Set 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 feature is available only when you select Vector for Background Type. Border Fillet: the rounded corners of the label border. Unit: pixels. This parameter is available only when you set the Background Type parameter to Vector. Image Template: Select a template style for the background image. This parameter 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.

• Interactive: The interactive configuration items of the frame animation layer.

  • Graphic Interaction: The graphic interaction style that appears when you click a frame animation on the Preview or Publish page. Click the icon on the left of Graphic Interaction to control the display of Graphic Interaction.

    Size Scale: Drag the slider to set the size range of the animated graphic. 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
    Dynamic Shape	Select a dynamic image style. You can click the drop-down box next to Style to select one of the five built-in styles. You can also enter the URL of the frame animation image in the input box of the drop-down panel to use the frame animation image on the remote server as the dynamic image. You can also click the icon on the right of the input box to upload a local frame animation image as the dynamic 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 layer under this condition. The value range is from 0 to 2.

• Custom dialog box style: Specify the custom dialog box in the animation 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 frame animation layer popup. 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 null values	If you turn on the switch, the pop-up box can be displayed as "No Data" on an object with no info field or an empty info field.
  Box Style	Padding: specifies the distance between the content of the popup text and the top, bottom, left, and right sides. Border Style: 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 you turn on the switch, the Close button and the color of the button are displayed in the pop-up box of the animation layer. Pointing Arrow: If you turn on the switch, a pointing arrow is displayed in the pop-up box of the animation layer.

Data Sources panel

Advanced Panel

Turn on the switch to enable the widget interaction feature. You can click a frame animation point and move the mouse into a frame animation point to trigger a data request and throw temporary variables to dynamically load data in different areas when you click or move the mouse into a frame animation point. By default, the lng and lat values of the clicked area are displayed. 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	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 a point	Thrown when a frame animation point of a frame animation layer is clicked.
     When the mouse moves in	Trigger an event and throw data when the mouse moves into a frame animation point on the map.

   • Action

     Action	Description
     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, if the API data source is https://api.test and the data passed to the request data interface is { id: '1'}, the final request interface is https://api.test?id=1.
     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.
     Switch Display /Hide	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.