flying-routes-layers - DataV - Alibaba Cloud Documentation Center

This topic describes the meaning of each configuration items of the flying routes layer.

Chart style

The flying line layer is a sub-component of the basic flat map 4.0. It supports independent styles and data configurations. It can represent OD data between two points in a geographic location in the form of flying lines. It can be used to display related information between the two places, such as logistics and transactions. 飞线(2)

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 Flying Route Layer sub-widget provides the quick style feature. You can select a style based on your business requirements.

General: specifies the general configuration items of the flying route layer.

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

Graphics: Set the graphics configuration items of the flying line layer, including the flying line style, line head style, start point bubble style, and drop point bubble style.

Metric	description
Flying Routes Style	Sets the style of the flying line. Line Type: Select a line type from the drop-down list. Line width: For more information about how to configure the line width of a flying line, see Dimension mapper. Flying Routes Color: Configure the color pattern of the flying routes. For more information, see Use the color mapper. Length: indicates the percentage of the flying line length at the current flight interval and flight time. The value ranges from 0 to 100. Unit: %. Radian: Drag the slider to set the radian of the flight line. Valid values: 0 to 1. Flight Time: indicates the time from the start point to the end point of the flying line. Valid values: 100 to 5000. Unit: ms. Departure Interval: indicates the time between the departure of the tail of the previous flying line and the departure of the next flying line from the start point. The length of the flying line relative to the distance from the start point to the end point is determined by Flight Time and Departure Interval. The larger the value of Departure Interval /Departure Interval, the shorter the flying line. The value ranges from 10 to 3000. Animation Type: Select the animation type of the flying line. Valid values: Sync and Random. Glow Effect: the lighting effect of the flying line, including the floodradius and luminous intensity. Serif Style: specifies the style of the serif under the flying line, including the line type, width, and color of the serif.
Head Style	Sets the style of the flying line head. Click the icon to the left of Head Style to control the display of Head Style. Line Head Type: the type of the line head. Valid values: Vector and Icon. Vector Shape: Select a vector shape. By default, Flare is selected. This parameter is available only when you select Vector for Head Type. Color: the color of the current vector shape. This parameter is available only when you select Vector for Head Type. Radius: specifies the radius of the current vector shape. Stroke Color: Set the stroke color of the current vector shape. This parameter is available only when you select Vector for Head Type. Stroke weight: Set the stroke weight of the current vector shape. The value ranges from 0 to 5. Unit: pixels. This parameter is available only when you select Vector for Head Type. Icon Shape: Select an icon style. 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 an image in the input box of the drop-down panel to use the image on the remote server as the icon. You can also click the icon on the right of the input box to upload a local image as the icon. This parameter is available only when you select Icon for Head Type.
Start Bubble	Sets the style of the flying line start point bubble. Click the icon on the left to control the visibility of the start bubble. Bubble radius: Set the bubble radius of the start bubble. For more information, see Use the size mapper. Icon Avoidance: The icon controls whether to enable the icon avoidance feature to prevent icons from overlapping each other. 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 of the starting point bubble. You can click the drop-down list next to Style to select a variety of built-in icon styles. You can also specify the URL of the input 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 type of bubble animation, including Synchronization and Custom. Synchronization indicates that the bubble breathing animation is synchronized with the flying line animation. If you select Custom, you can set a custom speed. The speed 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.
Bubble	Sets the style of the flying route drop point bubble. Click the icon on the left to control the visibility of the drop bubble. Bubble radius: Specify the bubble radius of the bubble. For more information, see Use the size mapper. Icon Avoidance: The icon controls whether to enable the icon avoidance feature to prevent icons from overlapping each other. 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 of the bubble. You can click the drop-down list next to Style to select a variety of built-in icon styles. You can also enter the URL of an 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. Valid values: 0 to 1. Animation: animates the bubble breathing. Type: the type of animation for the bubble, including Rotation, Breathing, Fading, Glow, and Diffuse. Speed: the type of the bubble animation. Valid values: Sync and Custom. Synchronization indicates that the bubble breathing animation is synchronized with the flying line animation. If you select Custom, you can set a custom speed. Valid values: 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. Valid values: 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 parameter is available only when you set the Animation Type parameter to Fade. Glow Color: the color of the bubble. You can set this parameter when you set the Animation Type parameter to Glow. Luminous Intensity: Specify the luminous intensity of the bubble. Valid values: 1 to 5. Configurable when you select Glow for Animation Type. Luminous Radius: Specify the luminous radius of the bubble. Valid values: 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.

Interaction: the interaction configuration items of the flying route layer.
- 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.
  - Highlight Color: the highlight color of the fly-by-fly line during interaction.

Label: specifies the style of the label in the flying route layer.

Metric	description
Show Label	If you turn on the switch, the label style is displayed on the flying routes layer.
Display Mode	The display mode of the tag at the flying routes layer. You can select Click or Hover.
Indication line	Set the label indicator line style, including the line style based on the end of the flying line, the proportion of horizontal lines, and the line style. End Offset: specifies the horizontal and vertical offset of the indicator line based on the end point of the flying line. The range is -500 to 500. The unit is px. Horizontal Line Proportion: Set the horizontal line proportion of the indicator line, ranging from 0 to 100. Line Style: specifies the line type, line thickness, and line color.
Background Style	Set the background style parameters for the tags in the flying route layer. Click the icon to the left of the Background Style parameter to control the display of the Background Style parameter. 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: specifies the rounded corners of the label border in four directions. 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. Background Shadow: the background shadow style of the label, 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 the Background Shadow to control the visibility of the Background Shadow. Content Margin: Specify the distance between the content in the tag and the content in the tag.
Start Label	Sets the content style of the start label of the flying line layer. 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. The name must match the field name in the geographic data. 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: Specify the maximum width of a single line displayed by the label. Unit: pixels. The display mode of the excess content is determined by the text overflow configuration items. Text Overflow: the method that is used to resolve text overflow in the tag, including Cut and Line break. 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.
Label	Set the content style of the landing point label of the flying route layer. 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. The name must match the field name in the geographic data. Field Style: Specify the style of the line field, including the font style, font size, color, and weight of the field. Field Prefix: specifies 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. Maximum Width: Specify the maximum width of a single line displayed by the label. Unit: pixels. The display mode of the excess content is determined by the text overflow configuration items. Text Overflow: specifies how to resolve text overflow in the tag, including cutting and line breaking. 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.

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 with the same configuration. 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
Flying Route Style	Set the flying line style of the flying line, including the line type, line width, flying line color, and length. You can use the icon to check whether the current style is applied when the current conditions are met.
Serif Style	Set the serif style of the flying line, including the line type, line width and length. You can use the icon to check whether the current style is applied when the current conditions are met.
Head Style	Set the thread header style of the flying line, including the icon shape and radius of the thread header. You can the icon to check whether the current style is applied when the current conditions are met.

Data Sources panel

Column	Description
`geometry`	The spatial coordinate data of the flying line in the map.
`name`	Optional. The name of the flying line.
`value`	Optional. The value of the flying line.
`id`	Optional. The ID of the flying route.
`colorField`	Optional. The color mapping field of the flying line.
`sizeField`	Optional. The linewidth mapping field of the flying line.

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

Interaction	Description
When a flying line is clicked	Turn on the switch to enable the associated global variable feature. A temporary variable is thrown when a flying line is clicked. By default, the `lng` and `lat` fields in the data are thrown. For more information, see Component interaction configuration.
When the mouse moves into a flight	Turn on the switch to enable the associated global variable feature. The temporary variable is thrown when the mouse moves into the flying line. By default, the `lng` and `lat` fields in the data are thrown. 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.

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 a flying line is clicked	The event that is raised when you click a flying line at the flying routes layer. The event also raises the longitude and latitude data items corresponding to the flying line.
When the mouse moves in	The event that is thrown when the mouse moves into a flying line at the flying line layer. The event also throws the longitude and latitude data items corresponding to the flying line.

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, 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`.
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.