Bezier Curve Editing Plugin

AMap.BezierCurveEditor Bezier Curve Editing Plugin supports modifying existing curves or dynamically drawing curves directly on the map, adjusting the shape of the curves through graphical interaction, thereby achieving real-time editing and drawing

Example of Curve Editing

1、Bezier Curve Editing Plugin BezierCurveEditor

const map = new AMap.Map("container", {
  zoom: 14, 
  center: [100.491422, 13.749313],
  showOversea: true, //Enable world Map
  mapStyle: "amap://styles/whitesmoke", 
  viewMode: "2D", 
});
//2D Array of Start Points, Waypoints, and Control Points for Bezier Curve
var startPoint = [[100.469964, 13.771655]]; //Start Point
var viaPoint1 = [
  //Linear Bezier Curve
  [100.468763, 13.763819], //Control Point
  [100.473483, 13.763903], //Waypoint
];
var viaPoint2 = [
  //Quadratic Bezier Curve
  [100.473312, 13.751897], //Control Point 1
  [100.476058, 13.752064], //Control Point 2
  [100.476058, 13.748729], //Waypoint
];
var endPoint = [
  //Linear Bezier Curve
  [100.479663, 13.734389], //Control Point
  [100.4861, 13.734139], //Waypoint
];
//Curve path configuration
var path = [
  startPoint,
  viaPoint1,
  viaPoint2,
  endPoint
]; 
var bezierCurve = new AMap.BezierCurve({
  path: path, 
  strokeWeight: 5, 
  strokeColor: "#fff", 
  isOutline: true, 
  outlineColor: "red", 
  borderWeight: 3, 
});
map.add(bezierCurve);

//Introduce the Bezier curve editor plugin
map.plugin(["AMap.BezierCurveEditor"], function () {
  //Instantiate the Bezier curve editor, passing in the map instance and the Bezier curve instance to be edited
  var bezierCurveEditor = new AMap.BezierCurveEditor(map, bezierCurve);
  //Enable edit mode
  bezierCurveEditor.open();
  //Bind the adjust event, which is triggered when adjusting a point on the curve
  bezierCurveEditor.on("adjust", function (event) {
    console.log("Trigger event：adjust");
  });
});