Rectangle

AMap.Rectangle

Construct a rectangle object, specifying the rectangle style through RectangleOptions

new AMap.Rectangle(opts: RectangleOptions)

Tutorial

Parameter

opts (RectangleOptions): Rectangle parameters

Attribute	Type	Description
map	Map	The map object on which to display the overlay
bounds	Bounds	The extent of the rectangle, defined by the latitude and longitude coordinates of the southwest and northeast corners
zIndex	number	The stacking order of rectangular overlays. When multiple overlays are stacked on the map, this property ensures that overlays with higher levels are displayed on top, default value: 10
bubble	boolean	Whether to bubble the 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 rectangle. 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	Rectangle fill color, using hexadecimal color code assignment, default value: #00B2D5
fillOpacity	number	Rectangle fill transparency, value range [0 ~ 1], 1 represents completely opaque, 0 represents completely transparent. Default value: 0.5
draggable	boolean	Set whether the rectangle is draggable, default value: false
height	number	Set whether the rectangular plane is drawn above the ground, the default value is 0; when it is greater than 0, it is drawn above the ground, at this time the height of the rectangular plane is equal to the height value plus the elevation value of the centroid point of Rectangle, and the current plane height value can be obtained through the getPlaneHeight method. (This attribute is applicable to JSAPI 2.1Beta and above versions)
extData	object	User-defined attribute, supports any data type of JavaScript API, such as the id of Rectangle. Custom data can be saved on this attribute for subsequent operations
strokeStyle	"solid" \| "dashed"	Outline style, solid: "solid", dashed: "dashed", default value: "solid"
strokeDasharray	Array<number>	The style of dashed lines and gaps outlining the shape, this property is valid when strokeStyle is dashed, this property is valid 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 (repeatedly) dotted line: [10,2,10], [10,2,10] represents 10 pixels of solid line and 2 pixels of blank + 10 pixels of solid line and 10 pixels of blank (repeatedly) composed of dashed line

Demo

//Set the rectangular range, consisting of the latitude and longitude coordinates of the southwest and northeast corners
var southWest = new AMap.LngLat(100.456575, 13.74256); //Latitude and longitude coordinates of the southwest corner
var northEast = new AMap.LngLat(100.518716, 13.762569); //Latitude and longitude coordinates of the northeast corner
var bounds = new AMap.Bounds(southWest, northEast); //Create a latitude and longitude bounding box for a feature object
var rectangle = new AMap.Rectangle({
  bounds: bounds, 
});
map.add(rectangle);

Method

contains(point)

determine whether the specified point coordinates are inside the rectangle

Parameter: point (LngLatLike) specified point coordinates

return value: (boolean) true (coordinates are inside the rectangle), false (coordinates are outside the rectangle)

Demo:

rectangle.contains(new AMap.LngLat(116.433322, 39.900255));

setBounds(bounds)

Set the range of the rectangle

Parameter: bounds(Bounds) The range of the rectangle, composed of the latitude and longitude coordinates of the southwest and northeast

Demo:

//Set the rectangular range, consisting of the latitude and longitude coordinates of the southwest and northeast corners
var southWest = new AMap.LngLat(100.456575, 13.74256); //Latitude and longitude coordinates of the southwest corner
var northEast = new AMap.LngLat(100.518716, 13.762569); //Latitude and longitude coordinates of the northeast corner
var bounds = new AMap.Bounds(southWest, northEast); //Create a latitude and longitude bounding box for a feature object
rectangle.setBounds(bounds);

setOptions(optsArg)

Modify rectangle properties (style, including nodes that compose the rectangle outline, outline style, etc.), setting the rectangle range is not supported

Parameter: optsArg (RectangleOptions) Properties of the rectangle

Demo:

rectangle.setOptions({
  borderWeight: 3, 
  strokeColor: "#FF33FF", 
});

getPlaneHeight()

Get the current rectangular plane height value (This method is applicable to JSAPI 2.1Beta and above versions)

return value: (Number) The height value of the current plane

Demo:

rectangle.getPlaneHeight();

hide()

Hide the rectangle

Demo:

rectangle.hide();

setHeight(height)

Set the height of the rectangle above the ground (This method and the related property height are applicable to JSAPI v2.1Beta and above)

Parameter: height (Number) The height of the rectangle above the ground

Demo:

rectangle.setHeight(0);

getCenter()

Get the center point of the rectangle

return value: (LngLat) Latitude and longitude information of the rectangle's center point

Demo:

rectangle.getCenter();

show()

Display rectangle

Demo:

rectangle.show()

getExtData()

Get user-defined properties

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

Demo:

rectangle.getExtData();

setExtData(extData)

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

Parameter: extData (Object) User-defined data

Demo:

rectangle.setExtData({id:1});

destroy()

Destroy memory - rectangle

Demo:

rectangle.destroy();

getArea()

Get the area of the rectangle, unit: square meters

return value: (number) Area of the rectangle

Demo:

rectangle.getArea();

getOptions()

Get rectangle properties

return value: (RectangleOptions) Properties of Rectangle

Demo:

rectangle.getOptions();

getPath()

Get Rectangle Outline Node Array

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

Demo:

rectangle.getPath();

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
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