Drawing and Editing Ellipses

AMap.Ellipse can draw ellipses. This article explains how to draw and edit ellipses on a map, and how to set properties such as fill color and outline style.

Example of Drawing and Editing an Ellipse

1、Draw an Ellipse

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: 13, 
});

1.2 Set the center and radius of the ellipse

var center = new AMap.LngLat(100.49331, 13.750897); //Set the center position of the ellipse
var radius = [2000, 1000]; //Set the radius of the ellipse, in meters, 2000 represents the major axis radius, 1000 represents the minor axis radius

1.3 Create an Ellipse instance

var ellipse = new AMap.Ellipse({
  center: center, //Ellipse center position
  radius: radius, //The radius size of the ellipse
  strokeColor: "#FF33FF", 
  strokeWeight: 6, 
  strokeOpacity: 0.2, 
  fillOpacity: 0.4, 
  strokeStyle: "dashed", //Outline line style, dashed line, also supports solid, solid line
  strokeDasharray: [20, 10], //The style of the dashed line and gap outlining the shape, 20 represents the length of the line segment, 10 represents the length of the gap
  fillColor: "#1791fc", 
  zIndex: 50, 
});

1.4 Add Ellipse object to Map

//Add Ellipse object to Map
map.add(ellipse);
//Zoom the map to the appropriate level of view
map.setFitView([ellipse])

1.5 Adding Events to Ellipse

ellipse.on("mouseover", () => { 
  ellipse.setOptions({ //Method for Modifying Ellipse Properties
    fillOpacity: 0.7,
    fillColor: "#7bccc4",
  });
});

ellipse.on("mouseout", () => { 
  ellipse.setOptions({
    fillOpacity: 0.4,
    fillColor: "#1791fc",
  });
});

2、Ellipse Editing

AMap.EllipseEditor ellipse editing plugin supports modifying existing ellipses or dynamically drawing ellipses directly on the map by adjusting the position and size of the ellipse, thereby achieving real-time editing and drawing

2.1 Construct the ellipse editing object and enable the editing state of the ellipse

//Introduce the ellipse editor plugin
map.plugin(["AMap.EllipseEditor"], function () {
  //Instantiate the ellipse editor, passing in the map instance and the ellipse instance to be edited
  var ellipseEditor = new AMap.EllipseEditor(map, ellipse);
  //Enable edit mode
  ellipseEditor.open();
});

3、Description of properties and methods involved in this chapter

3.1 AMap.Ellipse