All Products
Search
Document Center

DataV:2D icon layers (v3.x)

Last Updated:Dec 03, 2024

This topic describes the meaning of each configuration items of the two-dimensional icon layer.

Chart style

The 2D icon layer is a sub-component of the 3D flat map (v3.x version). It supports independent style, data, and interaction configuration, including the shape, size, and color of the icon. It can locate the geographic position in the 3D flat map in the form of a 2D icon. image.png

Style Template image.png

  • Search Configuration: Click the Search configuration items icon imagein the upper-right corner of the Style panel. In the Search Configuration panel, enter the name of the configuration items that you want to search for and locate the configuration items. Fuzzy match is supported. For more information, see Search configuration items.

  • General: Set the general configuration items of the 2D icon layer.

    Metric

    description

    Opacity

    The opacity of the 2D icon layer. Unit: %. Valid values: 0 to 100. The larger the value, the more opaque the 2D icon layer.

  • Graphics: Sets the graphics configuration items of the 2D icon layer.

    • Icon Shape: specifies the shape of the icon that is displayed on the 3D flat map by the 2D icon layer. For more information, see Use the shape mapper.

    • Icon Size: the size and style parameters of the icons on the 2D icon layer.

      Metric

      description

      Width

      The width of the two-dimensional icon layer icon. The value ranges from 0 to 400. Unit: pixels.

      Height

      The height of the icon on the two-dimensional icon layer. The value ranges from 0 to 400. Unit: pixels.

  • Label: the style of the label in the 2D icon layer.

    • Show Label: If you turn on the switch, the 2D icon layer label is displayed. If you turn off the switch, the 2D icon layer label is not displayed.

    • Display Mode: the display mode of the 2D icon layer. Valid values: Select All and Click.

    • Content Style: the style of the tag content.

      Item

      Example value

      Style per line

      Click the imageor imageicon on the right side of Style per Line to add or delete a style for each line. Click the imageor imageicon to configure the arrangement of multiple content styles per row. Click the imageicon to copy the current selected content style configuration and add a new line of content with the same configuration.

      • Row Field: the name of the row field, which must match the field in the data panel.

      • Field Style: Set the field style of the line, including the font style, font size, color, and weight of the field.

      • Field Prefix: Specify the content, interval, font, font size, color, and weight of the field. Click the 眼睛图标icon to the left of Field Prefix to control the display of Field Prefix.

      • Field Suffix: Specify the content, interval, font, font size, color, and weight of the field suffix. Click the 眼睛图标icon to the left of Field Suffix to control the value of Field Suffix.

      Field Width

      Sets the width of the field, including the adaptation type of the field and the maximum width of the field. The adaptation type of the field includes adaptive and fixed width.

      Row height ratio

      The row height ratio of the tag. Valid values: 1 to 2.

      Content Stroke

      Set the color and thickness of the content edge of the tag. The value of the thickness value ranges from 0 to 5. Click the 眼睛图标icon to the left of Content Stroke to control the display of Content Stroke.

      Content Shadow

      Specifies the shadow of the label content, including the color, thickness, X-direction offset, and Y-direction offset of the shadow. Valid values: 0 to 10. Unit: px. Click the 眼睛图标icon to the left of Content Shadow to control the display of Content Shadow.

      Background Style

      Sets the background style of the label content. Click the 眼睛图标icon to the left of Background Style to control the display of the Background Style.

      • Background Type: Set the background type of the tag content, including Vector and Image. If you set the Background Type parameter to Vector, set the Background Style parameter based on the following parameters:

        • Background Color: the background color of the tag.

        • Border Style: Set the border style of the label content, including the line type, line width, and color of the border.

        • Border Fillet: the rounded corners of the border of the label content. Unit: pixels.

        • Content Margin: Set the distance between the content in the tag content and the content in the top, bottom, left, and right directions.

      • If you set the Background Type parameter to Image, set the Background Style parameter based on the following parameters:

        • Image Template: Specify an image template for the background of the tag content.

        • Opacity: Set the opacity of the background image, ranging from 0 to 100.

        • Content Margin: Specify the distance between the content in the tag content and the content in the top, bottom, left, and right directions.

  • Interaction: the interaction parameters of the two-dimensional icon layer.

    • Graphic Interaction: On the left side of 眼睛图标Graphic Interaction, you can control the display of the Graphic Interaction style.

    • Multi-Select: If you turn on the switch, the interactive effect is supported. If you turn off the switch, the interactive effect is disabled.

    • Click Style: The 眼睛图标icon on the left of Click Style allows you to control the display of Click Style.

      Metric

      description

      Wireframe thickness

      The thickness of the interactive wireframe when the icon is clicked. The value ranges from 0 to 5. Unit: px.

      Wireframe Color

      Sets the color of the interactive wireframe when the icon is clicked.

  • Condition: the description of the condition style.

    Conditional Style: Click the imageor imageicon to add or remove a conditional style. Click the imageor imageicon to configure the arrangement style of multiple conditional styles. Click the imageicon to copy the selected conditional style configuration and add a conditional style. For more information about how to configure a conditional tree, see Usage notes.

    Graphics: specifies the style of the graphics in the 2D icon layer. Click the 眼睛图标icon on the left of Graph to control the display of the corresponding graph in the 2D icon layer under this condition.

    • Icon Shape: Set the icon shape of the two-dimensional icon layer in this condition. Click the icon on the left 眼睛图标to turn the icon shape on or off.

    • Icon Size: the size of the icon in the two-dimensional icon layer, including the width and height of the icon. Valid values: 0 to 400. Unit: pixels. Click the icon on the left 眼睛图标to control the display of the icon size button.

Data Sources panel image.png

Column

Description

lng

The longitude of the 2D icon layer.

lat

The latitude of the 2D icon layer.

name

The name of the 2D icon layer.

id

Unique identifier of the 2D icon layer.

iconUrl

The custom icon path for the 2D icon layer.

iconField

The shape mapping field of the 2D icon layer.

Configure data items

Description

Data sources

You can use the code editor or visual editor to view the data fields contained in the widget. You can also modify the data type to flexibly configure the component data.

Data Mapping

If you need to customize chart field configurations, you can set different field mapping content in the Data Mapping module and field mapping these content to the corresponding fields of the widget. This allows you to match data without modifying the fields in the data source. You can also click the imageicon to configure the field style.

Configure a filter

Turn on Filter, select an existing data filter or create a data filter, and configure a data filter script to filter data. For more information, see Manage data filters.

Data Response Result

The Data Response Result section displays widget data in real time. If the data source of the widget changes, this section displays the latest data. If the system response is delayed, you can click the imageicon on the right to view the data response result. You can also click the imageicon on the right to obtain the latest data of the widget. You can also click View Example to view an example of the response result of the current component.

Forbid Loading

If you select the check box, you will not see the loaded content during component initialization when you update the component and preview the data kanban. If you select the check box, the opposite is true. By default, the status is deselected.

Controlled Mode

If you select the check box, the component does not request data in the initialized state, and only requests data by using global variables or the method configured in Blueprint Editor. If you clear the check box, you can use automatic update to request data. By default, the status is deselected.

Auto Data Request

Select the check box to manually enter the time frequency of polling to set dynamic polling. If you clear the page, the page is not automatically updated. You need to manually refresh the page or use Blueprint Editor and global variable events to trigger a request to update data.

Advanced Panel image.png

Turn on the switch to enable the widget interaction feature. When a point is clicked, a data request is triggered and a temporary variable is thrown. This way, data at different points is dynamically loaded when the point is clicked. By default, the lng and lat values of the clicked area are displayed. For more information, see Component interaction configuration.

Blueprint Interaction

  1. Click the imageicon in the upper-left corner to go to the Blueprint page.

  2. On the Layer Nodes tab, add the widget to the main canvas.

  3. View blueprint configuration parameters. image.png

    • Event

      Event

      Description

      When the data interface request is completed

      The event is triggered with the processed JSON data after a data interface request is responded and processed by a filter. For more information about specific data examples, see the Data Response Result section of the Data Source tab in the right-side configuration panel of the canvas editor.

      When you click a point

      Throws data when a point within the 2D icon layer is clicked.

    • Action

      Action

      Description

      Request 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 the API data source is https://api.test and the data passed to the request data interface is { id: '1'}, the final request interface is https://api.test?id=1.

      Import 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 of the Data Source tab in the right-side configuration panel of the canvas editor.

      Switch Show /Show

      Specifies whether to show or hide a widget. No parameters are required.

      Display

      Display the widget. For more information, see Data example.

      {
        "animationType": "",// The animation method. Valid value: fade. If you do not specify this parameter, no animation is generated. 
        "animationDuration": 1000,// The animation delay. Unit: ms. 
        "animationEasing": ""// animation curve
      }

      Hide

      Hide the component. For more information, see Data example.

      {
        "animationType": "",// The animation method. Valid value: fade. If you do not specify this parameter, no animation is generated. 
        "animationDuration": 1000,// The animation delay. Unit: ms. 
        "animationEasing": ""// animation curve
      }

      Update component configurations

      Style configurations of widgets are dynamically updated. In the Style panel, click Copy Configuration to Clipboard to obtain the configuration data of the widget. After that, change the style field for the data processing node in Blueprint Editor.