DocsICP FilingConsole
官方文档
首页

Dynamic track layer (v4.x)

更新时间：
复制 MD 格式
产品详情
我的收藏

This topic describes the configuration items of the dynamic track layer.

Chart style

The dynamic track layer is a sub-widget of Basic Flat Map 4.0. It supports independent style and data configurations to show the movement paths, change trends, or behaviors of objects or data points.

动态轨迹图

Style panel

image

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 search icon image in the upper-right corner of the Style panel. In the search panel, you can enter the name of a configuration item to quickly locate it. Fuzzy matching is supported. For more information, see Search for a configuration item.

  • Quick styles: The dynamic track layer sub-widget provides several quick styles. You can select a style as needed.

  • General: Configure the general settings for the dynamic track layer.

    Parameter

    Description

    Visible Level

    Set the visibility level of the dynamic track layer. The layer is visible within the specified level range and invisible outside it.

    Opacity

    Set the opacity of the dynamic track layer. The value ranges from 0 to 100%. A larger value makes the layer more opaque.

    Interaction Passthrough

    When enabled, widget interactions are disabled. The mouse pointer passes through the widget. This prevents the widget from blocking interactions with underlying widgets and helps improve interaction performance.

  • Graphic: Configure the graphic settings for the dynamic track layer. These include track line style, arrowhead style, and key point style.

    Parameter

    Description

    Track line style

    Set the dynamic track line style.

    • Line Type: Click the drop-down list to select a line type for the dynamic track.

    • Line Width: For more information, see Size mapper instructions to configure the line width of the dynamic track.

    • Flyline Color: For more information, see Color mapper instructions to configure the color mapping style for the dynamic track line.

    • Length: The percentage of the dynamic track line's total length to display. The total length is determined by Fly-out Interval and Flight Time. This value represents the display length ratio of the dynamic track line at the current fly-out frequency. The value range is 0 to 100, and the unit is percent (%).

    • Fly Time: The time it takes for the arrowhead to travel from the start point to the end point. The value ranges from 100 to 20,000 ms.

    • Fly-out Interval: The time from when the tail of the previous dynamic track line leaves the start point to when the next dynamic track line departs from the start point. The length of the dynamic track line relative to the distance from the start point to the end point is determined by Flight Time and Fly-out Interval. The larger the value of Fly-out interval/Flight time, the shorter the dynamic track line.

    • Animation Type: Select an animation type for the dynamic trajectory line, including Sync and Random.

    • Glow Effect: Set the glow effect for the dynamic track line, including glow radius and glow intensity.

    • Serif Style: Sets the line type, line width, and color of the serifs on the dynamic trajectory line.

    Line Cap

    Set the line cap style. Click the eye icon icon on the left to show or hide the Line Cap Style settings.

    • Line End Type: Can be set to Vector or Icon.

    • Vector Shape: Select a vector shape for the line cap style. This option is configurable only when Line Cap Type is set to Vector.

    • Color: Sets the color of the current vector shape. This setting is available only when Line End Type is set to Vector.

    • Radius: Set the radius of the current vector shape.

    • Outline Color: Sets the outline color of the current vector shape. This option is available only when Line Cap Style is set to Vector.

    • Outline Thickness: Sets the outline thickness for the current vector shape. The value can range from 0 to 5. The unit is px. This parameter is available only when Line Cap Type is set to Vector.

    • Icon Shape: Specifies the icon style for the line end. You can select a built-in icon style from the drop-down list, enter the URL of an image from a remote server, or click the Upload button icon to upload a local image. This option is available only when you select Icon for Line End Type.

    Key Point Style

    Set the key point style for the dynamic trajectory line. Click the eye icon icon on the left to show or hide the Key Point Style.

    • Display Mode: You can select Follow Track or Show All. In Follow Track mode, key points dynamically follow the track line, appearing when the line reaches a point and disappearing when it leaves. In Show All mode, all key points are permanently displayed.

    • Key Point Type: The type of key points for the dynamic trajectory line. You can select Vector or Icon.

    • Vector Shape: Select a line cap style for the vector shape. This parameter can be configured only when Keypoint Type is set to Vector.

    • Color: Sets the color of the current vector shape. This parameter can be configured only when Keypoint Type is set to Vector.

    • Radius: Set the radius of the current vector shape.

    • Outline Color: Sets the outline color for the current vector shape. This setting is available only when Keypoint Type is set to Vector.

    • Outline Thickness: Specifies the outline thickness of the current vector shape. The value ranges from 0 to 5. The unit is px. This setting is available only when Keypoint Type is set to Vector.

    • Icon Shape: The icon to use for the line endpoint. You can select a built-in icon from the drop-down list, enter the URL of an image from a remote server, or click the Upload button icon to upload a local image. This option is available only when Key Point Type is set to Icon.

  • Interaction: Configure the interaction settings for the dynamic track layer.

    Graphical interaction: On the preview or publish page, graphical interaction styles are displayed when you click or hover over map elements. Click the eye icon icon to the left of Graphical Interaction to enable or disable it.

    Parameter

    Description

    Click State

    Configure the graph and labels, and use the eye icon icon to confirm whether Graph Interaction is enabled in the clicked state.

    • Graphics: Configure the graphic style of the dynamic trajectory line for the Clicked State, including Trajectory Line Style, Line Cap Style, and Key Point Style.

    • Label: Configure the settings for the label of the dynamic trajectory line in the Clicked State. These settings include Show Label, Relative Position, Relative Offset, Content Style, and Background Style.

    Hover State

    Configure the graph and labels, and use the eye icon icon to confirm if the hover state is enabled for Graph Interaction.

    • Style: Configures the style of the dynamic trajectory line in the Hover State, including Trajectory Line Style, Line End Style, and Key Point Style.

    • Label: Configure the labels for the dynamic track line in the Hover State, including Show Label, Relative Position, Relative Offset, Content Style, and Background Style.

  • Label: Configure the style parameters for labels within the dynamic track layer.

    Parameter

    Description

    Show Label

    Turn on the switch to display label styles for the track line layer.

    Relative Position

    Set the label's position relative to the current point. Options include left, center, right, top, and bottom.

    Relative Offset

    Set the label's relative position parameters.

    Offset Method: The method for offsetting a tag. The available options are Static Field and Data Mapping.

    Offset: Sets the horizontal or vertical offset distance of the label bulletin board from its original center position. The value ranges from -100 to 100. The unit is px. This parameter can be configured only when Offset Method is set to Fixed Value.

    Horizontal Field: Specifies the horizontal field. This parameter is configurable only when Offset Method is set to Data Mapping.

    Vertical Field: Sets the vertical field. This parameter is available only when Offset Method is set to Data Mapping.

    Content Style

    Set the style of the content within the label.

    • Row Style: Click the image or image icon to the right of Row Style to add or delete a row content style. Click the image or image icon to configure the arrangement of multiple row content styles. Click the image icon to copy the currently selected content style and add a new one with the same configuration.

      • Row Field: The field name for the row content. It must match a field in the data panel.

      • Field Style: Set the row field style, including font style, font size, color, and weight.

      • Field Prefix: Set the content, spacing, font, font size, color, and weight for the field prefix. Click the eye icon icon to the left of Field Prefix to show or hide the Field Prefix style.

      • Field Suffix: Set the content, spacing, font, font size, color, and weight of the field suffix. Click the eye icon icon to the left of Field Suffix to toggle the visibility of the Field Suffix style.

    • Max Width: The maximum width of the label in px.

    • Line Height Ratio: The line height ratio for the label. The value ranges from 1 to 2.

    • Content Outline: Sets the color and thickness of the outline for the label content. Click the eye icon icon to the left of Content Outline to show or hide the Content Outline style.

    • Content Shadow: Sets the shadow of the label content, including its color, blur, X offset, and Y offset. Click the Eye icon icon to the left of Content Shadow to show or hide the Content Shadow style.

    Background Style

    Configure the background style parameters for labels in the dynamic trajectory line layer. Click the Eye icon icon to the left of Background Style to show or hide the Background Style settings.

    • Background Type: The type of background for the label, which can be Vector or Image.

    • Background Color: Sets the background color for the label. You can configure this option only when Background Type is set to Vector.

    • Border Style: The style of the label's border, including the line type, line width, and color. You can configure this setting only when Background Type is set to Vector.

    • Border Radius: Sets the border radius for the four corners of the label in px. This setting is available only when Background Type is set to Vector.

    • Image Template: The template style for the background image. This setting is available only when you select Image for the Image Template.

    • Opacity: Specifies the opacity of the background image. The value ranges from 0 to 100. This parameter is available only when Image Template is set to Image.

    • Content Margin: Set the margin values for the content from the top, bottom, left, and right edges of the label.

  • Conditions: Configure conditional styles.

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

    Graphic: Turn on the switch to configure the graphic settings for the conditional style. Turn off the switch to disable the graphic settings.

    Parameter

    Description

    Track line style

    Set the flyline style for the dynamic track line, including line type, line width, flyline color, length, fly time, fly-out interval, animation type, and glow effect. Use the 眼睛图标 icon to confirm whether to apply the current style when the condition is met.

    Serif Style

    Set the base line style for the dynamic track line, including line type, line width, and color. Use the 眼睛图标 icon to confirm whether to apply the current style when the condition is met.

    Line Cap Style

    Set the arrowhead style for the dynamic track line, including vector shape, color, radius, outline color, and outline thickness. Use the 眼睛图标 icon to confirm whether to apply the current style when the condition is met.

    Key Point Style

    Set the key point style for the dynamic track line, including display mode, key point type, vector shape, color, radius, outline color, and outline thickness. Use the 眼睛图标 icon to confirm whether to apply the current style when the condition is met.

Data Source panel

  • Track point data API

    Field

    Description

    trackId

    The ID of the track line on the map.

    pointId

    The ID of the track point on the map.

    keyPoint

    Specifies whether the track point is a key point.

    city

    The city where the track point is located.

    colorField

    Optional. The color mapping field for the dynamic track point.

    sizeField

    Optional. The size mapping field for the dynamic track point.

    iconField

    Optional. The icon mapping field for the dynamic track point.

    coordinate

    Optional. The coordinates of the dynamic track point.

    lng

    Optional. The longitude coordinate of the dynamic track point.

    lat

    Optional. The latitude coordinate of the dynamic track point.

  • Track line data API

    Field

    Description

    trackId

    The ID of the track line on the map.

    colorField

    Optional. The color mapping field for the dynamic track line.

    sizeField

    Optional. The line width mapping field for the dynamic track line.

    name

    Optional. The name of the dynamic track line

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 image 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 image icon on the right to check the current data response result, or click the image 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

image

Use the Advanced panel to configure interaction events or associate global variables to enable filter interactions between widgets. For more information, see Configure widget interactions.

Blueprint interaction

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

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

  3. View the Blueprint configuration parameters.

    image

    Note

    To view the tooltips for the event and action parameters, click the image icon in the anchor point configuration area on the right side of the canvas.

    • Events

      Event

      Description

      When the track line data API is updated

      Triggers an event and outputs data when the data response changes.

      When the request status of the track line data API changes

      Triggers an event and outputs data when the data request status changes, such as returning a success or failed status.

      When the track point data API is updated

      Triggers an event and outputs data when the data response changes.

      When the request status of the track point data API changes

      Triggers an event and outputs data when the data request status changes, such as returning a success or failed status.

      When a Point Is Clicked

      Triggers an event and outputs data when a dynamic track line in the layer is clicked.

      When an area outside the layer is clicked

      Triggers an event and outputs data when an area outside the layer is clicked.

      When the mouse moves over an element

      Triggers an event and outputs data when the mouse moves over an area of the layer.

      When the mouse moves out of an element

      Triggers an event and outputs data when the mouse moves out of an area of the layer.

      When the mouse moves on an element

      Triggers an event and outputs data when the mouse moves within an area of the layer.

      Component Loaded

      This event is triggered after the data API request is returned and processed by the filter. The event outputs the processed data in JSON format. For a data example, see the Data Response area on the Data Source tab in the widget's configuration panel on the right of the canvas editor.

      Track reaches a key point

      Triggers an event and outputs data when the track line reaches a key point.

      Track leaves a key point

      Triggers an event and outputs data when the track line leaves a key point.

  • Actions

    Action

    Description

    Import Trajectory Line Data API

    Processes data in the component's drawing format and imports it to redraw the component. This action does not require a new request for server-side data. 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 Trajectory Line Data API

    Sends a new request for server-side data. This action uses data from upstream data processing nodes or layer nodes as parameters. For example, if a dynamic trajectory layer has an API data source of https://api.test and the data passed to the Request Data action is { id: '1'}, the final request URL is https://api.test?id=1.

    Import Trajectory Point Data API

    Processes data in the component's drawing format and imports it to redraw the component. This action does not require a new request for server-side data. 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 Trajectory Point Data API

    Sends a new request for server-side data. This action uses data from upstream data processing nodes or layer nodes as parameters. For example, if a dynamic trajectory layer has an API data source of https://api.test and the data passed to the Request Data action is { id: '1'}, the final request URL is https://api.test?id=1.

    Clear Selected Elements

    Deselects the trajectory line.

    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 style configuration of a component. First, get the component configuration data by clicking Copy Configuration to Clipboard on the component's Style panel. Then, in the data processing node on the Blueprint Editor configuration page, change the values of the style fields as needed.
Previous：Basic polygon layer (v4.x)Next：Basic 2D map 3.0