A line density map layer is a subcomponent of a basic flat map. It supports independent style, data, and interaction configurations. It can display route information in geographic locations in the form of heat lines. It is suitable for large-screen display of route maps on maps, such as subway route maps. This topic describes the meaning of each configuration items of the line density map layer.

Click line density map layer below Manage Sub-components. In the Configure panel, configure the style and data of the line density map layer.
Note If no line density map layer is displayed in the Sub-component Management section, you have not added line density map layer sub-components. For more information, see Map container (v1.x version).

Parameter

  • Edge 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 asset configurations.
    • Color: the color of the line corresponding to the maximum, minimum, or empty data value value. For more information, see color picker description. The line between the maximum and minimum values maps to the gradient color between the maximum and minimum values based on the value value.
      Important If a color field is set in the data, the line color is based on the color field.
    • Value: the thickness of the heat line.
    • Dotted: the type of the heat line.
  • Interactive Configuration
    • Hover: Click the Eye icon icon to enable or disable the hover interaction feature. If you turn on this switch, you can set the hover color and the thickness of the line on hover. The effect can be seen only when you preview or publish.
    • Pop-up window: Turn on the switch and click the heat line to display the details of the line. The details can be configured in the properties properties of the data. You can see the effect only when you preview or publish the data.
    • Focus: If you turn on the switch and click the heat line, the line is focused based on the position of the line. You can see the effect only when you preview or publish the line.
    • Focus Range Ratio: the focus range ratio of the heat line. The focus range ratio is displayed only when the Click to Focus configuration items is enabled and you preview or publish the page.
    • Callback ID: the variable that is used to link data between widgets. Set this parameter to a field in the data.
      Important This feature has been updated to the Interaction panel. This feature will be deprecated in the Configuration panel. and configure callback IDs in the Interaction tab.

The metadata of the filtering table.

You must configure two data sources: Geo Boundary GeoJSON Data Interface and Thermal Value Data Interface.
  • Geo-boundary geojson data interface: the data of the geojson type, which must be of the LineString type. If you need to correspond to the thermal value distribution data, you must ensure that there is a unique link_id or id field. For more information about the GeoJSON standard, see geojson.org.
    This article provides only a simple code example, as shown in the following figure.
    {
      "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 pop-up information in the configuration panel. You can customize the field value for configuration.
  • Thermal Value Interface

    Sample code in the preceding figure:

    [
      {
        "link_id": 1,
        "value": 1,
        "color": "#ED3229"
      },
      {
        "link_id": 2,
        "value": 1,
        "color": "#36B854"
      },
      {
        "link_id": 3,
        "value": 1,
        "color": "#FFD823"
      },
      {
        "link_id": 4,
        "value": 1,
        "color": "#320176"
      },
      {
        "link_id": 5,
        "value": 1,
        "color": "#320176"
      },
      {
        "link_id": 6,
        "value": 1,
        "color": "#823094"
      },
      {
        "link_id": 7,
        "value": 1,
        "color": "#CF047A"
      },
      {
        "link_id": 8,
        "value": 1,
        "color": "#F3560F"
      }
    ]
    Table 1. Description
    FieldDescription
    link_idThe line association ID, which corresponds to the vector line data through this field.
    valueThe weight of the line, which is the basis for setting the maximum, minimum, and null colors in the configuration panel.
    infoOptional. The content of the pop-up window. If this parameter is empty, the pop-up window is displayed as the content of the properties field in the corresponding vector line data. If you do not specify this parameter, the information in the pop-up window is displayed as the content of the info field.
    color(Optional) The line density map layer supports data-first rendering. If you configure fields such as color (line color), weight (line width), and dashArray (dashed line), these properties are used first to render the associated lines, as shown in the following figure.
Table 2. Parameters
ParameterDescription
Controlled ModeIf 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 RequestAfter 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 SourceIn 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 FilterIf 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 ResultThe response to a data request. If the data source changes, you can click the Refresh icon icon next to Data Response Result to view the data response in real time.

Interaction

Select the Enable check box to enable interactions between widgets. The line thermal layer sub-component has interactive configuration. You can click a thermal line to throw a callback value. By default, the link_id field in the data is thrown. For more information, see Configure a callback ID for widgets.

Configure interactions in Blueprint Editor

  1. In Canvas Editor, click the Add to Blueprint Editor icon on the right side of line density map layer on the Basic Flat Map tab.
  2. Click the Blueprint Editor icon icon in the upper-left corner of the page.
  3. In Blueprint Editor, click line density map layer in the Imported Nodes pane. You can view the line density map layer parameters in the canvas.
    • Event
      EventDescription
      When a geo-boundary geojson data interface request is completedThe event that is thrown after the geo-boundary geojson data interface request is returned and processed by the filter. It also throws the processed JSON-formatted data. For specific data, see Data.
      When the heat value data interface request is completedThe event that is thrown after the heat value data interface request is returned and processed by the filter. It also throws the processed JSON-formatted data. For specific data, see Data.
      When the line is clickedAn event is triggered when a line is clicked.
    • Policy Action
      ActionDescription
      Request geo-boundary geojson data interfaceThis 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, line density map layer the API data source is http://api.test and the data passed to the request geo-boundary geojson data interface is { id: '1'}, the final request interface is http://api.test?id=1.
      Request Heat Value InterfaceThis 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, line density map layer the API data source is http://api.test and the data transferred to the Request Heat Value Data Interface is { id: '1'}, the final request interface is http://api.test?id=1.
      Import geo-boundary geojson data interfaceAfter 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 specific data, see Data.
      Import heat value dataAfter 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 specific data, see Data.
      DisplayA widget is shown without the need to specify parameters.
      HideA widget is hidden without the need to specify parameters.