Document Maps JavaScript API Reference Manual Vector Graphics Polygon

Polygon

AMap.Polygon

Construct a polygon object, specify the polygon style through PolygonOptions

new AMap.Polygon(opts: PolygonOptions)

Parameter

opts (PolygonOptions)Polygon parameters

Attribute

Type

Description

path

Array<LngLat> | Array<Array<LngLat>>

The array of node coordinates for the polygon outline. Supports single ordinary polygons ([lnglat, lnglat, ...]), single polygons with holes ([[lnglat, lnglat, ...], [lnglat, lnglat, ...]]), and multiple polygons with holes ([[lnglat, lnglat, ...], [lnglat, lnglat, ...], [lnglat, lnglat, ...], ...])

zIndex

number

The stacking order of polygon overlays. When multiple polygon overlays are stacked on the map, this property ensures that the higher-level polygon overlays are displayed on top, default value: 10

bubble

boolean

Whether to bubble mouse or touch events of the overlay to the map (added in v1.3), default value: false

cursor

string

Specify the style when the mouse hovers over the polygon. Custom styles should comply with the CSS cursor property specification. IE only supports cur/ani/ico formats, Opera does not support custom cursors

strokeColor

string

Outline color, assigned using hexadecimal color code. Default value: #00D3FC

strokeOpacity

number

Outline transparency, range [0 ~ 1], 1 means completely opaque, 0 means completely transparent. Default value: 0.9

strokeWeight

number

Outline width, default value: 2

fillColor

string

Polygon fill color, assigned using hexadecimal color code, default value: #00B2D5

fillOpacity

number

The fill opacity of the polygon, range [0 ~ 1], 1 represents completely opaque, 0 represents completely transparent. Default value: 0.5

draggable

boolean

Set whether the polygon is draggable, default value: false

height

number

Set whether the polygon is drawn above the ground, default value: 0. When greater than 0, it is drawn above the ground, and the plane height equals the height attribute value plus the absolute elevation of the polygon centroid. The current plane height can be obtained through the getPlaneHeight() method (this attribute is applicable to JSAPI v2.1Beta and above).

extrusionHeight

number

Set whether the polygon is extruded to the height of the extrusion, effective in 3D mode. Default value: 0

wallColor

Array<String> | String

The side color of the polygon extrusion, supports rgba, rgb, hexadecimal, etc. Default value: #00D3FC

roofColor

Array<String> | String

The top face color of the polygon extrusion, supports rgba, rgb, hexadecimal, etc. Default value: #00B2D5

extData

object

User-defined properties, supporting any data type in the JavaScript API, such as the id of a Polygon. Custom data can be saved on this property for subsequent operations.

strokeStyle

"solid" | "dashed"

Outline style, solid: "solid", dashed: "dashed", default value: "solid"

strokeDasharray

Array<number>

The style of dashes and gaps for outlining the shape, this property is effective when strokeStyle is dashed, and it is effective in IE9+ browsers. Values: Solid line: [0,0,0] Dashed line: [10,10], [10,10] represents a dashed line composed of 10 pixels of solid line and 10 pixels of blank space (repeating). Dotted line: [10,2,10], [10,2,10] represents a dashed line composed of 10 pixels of solid line and 2 pixels of blank space + 10 pixels of solid line and 10 pixels of blank space (repeating).

Demo

//Node coordinate array of the polygon contour
var path = [
  new AMap.LngLat(99.907748, 14.210075),
  new AMap.LngLat(99.945608, 13.444189),
  new AMap.LngLat(101.441075, 13.612899),
  new AMap.LngLat(101.327495, 14.323209),
];
//Create a Polygon instance
var polygon = new AMap.Polygon({
  path: path, 
  fillColor: "#fff",
  strokeWeight: 2, 
  strokeColor: "red",
}); 
map.add(polygon);

Method

hide()

Hide polygon

Demo:

polygon.hide();

show()

Show polygon

Demo:

polygon.show();

getExtData()

Get user-defined attributes

return value: (Object) The value set for the extData property, returns an empty object if not set

Demo:

polygon.getExtData();

setExtData(extData)

Set user-defined attributes, supporting any data type in JavaScript API

ParameterextData (Object) User-defined data

Demo:

polygon.setExtData({id:1});

getOptions()

Get polygon attributes

return value: (Object) Polygon configuration

Demo:

polygon.getOptions();

setOptions(PolygonOptions)

Modify polygon attributes (style, including nodes that form the polygon outline, outline style, etc. For attribute details, refer to the PolygonOptions list)

ParameterPolygonOptions (Object) Properties of Polygon

Demo:

polygon.setOptions({ fillColor: "#333" });

getPath()

Get Polygon Outline Node Array

return value: (Array<LngLat> | Array<Array<LngLat>>Return Path

Demo:

polygon.getPath();

setHeight(height)

Set Polygon Height Above Ground (This method and the related property height are applicable to JSAPI v2.1Beta and above)

Parameterheight (Number) Polygon Height Above Ground

Demo:

polygon.setHeight(0);

setExtrusionHeight(extrusionHeight)

Set elevation value

ParameterextrusionHeight (number) Elevation value

Demo:

polygon.setExtrusionHeight(0);

getExtrusionHeight()

Get elevation value

return value: (number) Elevation value

Demo:

polygon.getExtrusionHeight();

getBounds()

Obtain a rectangular range that can completely contain the given polygon, with the latitude and longitude values of the southwest and northeast corners of the rectangle completely enclosing the given polygon

return value: (Bounds) Rectangular extent that fully contains the polygon (latitude and longitude coordinates of the southwest and northeast corners)

Demo:

polygon.getBounds();

destroy()

Destroy Memory - Polygon

Demo:

polygon.destroy();

getArea(isTerrain)

Get the area of the polygon (unit: square meters)

ParameterisTerrain (Boolean) Specifies whether to measure area based on terrain. If set to true, the area calculation will consider terrain undulations; if set to false or not set, it will default to measuring area on a flat plane. Default value: false

return value: (Bounds) Area Value

Demo:

polygon.getArea(false);

contains(originPoint)

Determine whether the coordinate is inside the polygon

ParameteroriginPoint (Vector2 | LngLat) The coordinate point to be judged, such as: AMap.LngLat(116.39,39.9) or [116.39, 39.9]

return value: (boolean) true includes, false excludes

Demo:

polygon.contains(new AMap.LngLat(116.39, 39.9));

setPath(path?)

Set the array of node coordinates for the polygon outline. Supports a single regular polygon ([lnglat, lnglat, ...]), a single polygon with holes ([[lnglat, lnglat, ...], [lnglat, lnglat, ...]]), and multiple polygons with holes ([[lnglat, lnglat, ...], [lnglat, lnglat, ...], [lnglat, lnglat, ...], ...])

Parameterpath (Array<LngLat> | Array<Array<LngLat>> ) Array of node coordinates for the polygon outline

Demo:

var path = [
  new AMap.LngLat(116.368904, 39.913423),
  new AMap.LngLat(116.387271, 39.912501),
  new AMap.LngLat(116.398258, 39.9046),
];
polygon.setPath(path);

getPlaneHeight()

Obtain the absolute elevation value of the off-ground polygon plane (This method is applicable to JSAPI v2.1Beta and above)

return value: (number) Elevation value of the polygon plane

Demo:

polygon.getPlaneHeight();

Event

Event Name

Description

hide

Triggered when the overlay is hidden

show

Triggered when the overlay is displayed

click

Left Mouse Click Event

dblclick

Left Mouse Double Click Event

rightclick

Right Mouse Click Event

mousedown

Event triggered when the mouse is pressed on a point marker

mouseup

Event triggered when the mouse is pressed and then released on a point marker

mouseover

Mouse over

mouseout

Mouse out

dragstart

Event triggered when starting to drag a point marker

dragging

Event triggered when the mouse drags and moves a point marker

dragend

Event triggered when dragging and moving a point marker ends

touchstart

Event triggered when touch starts, only applicable to mobile devices

touchmove

Event triggered during touch movement, only applicable to mobile devices

touchend

Event triggered when touch ends, only applicable to mobile devices

For event object property descriptions, go to:MapsEvent