Bezier Curve Editing Plugin 最后更新时间: 2026年07月01日

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");
  });
});