Flying route layer (v2.x version)-DataV(DataV)-阿里云帮助中心

The flying routes layer is a subcomponent of the basic flat map that visualizes origin-destination (OD) data as animated flying lines between two geographic points. Use it to display associations between locations, such as logistics routes and transaction flows.

Important This guide covers the v2.x Flying Routes Layer. For the v1.x version, seeFlying route layer (v1.x version).

Click Flying Routes Layer under Components. The Settings tab of Flying Routes Layer appears.

Note If Components does not contain Flying Routes Layer, add the Flying Routes Layer component. For more information, see Map container (v2.x).

Parameter

Search for Configurations: In the right-side panel of Canvas Editor, click the Settings tab, and click Search for Configurations in the upper-right corner. Enter the required configuration item in the search box, and click the search icon to quickly locate the configuration item. Fuzzy match is supported. For more information, see Search for Configurations.
Visible Level: the visibility level of the flying routes layer. The layer is visible only when the map is zoomed to the specified level.

Flying Route Style: You can configure the start color, end color, gradient, and length of a flying route.

Parameter	Feature
Start Color	The color of the starting point of the flying route. For more information, see color picker description.
End Color	The end color of the flying route.
Flying Routes Gradient	The color interpolation between the start and end colors of the flying route. Valid values: 1 to 10.
Flying Route Length	The length of the flying route. Valid values: 10 to 120.
Flying line thickness	The thickness of the flying route. Valid values: 0 to 20.
Path Points	The number of constituent points of the flying route. Valid values: 100 to 400.
Height Scale	The flying route height ratio. Valid values: 0.5 to 5.
Fly-out Frequency	The frequency of flying routes. Unit: number of lines per frame.
flight rate	The flight speed of the flying route. Valid values: 1 to 10.

Flare Style: configures the color and size of the flare. Click the

icon to the left of the flare style to control the display of the flare style.

Parameter	Feature
Color	The flare color of the flying route.
Size	The size of the flare. Valid values: 0 to 20.

Bubble Style: configures the color, radius, and speed of the flying route bubbles. Click the

icon on the left side of Bubble Style to control the display of Bubble Style.

Parameter	Feature
Color	The color of the bubble.
Radius	The radius of the bubble. Valid values: 0 to 30.
Rate	The speed of the bubble animation. Valid values: 0.1 to 1.

Data

Sample code:

[
  {
    "from": "116.85059,31.69078",
    "to": "118.69629,36.20882"
  },
  {
    "from": "120.89355,37.09024",
    "to": "116.93848,31.61597"
  },
  {
    "from": "121.28906,29.34388",
    "to": "117.20215,31.12820"
  },
  {
    "from": "118.16895,31.57854",
    "to": "119.79492,32.47270"
  },
  {
    "from": "116.76270,33.35806",
    "to": "116.49902,38.95941"
  },
  {
    "from": "116.41113,30.93992",
    "to": "114.78516,26.58853"
  },
  {
    "from": "115.83984,32.13841",
    "to": "97.47070,37.54458"
  },
  {
    "from": "116.27930,32.36140",
    "to": "114.08203,36.27971"
  },
  {
    "from": "103.66699,25.79989",
    "to": "116.05957,31.54109"
  },
  {
    "from": "112.14844,24.40714",
    "to": "116.71875,33.21112"
  },
  {
    "from": "116.93848,31.65338",
    "to": "118.34473,26.62782"
  },
  {
    "from": "90.70313,42.26105",
    "to": "116.23535,32.32428"
  },
  {
    "from": "116.41113,30.82678",
    "to": "114.87305,36.94989"
  },
  {
    "from": "116.45508,30.78904",
    "to": "118.91602,28.57487"
  },
  {
    "from": "116.01562,40.07807",
    "to": "116.71875,31.69078"
  },
  {
    "from": "116.71875,31.72817",
    "to": "108.45703,40.24599"
  },
  {
    "from": "117.99316,40.84706",
    "to": "116.85059,31.69078"
  },
  {
    "from": "118.30078,36.56260",
    "to": "117.24609,40.97990"
  },
  {
    "from": "119.35547,26.86328",
    "to": "120.41016,32.28713"
  },
  {
    "from": "113.07129,31.42866",
    "to": "106.04004,31.31610"
  },
  {
    "from": "116.85059,31.31610",
    "to": "110.43457,32.76880"
  }
]

Table 1. Description
Field	Description
from	The longitude and latitude of the starting point. Separate values with a comma (,).
to	The longitude and latitude of the end point. Separate values with a comma (,).

Table 1. Parameters
Parameter	Description
Controlled Mode	If you turn on the switch, data is not requested when a widget is initialized. Data requests are triggered only based on callback IDs or the method configured in Blueprint Editor. If you turn off the switch, data requests are automatically triggered. By default, the switch is turned off.
Auto Data Request	After you select the Auto Data Request check box, you can enable dynamic polling, and manually specify the polling interval. If you do not select this check box, data is not automatically requested. You must manually refresh the page to request data or use Blueprint Editor or callback ID events to trigger data requests.
Data Source	In the right-side panel of Canvas Editor, click the Data tab. Click Set next to Static Data. In the Configure Datasource panel, select a data source from the Data Source Type drop-down list. Enter code for data query in the code editor, click Preview Data Response to preview the response of the data source, and then view the response. For more information, see Configure asset data.
Data Filter	If you select the Data Filter check box, you can convert the data structure, filter data, and perform simple calculations. If you click the plus sign (+) next to Add Filter, you can configure the script for the data filter in the editor that appears. For more information, see Use the data filter.
Data Response Result	The response to a data request. If the data source changes, you can click the icon next to Data Response Result to view the data response in real time.

Interaction

This component does not support interaction events.

Configure interactions in Blueprint Editor

In Canvas Editor, click the icon on the right side of Flying Route Layer in the sub-widget list of Basic Flat Map.
Click the icon in the upper-left corner of the page.

In the blueprint editor, click Flying Routes Layer in the Added Nodes pane. You can configure parameters of the flying routes layer on the canvas.

Flying Layer Blueprint Editor Parameters v2.x

Event

Event	Description
When the data interface request is completed	Triggered after a data interface request is completed and processed by a filter, returning the processed JSON data. For specific data examples, see the Data Response Result section of the Data tab in the right-side configuration panel of the canvas editor.
When a data interface request fails	Triggered when a data interface request fails due to network issues or interface errors, returning the processed JSON data after filtering. For specific data examples, see the Data Response Result section of the Data tab in the right-side configuration panel of the canvas editor.

Policy Action

Action	Description
Request Data Interface	Requests server data again, using data from an upstream data processing node or layer node as parameters. For example, if the API data source is `http://api.test` and the data passed to Request Data Interface is `{ id: '1'}`, the final request URL is `http://api.test?id=1`.
Import data	Imports pre-processed data in the component's drawing format for redrawing, without re-requesting server data. For specific data examples, see the Data Response Result section of the Data tab in the right-side configuration panel of the canvas editor.
Display	Shows the component. No parameters are required.
Hide	Hides the component. No parameters are required.