Basic polygon layer (v4.x)

Chart style

The basic polygon layer is a sub-widget of Basic Flat Map 4.0 that supports independent style, data, and interaction configurations, including area color, borders, mouse events, and location information. It displays regional information as tiles on the map.

The following images show example effects rendered with this layer.

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: Configure general parameters for the layer.

  Parameter	Description
  Visible Level	Sets the zoom level range in which the layer is visible.
  Opacity	Sets the layer opacity. Valid values: 0 to 100. Unit: %. A higher value makes the layer more opaque.

• Graphic: Configure graphic style parameters for the layer.

  Parameter	Description
  Fill Color	Configures fill colors mapped to maximum, minimum, and empty data values. For more information, see Color mapper instructions.
  Outline Style	Sets the color, thickness, and type of area border lines. 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 gap.

• Interaction: Configure interaction settings for the layer.

  Graphic Interaction: In preview or publish mode, interaction styles are displayed when you click or hover over map elements. Click the icon next to Graphic Interaction to enable or disable the Graphic Interaction feature.

  Parameter	Description
  Click State	Configures the graphic and label. Click the icon to enable or disable the click state for Graphic Interaction. Graphic: Sets the graphic style of the basic polygon layer in the Click State, including Fill Color and Outline Style.
  Hover State	Configures the graphic and label. Click the icon to enable or disable the hover state for Graphic Interaction. Graphic: Sets the graphic style of the basic polygon layer in the Hover State, including Fill Color and Outline Style.

• Conditional: Configure conditional styles to apply specific colors to areas that match filter conditions.

  Conditional Style: Set special conditions. For more information, see Conditional tree instructions.

  Graphic: Toggle this switch to enable or disable graphic settings for this style.

  Parameter	Description
  Fill Color	Click the icon to toggle the fill color for areas that match this condition.

• Custom Tooltip Style: Configure the custom tooltip style. Use the info field for tooltip content. This field supports HTML snippets.

  Parameter	Description
  Dialog Switch	Turn on the switch to trigger the tooltip by Click or Hover.
  Display Mode	Sets the tooltip trigger mode: Click or Hover.
  Relative Offset	Sets the horizontal and vertical offset of the tooltip. Valid values: -1000 to 1000. Unit: px.
  Text Style	Sets the tooltip text style, including font family, size, color, and weight.
  Show Empty Values	Turn on the switch to display "No data" in the tooltip for objects that have no info field or an empty info field. If you turn off the switch, no tooltip appears for data without an info field.
  Dialog Style	Padding: Sets the padding values for the top, bottom, left, and right sides of the tooltip text. Border Style: Sets the border radius, line width, and color of the tooltip border. Background Color: Sets the background color of the tooltip. Shadow Style: Sets the blur color, blur radius, X offset, and Y offset of the tooltip shadow. Close Button: Turn on the switch to display a close button in the tooltip and set the button's color. Pointer Arrow: Turn on the switch to display a pointer arrow for the tooltip.

Data Source panel

This layer requires GeoJSON data that includes your business data. For details, see the sample data. The field mappings are as follows:

Advanced panel

Configure interaction events or associate global variables to enable filter interactions between widgets. For more information, see Configure widget interactions.

Blueprint interaction

1. Click the icon in the upper-left corner of the page to open the Blueprint page.

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

3. View the blueprint configuration parameters:

   Note

   To view the parameter tooltips for layer events and actions, click the icon in the anchor point configuration on the right of the canvas.

   • Events

     Event	Description
     When Data Is Updated	Triggered when the data response changes. Returns the updated data.
     When Data Request Status Changes	Triggered when the data request status changes, such as to success or failure.
     When an Area Is Clicked	Triggered when a layer area is clicked. Returns the area data.
     When an Area Is Double-Clicked	Triggered when a layer area is double-clicked. Returns the area data.
     When an Area Outside the Layer Is Clicked	Triggered when an area outside the layer is clicked. Returns the event data.
     When Mouse Enters an Element	Triggered when the mouse pointer enters a layer area. Returns the event data.
     When Mouse Leaves an Element	Triggered when the mouse pointer leaves a layer area. Returns the event data.
     When Mouse Moves Over an Element	Triggered when the mouse pointer moves over a layer area. Returns the event data.
     Component Loaded	Triggered after a data API request is returned and processed by a filter. Outputs the processed data in JSON format. For a data example, see the Data Response area on the Data Source tab in the configuration panel on the right of the canvas editor.

   • Actions

     Action	Description
     Import API	Processes data in the widget's rendering format and imports it into the widget for re-rendering, without sending a new request to the server. For a data example, see the Data Response section on the Data Source tab in the widget's configuration panel on the right side of the canvas editor.
     Request API	Re-requests server-side data, using data from the input data processing node or layer node as parameters. For example, if the basic polygon layer's API data source is https://api.test and the data passed to the Request Data API action is { id: '1'}, the final request URL is https://api.test?id=1.
     Toggle Visibility	The Toggle Visibility, Show, and Hide actions do not require parameters by default. You can add animation configurations as needed. See the sample data. { // The animation method. Options: appear|fade|slideToUp. Default value: fade. If left empty, there is no animation. "animationType": "fade", // The animation duration. Default value: 1000. Unit: ms. "animationDuration": 1000, // The animation curve. Options: linear|easeInOutQuad|easeInOutExpo. Default value: linear. "animationEasing": "linear" }
     Show
     Hide
     Update Widget Configuration	Dynamically updates the widget's style configuration. In the widget's Style panel, click Copy Configuration to Clipboard to get the configuration data. Then, in the data processing node on the blueprint editor, modify the field values as needed.