line density map layer is a sub-component of a basic flat map. It supports independent styles, data, and interactive configurations. It can represent route information on geographic locations in the form of thermal lines. It is suitable for large-screen display of route maps on maps, such as subway route maps. This topic describes the configuration items of line density map layer.

Click the Line Density Map Layer below Widget Management to go to the configuration panel to configure the style and data of the Line Density Map Layer.
Note If there is no Line Density Map Layer in Sub-Components, you have not added Line Density Map Layer child widget. For more information, see Map Container.

Settings

  • 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 widget configuration items.
  • Visibility Level: specifies the visible level value of the line density map layer. line density map layer visible within the specified level range and invisible outside the level.
  • Line Style: Specify the line type, line color, line thickness, and line type.
    Parameter Description
    Configuration Type Valid values: default and dataBind.
    Line color
    • If you set Configuration Type to default, the color of the heat line is set to one color by default.
    • If you set Configuration Type to Data Mapping, the color of the heat line corresponding to the maximum, minimum, and empty values of the data value is modified. For more information, see color picker description. The line between the maximum value and the minimum value, mapped to a gradient color between the maximum value and the minimum value according to the value value.
      Figure 1. line density map layer color configuration items
      line density map layer color configuration items v2.x
      Figure 2. line density map layer data source
      line density map layer data source v2.x
    Notice If the color field is specified in the data, the color of the line is based on the color field.
    Line Width The thickness of the heat line.
    Line Type The type of the heat line.
  • Series: Click the Plus icon or Trash bin icon icon on the right to add or delete a series. Click the Horizontal or Vertical icon to configure the arrangement style of multiple data series.
    Parameter Description
    Type Filter Value This parameter corresponds to the type field in the data source. Configure the style of the heat line of the scatter point corresponding to the type value that you set.
    Configuration Type /Line Color /Line Width Set the configuration type, line color, and line thickness of each series. For more information, see Line Style under Settings.
  • Popup Info: On the preview or release page, click the hot line to display the details of the pop-up box. Click the Eye icon icon on the left of the Popup box to control the display and concealment of the pop-up box.
    Note To enable the pop-up feature, you must first set the info field.
    • info Field: Turn on the switch, turn on the info field, and set the info field as the content of the pop-up window. You can configure html tags for this field. If you turn off the info field switch, the content of compatible name and value fields is used as the content of the pop-up window.
    • Trigger Action: Select the type of the event that is displayed in the dialog box by click or mouseover.
    • Configuration Options: the configuration items content of the dialog box. You can select parent or custom.
      • parent: the default style.
      • custom: You can customize the text style, line height ratio, and fillet radius of the dialog box.
        Parameter Description
        Text Style Set the font, text weight, font size, color, and shadow color of the text in the dialog box. For more information, see color picker description for color modification.
        Row-Height to Font-Size Ratio Specifies the high proportion of rows in the popup format.
        Border Radius Set the fillet radius value of the dialog box. The larger the value, the more rounded the fillet.
        Padding Set the distance between the text in the box and the four sides of the box.
        Background Color Sets the background color of the popup.
        Close Button Set the color, size, distance of the button from the top, and distance from the right side of the closed pop button.
  • Interaction Options
    Parameter Description
    Style on Hover You can click the Eye icon icon on the left of Style on Hover to enable or disable the hover interaction feature. After you enable this feature, you can set the color, thickness, and type of the hot line when you move the pointer over. The effect can be seen only during preview or release.
    Click to Focus Click the Eye icon icon on the left to control whether to enable or disable the focus interaction function. When it is turned on, click the hot line. A range of proportions of focus will be performed based on the position of the hot line. The effect can be seen only during preview or release.

Data

You must configure two data sources: Interface of GeoJSON Boundary Data and Choropleth Data Interface. Geojson data interface for line density map layer geographic boundaries
  • Interface of GeoJSON Boundary Data :geojson data type, which must be of the LineString type. If you need to match the mapping data, you must ensure that there are unique link_id or id fields. For more information about geojson standards, see geojson.org.
    Note The properties field corresponds to the pop-up information in the configuration panel. You can customize the field value for configuration.
  • Choropleth Data Interfaceline density map layer Thermal Value Data Interface

    Sample code in the preceding figure: 

    [
  {
    "link_id": 1,
    "value": 1,
    "info": "Name: 1</br> Value:1"
  },
  {
    "link_id": 2,
    "type": "type1",
    "value": 20
  },
  {
    "link_id": 3,
    "type": "type1",
    "value": 3
  },
  {
    "link_id": 4,
    "type": "type1",
    "value": 4
  },
  {
    "link_id": 5,
    "type": "type2",
    "value": 5
  },
  {
    "link_id": 6,
    "type": "type2",
    "value": 5
  },
  {
    "link_id": 7,
    "value": 7
  },
  {
    "link_id": 8,
    "value": 8
  }
]
    Table 1. Parameters
    Log field Description
    link_id The line association ID. This field is used to correspond to the vector line data.
    type The line type, which corresponds to the series type filter value in the configuration panel.
    value The weight value of the line, which is the basis for setting the maximum, minimum, and null colors in the configuration panel.
    info Optional. The content of the pop-up window. If this parameter is empty, the pop-up information is displayed as the content of the properties field in the corresponding vector line data. If this parameter is not empty, the pop-up information is displayed as the content of the info field.
    color Optional. line density map layer supports data-first rendering. If you have configured fields such as color (line color), weight (line width), and dashArray (dashed line), these properties are used first to render the associated lines.
Table 2. 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 widget 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 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-widget has interactive configurations. You can click a thermal line or move the pointer to a thermal line to throw a callback value. By default, link_id fields in the data are thrown. For more information, see Configure a callback ID for widgets. line density map layer interaction configuration

Configure interactions in Blueprint Editor

  1. On the Canvas Editor page, click the lantu icon to the right of the Line Density Map Layer in the Basic Plat Map subcomponent management list.
  2. Click the Blueprint Editor icon icon in the upper-left corner of the page.
  3. On the blueprint editor configuration page, click the Line Density Map Layer component in the Import Node column. On the canvas, you can view the blueprint editor configuration parameters of the line density map layer as shown in the following figure. line density map layer Blueprint Editor Parameter v2.x
    • Event
      Event Description
      On Completion of Interface of GeoJSON Boundary Data Request The geo-boundary geojson data interface requests the events that are returned after being processed by the filter, and the processed JSON-formatted data is also thrown. For more information about specific data examples, see the Data Response Result section on the Data tab of the canvas editor.
      On Completion of Choropleth Data Interface Request The thermal value data interface requests the events that are thrown after being processed by the filter, and the processed JSON-formatted data is also thrown. For more information about specific data examples, see the Data Response Result section on the Data tab of the canvas editor.
      On Failure of Interface of GeoJSON Boundary Data Request When a geo-boundary geojson data interface request fails, the event is returned and processed by the filter, and the processed JSON-formatted data is also thrown. For more information about specific data examples, see the Data Response Result section on the Data tab of the canvas editor.
      On Failure of Choropleth Data Interface Request When the thermal value data interface request fails (the request failure may be: network problem or interface error, etc.), the event is returned and thrown after filter processing, and the processed JSON format data is thrown at the same time. For more information about specific data examples, see the Data Response Result section on the Data tab of the canvas editor.
      On Click of Line An event is triggered when a line is clicked to throw link_id field data.
      On Moving Pointer In An event is triggered when the mouse moves into a line and link_id field data is thrown.
    • Action
      Action Description
      Request Interface of GeoJSON Boundary Data 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 a line density map layer is configured with the API data source as https://api.test and the data passed to the action of Request Interface of GeoJSON Boundary Data is { id: '1'}, the final request interface is https://api.test?id=1.
      Request Choropleth 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 a line density map layer is configured with the API data source as https://api.test and the data passed to the action of Request Choropleth Data Interface is { id: '1'}, the final request interface is https://api.test?id=1.
      Import Interface of GeoJSON Boundary 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 on the Data tab of the canvas editor.
      Import Choropleth Data Interface 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 on the Data tab of the canvas editor.
      Show A widget is shown without the need to specify parameters.
      Hide A widget is hidden without the need to specify parameters.