Ellipse

AMap.Ellipse

Construct an ellipse object, specify the ellipse style via EllipseOptions

new AMap.Ellipse(opts: EllipseOptions)

Tutorial

Parameter

opts (EllipseOptions): Circle parameters

Attribute	Type	Description
center	LngLat	The center position of the ellipse, supports passing in a longitude and latitude object or a one-dimensional array of longitude and latitude, such as: new AMap.LngLat(77.19, 28.59) or [77.19, 28.59]
radius	[number, number]	The radius of the ellipse, represented by an array of 2 elements, unit: meters. For example: radius: [1000, 2000] indicates a horizontal radius of 1000 and a vertical radius of 2000, default value: [1000, 1000]
zIndex	number	The stacking order of ellipse 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 ellipse. 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	Contour line color, assigned using hexadecimal color code. Default value: #00D3FC
strokeOpacity	number	Contour line transparency, range [0 ~ 1], 1 represents completely opaque, 0 represents completely transparent. Default value: 0.9
strokeWeight	number	Contour line width, default value: 2
fillColor	string	Ellipse fill color, assigned using hexadecimal color code, default value: #00B2D5
fillOpacity	number	Ellipse fill transparency, range [0 ~ 1], 1 represents completely opaque, 0 represents completely transparent. Default value: 0.5
draggable	boolean	Set whether the ellipse is draggable, default value: false
height	number	Set whether the ellipse is drawn off the ground, default value is 0; when greater than 0, it is drawn off the ground, at which point the plane height of the ellipse equals the height value plus the elevation value of the centroid point of the Ellipse. The current plane height of the ellipse can be obtained through the getPlaneHeight method (this attribute applies to v2.1JSAPI and above)
extData	object	User-defined attributes support any data type of JavaScript API, such as the id of Circle. 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 the dashed line and gap 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 dashed line

Demo

var ellipse = new AMap.Ellipse({
  center: new AMap.LngLat(100.49331, 13.750897),
  radius: [2000, 1000], 
});
//Add Ellipse object to Map
map.add(ellipse);

Method

setCenter(center)

Set the center point of the ellipse

Parameter: center (LngLat) Latitude and longitude of the center point

Demo:

ellipse.setCenter(new AMap.LngLat(116.433322, 39.900255));

setRadius(radius)

Set the radius of the ellipse

Parameter: radius([number, number]) Ellipse's radius

Demo:

ellipse.setRadius([2000, 1000]);

setHeight(height)

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

Parameter: height (Number) Ellipse's height above ground

Demo:

ellipse.setHeight(0);

getCenter()

Get the center of the ellipse

return value: (LngLat) Latitude and longitude information of the ellipse center point

Demo:

ellipse.getCenter();

getRadius()

Get the radius of the ellipse

return value: ([number,number]) Radius of the ellipse

Demo:

ellipse.getRadius();

hide()

Hide the ellipse

Demo:

ellipse.hide();

setOptions(optsArg)

Modify the properties of the ellipse (including the nodes that make up the outline, the outline style, etc.), does not support modifying the center position and radius

Parameter: optsArg(EllipseOptions) Properties of the ellipse

Demo:

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

getPlaneHeight()

Get the height value of the current plane (this method is applicable to JSAPI v2.1Beta and above)

return value: (Number) Height value of the current plane

Demo:

ellipse.getPlaneHeight();

show()

Display ellipse

Demo:

ellipse.show();

getExtData()

Get user-defined properties

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

Demo:

ellipse.getExtData();

setExtData(extData)

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

Parameter: extData (Object) User-defined data

Demo:

ellipse.setExtData({id:1});

destroy()

Destroy memory - ellipse

Demo:

ellipse.destroy();

getArea()

Get the area of the ellipse, unit: square meters

return value: (number) Area of the ellipse

Demo:

ellipse.getArea();

contains(point)

Determine if the Specified Point Coordinates are Inside the Ellipse

Parameter: point (LngLatLike) Specified Point Coordinates

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

Demo:

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

getOptions()

Get Properties of an Ellipse

return value: (EllipseOptions) Properties of an Ellipse

Demo:

ellipse.getOptions();

getPath()

Get Ellipse Contour Node Array

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

Demo:

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