Circle Drawing and Editing
AMap.Circle can draw circles. This article introduces how to draw and edit circles on the map, and set properties such as fill color, stroke color, and outline style.
Example of Circular Overlay
Both AMap.CircleMarker and AMap.Circle classes can draw circles on the map. The difference is that AMap.Circle is a vector graphic class, which changes size with map zoom; whereas AMap.CircleMarker does not change with map zoom, but it has lower performance consumption. If you want to represent a circular marker, it is recommended to use AMap.CircleMarker. If you want to represent a circular area, it is recommended to use AMap.Circle.
1、Draw circle
1.1 Create Map
var map = new AMap.Map("container", {
center: [100.491422, 13.749313],
showOversea: true, //Enable world Map
mapStyle: "amap://styles/whitesmoke",
viewMode: "2D",
zoom: 14,
});1.2 Set the center position and radius
//Set circle position
var center = new AMap.LngLat(100.491422, 13.749313);
//Set the radius of the circle
var radius = 1000;1.3 Create Circle instance
var circle = new AMap.Circle({
center: center, //Center of the Circle
radius: radius,
borderWeight: 3,
strokeColor: "#FF33FF",
strokeOpacity: 1,
strokeWeight: 6,
fillOpacity: 0.4,
strokeStyle: "dashed",
strokeDasharray: [10, 10],
fillColor: "#1791fc",
zIndex: 50,
});1.4 Add Circle object to Map
//Add Circle object to Map
map.add(circle);
//Adjust the view based on the coverage area
map.setFitView([ circle ])To delete an existing Circle object, use: map.remove(circle).
1.5 Add events to Circle
circle.on("mouseover", function () {
console.log("Mouse Enter");
}); 2、Circle editing
AMap.CircleEditor is a circle editing plugin that supports modifying existing circles or dynamically drawing circles on the map, enabling real-time editing and drawing by adjusting the position and size of the circle.
2.1 Construct the circle editing object and enable the editing state of the circle
//Introduce the circle editor plugin
map.plugin(["AMap.CircleEditor"], function () {
//Instantiate the circle editor, pass in the map instance and the circle instance to be edited
var circleEditor = new AMap.CircleEditor(map, circle);
//Enable edit mode
circleEditor.open();
});circleEditor.open() is the method to start editing the object, if you want to end the editing you can call the circleEditor.close() method.