Information label layer - DataV - Alibaba Cloud Documentation Center

This topic describes the configuration items of the information label layer.

Chart style

The information label layer is a sub-component of the basic flat map 4.0. It supports independent style, data, and interaction configuration, including the indicator line style and main icon style of the graph shape. It can represent the tag information content of a geographic location in the form of information icons.

Style Panel

Search Configuration: Click the Search configuration items icon in 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.
Quick Style: You can select a style based on your business requirements.

General: specifies the general configuration items of the information tag layer.

Metric	description
Visible Level	Set the visibility level of the information label layer to be visible within the specified level range and invisible outside the level range.
Opacity	The opacity of the information label layer. Unit: %. Valid values: 0 to 100. The larger the value, the more opaque the information label layer.

Graphic: Set the graphic configuration items of the information label layer.

Indicator Line: indicates the line style of the information label layer. Click the icon on the left 眼睛图标 to turn the indicator line style on or off.

Metric	description
End Offset	The horizontal and vertical offset values of the indicator line on the information label layer. Valid values: -500 to 500. Unit: px.
Horizontal Line Percentage	Drag the slider to set the ratio of the horizontal part of the indicator line to the overall indicator line. The value range is 0 to 100. Unit: %.
Line Style	Drag the slider to set the line style of the indicated line, including the line type, line color, and line thickness value. The value ranges from 0 to 20 in px. Note The line type supports numeric input, such as 4,4. The first number indicates the length of the solid line and the second number indicates the length of the interval.

Main Icon: the style of the main icon in the tag. Click the icon on the left 眼睛图标 to enable or disable the main icon style.

Metric	description
Icon shape	The shape of the main icon in the label of the information label layer. You can click the drop-down list next to Style to select a variety of built-in icon styles. You can also enter the URL of the image in the input box of the drop-down panel to use the image on the remote server as the label icon. You can also click the icon on the right of the input box to upload a local image as the label icon.
Icon Size	Set the width and height of the main icon. Valid values: 0 to 200. Unit: px.

Label: the style of the label in the information label layer.

Overall Width: Set the overall width of the tag. Valid values: Adaptive and Fixed Width. If you select Adaptive, the overall width is automatically adapted to the size of the map widget. You can customize the maximum width. Valid values: 20 to 500. Unit: pixels. If you select Fixed Width, you can specify a value for the fixed width. Valid values: 20 to 500. Unit: pixels.

Main Title: the style of the main title in the tag. You can click the 眼睛图标 icon on the left of the Main Title to control the display of the Main Title.

Metric	description
Title Field	Specifies the content of the title field of the tag, which must match the field name in the geographic data. The default value is the name field.
Text Style	Set the style of the text in the tag title, including the font style, font size, color, and weight of the text.
Title Background	Sets the background style within the main title of the tag. Background Color: the background color of the main title of the tag. Border Style: Set the border style of the label title, including the line type, line width, and color of the border. Border Fillet: specifies the rounded corners of the main title border of the tag in four directions. Unit: px. Content Margin: Specify the distance between the content of the title in the tag and the content in the top, bottom, left, and right directions.

Main Content: Specify the style of the main content in the tag. You can click the 眼睛图标 icon to the left of the Main Content section to control the display of the Main Content style.

Metric	description
Style per line	Click the or icon on the right side of Style per Line to add or delete a style for each line. Click the or icon to configure the arrangement of multiple content styles per row. Click the icon to copy the selected content style and add a content style with the same configuration. Row Field: the name of the row field, which must match the field in the data panel. Field Style: Specify the style of the line field, including the font style, font size, color, and weight of the field. Field Prefix: specifies 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.
Row height ratio	The row height ratio of the tag. Valid values: 1 to 2.
Content Background	Sets the background style of the main content of the tag. Background Color: the background color of the main content of the tag. Border Style: Set the border style of the main content of the label, including the line type, line width, and color of the border. Border Fillet: the rounded corners of the border of the main content of the tag. Unit: pixels. Content Margin: the margin between the content in the main content of the tag and the content in the top, bottom, left, and right directions.

Background Frame: Set the background frame style in the tag. You can click the 眼睛图标 icon to the left of the Background Frame to control the display of the Background Frame style.

Metric	description
Background Type	The background type of the tag background box. Valic values: Vector and Image.
Background Color	The background color of the tag. This parameter is available only when you select Vector for Background Type.
Image Template	The template style of the background image. This parameter is available only when you set Image Template to Image.
Opacity	The opacity of the background image. Valid values: 0 to 100. This parameter is available only when you select Image for Image Template.
Border Style	The border style of the label background. The border style includes the line type, line width, and color. You can set this parameter only when you set Background Type to Vector.
Border Fillet	The values of the rounded corners of the label background border in four directions. Unit: px. This parameter is available only when you set the Background Type parameter to Vector.
Content Margin	Set the distance between the content in the background box of the label and the top, bottom, left, and right.

Condition: the description of the condition style.

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

Graphics: specifies the style of the graphics in the information label layer. Click the 眼睛图标 icon on the left of Graph to control the visibility of the corresponding graph in the information label layer under the specified conditions.

Indicator Line: the indicator line style of the information label layer in this condition. Click the icon on the left 眼睛图标 to turn the indicator line style on or off.

Metric	description
End Offset	The horizontal and vertical offset values of the indicator line on the information label layer. Valid values: -500 to 500. Unit: px.
Horizontal Line Proportion	Drag the slider to set the ratio of the horizontal part of the indicator line to the overall indicator line. The value range is 0 to 100. Unit: %.
Line Style	Drag the slider to set the line style of the indicated line, including the line type, line color, and line thickness value. The value range is 0 to 20, in %. Note The line type supports numeric input, such as 4,4. The first number indicates the length of the solid line and the second number indicates the length of the interval.

Main Icon: the style of the main icon in the tag. Click the icon on the left 眼睛图标 to enable or disable the main icon style.

Metric	description
Icon shape	The shape of the main icon in the label of the information label layer. You can click the drop-down list next to Style to select a variety of built-in icon styles. You can also enter the URL of the image in the input box of the drop-down panel to use the image on the remote server as the label icon. You can also click the icon on the right of the input box to upload a local image as the label icon.
Icon Size	Set the width and height of the main icon. Valid values: 0 to 200. Unit: px.

Data Sources panel

Column	Description
`lng`	Required. The longitude of the tag.
`lat`	Required. The latitude of the tag.
`name`	Optional. The name of the tag.
`value`	Optional. The value of the tag.
`id`	Optional. The unique identifier of the tag.

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 icon 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 icon on the right to view the data response result. You can also click the icon 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

This component has no event configuration.

Blueprint Interaction

Click the icon in the upper-left corner to go to the Blueprint page.
On the Layer Nodes tab, add the widget to the main canvas.

View blueprint configuration parameters.

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.

Action

Action	Description
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.
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`.
Switch Display /Display	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.