The scatter layer is a sub-component of the basic flat map. It supports independent style, data, and interaction configuration, including the scatter style, label style, popup style, and interaction variable of the scatter layer. It can represent the point data information at a geographic location in the form of scatter points. This topic describes the configuration items of the scatter layer.

Click Scatter Layer under Components. The Settings tab of Scatter Layer appears.

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 asset configurations.
  • Default configuration
    • Callback ID: the variable used to link data between components. You must 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.
    • Dimensions: Scatter text notes. Click the Eye icon icon to the right of the label to control the display of the label.
      • Labeling Field: This parameter is used together with the data source on the Data tab. The labeling field must match the name of a field in the data source. For example, if you set this parameter to name, the scatter annotation on the visualization application is displayed as the value of the name field.
      • Color: the color of the label text. For more information, see the color picker description.
      • Shadow Color: the shadow color of the dimension text.
      • Font: the font of the label text.
      • Font Size: the font size of the label.
      • Label Position: the position of the label text relative to the scatter, including Center, Top Center, Bottom Center, Left, and Right.
    • Icon: If you turn on the switch, the scatter dots are displayed as icons. You can configure the icon image, icon size, offset method, and annotation offset in the Icon Settings section. If you clear the check box, the scatter dots are displayed as dots. You can configure the color, size, and edge of the scatter dots in the Scatter Settings section.
      • Icon configuration
        • Icon Size: the size of the scatter icon.
        • Icon Image
          • Move the pointer over the image and click Delete to delete the image. Then, click the image area or drag a local image to the area to add a scatter icon.
          • Move the pointer over the image and click Change to upload the local image again.
          • You can also enter the URL address of the image to use the image on the remote server as the scatter icon.
        • Icon Position: the position of the icon. You can select Bottom Center or Center.
        • Label X Offset: the X offset of the label relative to the scatter. Valid values: -100 to 100. Unit: pixels.
        • Label Y Offset: the Y offset of the label relative to the scatter. Valid values: -100 to 100. Unit: pixels.
      • Scatter Configuration
        • Data Mapping: If you turn on the switch, you can set the color and size of the scatter based on the value values in the data source.
        • Fill Color: Set the color of the scatter that corresponds to the maximum, minimum, or empty value value in the data source. For a scatter with a value value between the maximum and minimum values, the system sets the color of the scatter to a gradient from the color of the maximum value to the color of the minimum value according to the scale. This option is available only if Data Mapping is enabled.
        • Scatter Size: Specify the size of the scatter when the value value in the data source is the largest, smallest, or null value. For a scatter with a value value between the maximum and minimum values, the system sets the size of the scatter to a scale between the maximum and minimum scatter points. This option is available only if Data Mapping is enabled.
        • Edge Options: Set the color and thickness of the scattered edge.
    • Box Style: On the Preview or Publish page, click the box style that appears.
      • Font Color: the color of the text in the box.
      • Font Size: the size of the text in the box.
  • Series: Click the Plus icon or Trash Can icon icon to add or delete a series. Click the Horizontal or Vertical icon to configure the arrangement style of multiple series.
    • Type Filter Value: Specify the scatter pattern corresponding to the type field in the data source.
    • Icon: If you turn on the switch, the scatter dots are displayed as icons. You can configure the icon image, icon size, offset method, and annotation offset in the Icon Settings section. If you turn off the switch, the scatter dots are displayed as dots. You can configure the color, size, and edges of the scatter dots in the Scatter Settings section. For more information, see Default settings.

The metadata of the filtering table.

Click example.json to download the sample JSON code in the preceding figure.

Table 1. Parameters
Parameter or itemFeature
latThe latitude of the scatter.
lngThe longitude of the scatter.
type(Optional) Multi-series configuration, which is used in conjunction with the series configuration in the configuration panel to configure the type of scatter.
Note Data points that do not have a series value or are not within the series value are rendered using the default settings in the configuration panel.
infoOptional. Click Scatter. A pop-up message appears.
iconUrlOptional. The URL of the scatter icon.
value(Optional) Scatter Data Mapping is used together with the maximum, minimum, and no data configuration items of the scatter configuration in the configuration panel to set the color and size of the scatter.
nameOptional. The label name of the scatter point. It can be used to display point labels. The label name corresponds to the Label field in the configuration panel to set the label information style for a specific scatter point.
rotationAngleOptional. The rotation angle of the scatter icon. Unit: degrees (°). This parameter takes effect only after you enable Icon configuration items in the configuration panel and configure the icon. You can upload a custom icon or customize the iconUrl in the data source.
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 Scatter Layer sub-component has interactive configurations. You can click a Scatter to throw a callback value. By default, the lng and lat fields in the data are thrown. For more information, see Configure callback IDs.

Configure interactions in Blueprint Editor

  1. In Canvas Editor, click the Add to Blueprint Editor icon next to Scatter Layer in the Basic Flat Map widget.
  2. Click the Blueprint Editor icon icon in the upper-left corner of the page.
  3. In the blueprint editor, click Scatter Layer in the Added Nodes pane. You can configure parameters of the scatter layer on the canvas.
    • Event
      EventDescription
      When the data interface request is completedThe event is triggered with the processed JSON data after a data interface request is responded and processed by a filter. For specific data, see Data.
      When you click a pointThe event that is raised when a point at the scatter layer is clicked, and the data item corresponding to the scatter is also raised.
    • Policy Action
      ActionDescription
      Request 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, if the API data source is http://api.test and the data passed to the request data interface is { id: '1'}, the final request interface is http://api.test?id=1.
      Import 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.