Line heat layer (v1.x)-DataV(DataV)-阿里云帮助中心

The line layer is a child widget of the basic flat map. It supports independent configurations for style, data, and interactions. It renders geographical route information as lines on a map, ideal for large screen displays, such as subway route maps. This topic describes the configuration options for the line layer.

Important

This topic describes the line layer child widget for v1.x. For the v2.x version, see Line Layer (v2.x).

Under Child Widget Management, click Line Layer to open the configuration panel, where you can configure the style and data for the line layer.

Note

If Line Layer is not available under Child Widget Management, you need to add the line layer child widget first. For more information, see Map Container (v1.x).

Configuration

Stroke options
- 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.
- Color: The color of the line that corresponds to the maximum, minimum, or empty data value. See Color picker description to modify these colors. For lines with a value between the maximum and minimum, the color is mapped to a gradient between the colors that are set for the maximum and minimum values.
  Important
  If the color field is set in the data, the color field determines the line color.
- Line width: Sets the line width.
- Dotted line: Sets the line style.
Interactive options
- Hover: Click the icon to enable or disable the hover effect. When enabled, you can configure the hover color and line width. The effect is visible only in preview or on a published screen.
- Pop-up Box: Turn on the switch to display the details of a heat line when you click it. You can configure this information in the properties attribute of the data. This effect is visible only during preview or after publishing.
- Click FitBounds: Turn on the switch to automatically focus the view on a line when it is clicked. The effect is visible only in preview or on a published screen.
- FitBounds Padding: Sets the padding around a focused line. This option is available only when Click FitBounds is enabled. The effect is visible only in preview or on a published screen.
- Callback ID: Sets a variable for data linkage between widgets. This must be a field from your data source.
  Important
  This feature has been moved to the Interaction panel. The option in the Configuration panel is deprecated and will be removed in a future release. The new interaction feature supports configuring multiple fields.

Data

This widget requires two data sources: GeoJSON linestring data and mapping data.

GeoJSON linestring data interface: The data must be in GeoJSON format with a LineString geometry type. If you want to map this data to heatmap data, the data must contain a unique link_id or id field. For more information about the GeoJSON standard, see geojson.org.

The following code provides a simple example.

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [
            109.4677734375,
            41.409775832009565
          ],
          [
            117.46582031249999,
            36.31512514748051
          ],
          [
            118.828125,
            32.0639555946604
          ],
          [
            114.9169921875,
            27.566721430409707
          ]
        ]
      }
    }
  ]
}

Note

The properties field corresponds to the information in the pop-up box on the configuration plane. You can customize the value of this field to configure the settings.

Mapping data

Table 1. Field description
Field	Description
link_id	The line association ID. This field associates this data with the GeoJSON linestring data.
value	The line weight. This value determines the line color based on the maximum, minimum, and null color settings in the configuration panel.
info	(Optional) The content of the pop-up box. If this parameter is empty, the pop-up box displays the content of the properties field from the corresponding vector line data. Otherwise, the pop-up box displays the content of the info field.
color	(Optional) The line layer supports data-driven rendering. If you configure fields such as color (line color), weight (line width), and dashArray (dotted line), the layer prioritizes these properties for rendering the associated lines.

Table 2. Option description
Parameter	Description
Controlled mode	When enabled, the widget does not request data on initialization. Data requests are triggered only by a callback ID or an action configured in the Blueprint Editor. When disabled, you can use the auto update feature. This option is disabled by default.
Auto update request	Enables dynamic data polling and lets you set the polling frequency. If this option is cleared, data is not updated automatically. You must manually refresh the page or trigger a data request through the Blueprint Editor or a callback ID event.
Data source	Click Configure Data Source to open the Set Data Source panel. In this panel, you can change the data source type, edit the data query code, preview the data source response, and view the data response result. For more information, see Configure Asset Data.
Data filter	A data filter transforms data structures, filters data, or performs simple calculations. Click Add Filter to configure a data filter script in the Set Data Source panel. For more information, see Use Filters.
Data response result	Displays the response from the data request. When the data source changes, you can click the icon on the right to view the latest data response.

Interaction

Select Enable to turn on the interactive features for the component. The line layer child widget has interactive options. You can click a heat line to return a callback value. By default, the link_id field from the data is returned. For detailed configuration, see Component Callback ID Configuration.

Blueprint Editor interaction configuration

In the canvas editor, find the basic flat map widget, and in its child widget list, click the icon to the right of the line layer.
Click the icon in the upper-left corner of the page.

On the Blueprint Editor configuration page, click the Line Layer component in the Import Nodes pane. The configuration parameters for the line layer in the Blueprint Editor appear on the canvas, as shown in the following figure. Line layer Blueprint Editor parameters

Events

Event	Description
When the GeoJSON linestring data API request is complete	Triggered after the GeoJSON linestring data API request is complete and the response is processed by a filter. The processed data is returned in JSON format.
When the mapping data API request is complete	Triggered after the mapping data API request is complete and the response is processed by a filter. The processed data is returned in JSON format.
When a line is clicked	Triggered when a line is clicked.

Actions

Action	Description
Request GeoJSON linestring data API	Sends a new request for server-side data. Data from upstream data processing nodes or layer nodes is used as parameters. For example, if the line layer has an API data source configured as `http://api.test` and the data passed to the Request GeoJSON linestring data API action is `{ id: '1'}`, the final API request URL is `http://api.test?id=1`.
Request mapping data API	Sends a new request for server-side data. Data from upstream data processing nodes or layer nodes is used as parameters. For example, if the line layer has an API data source configured as `http://api.test` and the data passed to the Request mapping data API action is `{ id: '1'}`, the final API request URL is `http://api.test?id=1`.
Import GeoJSON linestring data	Processes data according to the component's format, imports the data into the component, and redraws the layer. This action does not send a new request for server-side data.
Import mapping data	Processes data according to the component's format, imports the data into the component, and redraws the layer. This action does not send a new request for server-side data.
Show	Shows the component. No parameters are required.
Hide	Hides the component. No parameters are required.