basic planar map basic polygon layer - DataV - Alibaba Cloud Documentation Center

This topic describes the meanings of each configuration item of the basic polygon layer.

Chart style

The basic polygon layer is a subcomponent of the basic planar map 4.0. It supports independent style, data, and interaction configuration, including the color of the area, boundary line, mouse interaction occurrence, and location information, presented in the form of tiles to render geographic location information.

The following are the effects that this layer supports rendering.

Style panel

Search Configuration: Click the Style icon in the upper right corner of the panel to enter the name of the configuration item you wish to locate in the search field. The system supports fuzzy matching. For more information, see Search configuration item.

General: Set the general configuration parameter items of the basic polygon layer.

Parameter	Description
Visible Level	Set the visible level of the basic polygon layer. Within the set level range, the basic polygon layer is visible. Outside the level range, it is not visible.
Opacity	Set the opacity of the basic polygon layer. The value range is 0~100, in percentage. The larger the value, the less transparent the style of the choropleth layer.

Graphics: Set the graphic style parameter items of the basic polygon layer.

Parameter	Description
Fill Color	Configure the color style of the area. The color of the area corresponds to the maximum, minimum, and empty value values in the data. See Color Mapper Instructions for configuring the mapping color style of different areas.
Outline Style	The color, thickness, and type of lines of the boundary of each area of the basic polygon layer. Note The line type supports numeric input, such as: 4,4. The first number represents the solid line length, and the second number represents the interval length.

Interaction: Interaction configuration items of the basic polygon layer.

Graphic Interaction

Parameter	Description
Hover Style	Click the Hover Style icon on the left to control the enabling or disabling of the hover interaction feature. After enabling, you can set the fill color of the area, the color, and thickness of the area outline when the mouse hovers. The effect can only be seen in preview publish or interaction mode.

Conditional: Conditional style description. Through conditional filtering, configure the area that meets the conditions as a special color.
Conditional Style: Set special conditions. For details, see Conditional Tree Instructions.
Graphics: Turn on the switch to configure the graphic configuration items in this style. Turn off the switch to not configure the graphic configuration items under this style.
Parameter
Description
Fill Color
Click the icon on the left to control whether to apply the area fill color under this condition.

Custom Popup Style: Set the style parameters of the custom popup within the basic polygon layer. Please set the info field as the popup content. The info supports configuring HTML fragments.

Parameter	Description
Popup Switch	Turn on the switch to trigger the popup through Click or Hover.
Display Method	Set the display method of the popup of the basic polygon layer, including Click and Hover methods.
Relative Offset	Set the relative offset pixel distance of the popup in the horizontal and vertical directions. The value range is -1000~1000, in px.
Text Style	Set the text style within the popup, including the font style, font size, color, and text thickness value.
Display Empty Value	Turn on the switch to display "No data" on objects with no `info` field or empty `info` field. When the switch is off, the interaction will not pop up the corresponding popup for data without the `info` field.
Popup Style	Padding: Set the margin value of the popup text content from the four directions: top, bottom, left, and right. Border Style: Set the border radius value, line width, and color of the popup border. Background Color: Set the background color of the popup. Shadow Style: Set the shadow color, blur radius, X offset, and Y offset of the popup. Close Button: Turn on the switch to display the close button and the color of the button in the popup of the basic polygon layer. Pointer Arrow: Turn on the switch to display the pointer arrow in the popup of the basic polygon layer.

Data source panel

The layer data source needs to have geojson format data with business data. For specific examples, refer to the sample data. The field mapping is as follows:

Field	Description
`colorField`	Optional, the color mapping field of the region.
`info`	Optional, custom popup content.
`popupType`	Optional, popup type (requires the use of custom development features).

Data Item Configuration	Description
Data Source	The component's data source displays the data fields contained within the component using code editing or visual editor. You can also modify the data type to flexibly configure the component's data.
Data Mapping	When you need to customize chart field configurations, you can set different field mappings in the Data Mapping module to map these fields to the corresponding fields of the component. This allows for real-time data matching without altering the data source fields. Additionally, click the icon to configure field styles individually.
Filter	Open the Filter to select an existing data filter or create a new one, and configure the data filter script to achieve data filtering capabilities. For more information, see manage data filters.
Data Response Result	This feature displays the component's data in real-time. When the component's data source changes, the data response result will display the latest data accordingly. In case of a delayed system response, you can click the icon on the right to check the current data response result, or click the icon on the right to obtain the most recent data for the component. You can also click to view examples to see sample response results for the current component.
Disable Loading State	Check the check box to hide the loading content during component updates and data dashboard previews. Unchecking will display the loading content. The default setting is unchecked.
Controlled Mode	Check the check box to prevent data requests upon the component's initialization. Data requests will only be initiated through global variables or methods configured in the blueprint editor. Unchecking allows for automatic update requests. The default setting is unchecked.
Automatic Update Request	Check the check box to manually set the polling frequency for dynamic polling. Clearing this option disables automatic updates, requiring manual page refreshes or data request triggers through the blueprint editor and global variable events for updates.

Advanced panel

Turn on the switch to enable the associate global variable feature. When clicking, double-clicking, mouseover, or mouseout of a certain area, a data request can be triggered, throwing temporary variables to achieve dynamic loading of different area data. By default, the adcode value of the clicked area is thrown. For specific configuration, see Component Interaction Configuration.

Blueprint interaction

Click the icon in the upper left corner of the page to enter the Blueprint page.
Under the Layer Node tab, add the current component to the main canvas.
View the blueprint configuration parameters.

Event

Event	Description
When Data Updates	When the data return result changes, a triggering event is triggered and data is thrown.
When Request Status Changes	When the data request status changes (for example, returns success or failed status), a triggering event is triggered and data is thrown.
When Clicking An Area	When clicking a certain area of the layer, data is thrown.
When Double-clicking An Area	When double-clicking a certain area of the layer, data is thrown.
When Clicking Outside The Layer Area	When clicking outside the layer area, data is thrown.
When Mouseover A Feature	When mouseover a certain area of the layer, a triggering event is triggered and data is thrown.
When Mouseout Of A Feature	When mouseout of a certain area of the layer, a triggering event is triggered and data is thrown.
When Mouse Moves Over A Feature	When the mouse moves over a certain area of the layer, a triggering event is triggered and data is thrown.
Component Loading Complete	After the data interface request returns and is processed by the filter, a triggering event is thrown, and the processed JSON format data is also thrown. For specific data examples, see the Data Source tab in the configuration panel on the right side of the component in the canvas editor, in the Data Response Result area.

Action

Action	Description
Import Interface	After processing the data in the component rendering format, import the component and redraw. There is no need to request server-side data again. For specific data examples, see the Data Source tab in the configuration panel on the right side of the component in the canvas editor, in the Data Response Result area.
Request Interface	Request server-side data again. The data thrown by the input data processing node or layer node will be used as parameters. For example, if the basic polygon layer is configured with an API data source as `https://api.test`, and the data passed to the Request Data Interface action is `{ id: '1'}`, the final request interface will be `https://api.test?id=1`.
Toggle Visibility	Toggle the component display or hide. No parameters are needed.
Show	Show the component. Refer to the data example. `{ "animationType": "",//Animation method. Optional value: fade. No animation if not filled. "animationDuration": 1000,//Animation delay, in ms. "animationEasing": ""//Animation curve }`
Hide	Hide the component. Refer to the data example. `{ "animationType": "",//Animation method. Optional value: fade. No animation if not filled. "animationDuration": 1000,//Animation delay, in ms. "animationEasing": ""//Animation curve }`
Update Component Configuration	Dynamically update the style configuration of the component. First, in the Style panel of the component, click Copy Configuration To Clipboard to obtain the component configuration data. Then, change the field values of the corresponding style in the data processing node on the blueprint editor configuration page as needed.