贝塞尔曲线编辑插件 BezierCurveEditor 最后更新时间: 2024年08月02日

1.1 准备

1.2 创建贝塞尔曲线 BezierCurve 实例并添加到 Map

//创建地图
const map = new AMap.Map("container", {
  zoom: 12, //地图级别
  center: [116.397428, 39.90923], //地图中心点
  mapStyle: "amap://styles/whitesmoke", //设置地图的显示样式
  viewMode: "2D", //设置地图模式
});
//创建路径
var path = [
  //每个弧线段有两种描述方式
  [116.37, 39.91], //起点
  //第一段弧线,弧线段有两种描述，方式1
  [116.380298, 39.907771, 116.38, 39.9], //控制点，途经点
  //第二段弧线
  [116.385298, 39.907771, 116.4, 39.9], //控制点，途经点 
  //第三段弧线,弧线段有两种描述，方式2
  [   
    [116.392872, 39.887391], //控制点
    [116.40772, 39.909252], //控制点
    [116.41, 39.89], //途经点
  ],
  //第四段弧线
  [116.423857, 39.889498, 116.422312, 39.899639, 116.425273, 39.902273],
  //控制点，控制点，途经点，每段最多两个控制点
];
//创建贝塞尔曲线实例
var bezierCurve = new AMap.BezierCurve({
  path: path,
  isOutline: true,
  outlineColor: "#ffeeff",
  borderWeight: 3,
  strokeColor: "#3366FF",
  strokeOpacity: 1,
  strokeWeight: 6,
  strokeStyle: "solid", //实线，线样式还支持'dashed'虚线
  //strokeDasharray: [20, 10], //虚线间隙的样式 strokeStyle 是 dashed 时有效, 20代表线段长度 10代表间隙长度
  lineJoin: "round",
  lineCap: "round",
  zIndex: 50,
});
//将贝塞尔曲线添加至地图实例
map.add(bezierCurve);

构造贝塞尔曲线编辑对象，并绑定事件

//引入贝塞尔曲线编辑器插件
map.plugin(["AMap.BezierCurveEditor"], function () {
  //实例化贝塞尔曲线编辑器，传入地图实例和要进行编辑的贝塞尔曲线实例
  var bezierCurveEditor = new AMap.BezierCurveEditor(map, bezierCurve);
  //开启编辑模式
  bezierCurveEditor.open();
  //绑定 adjust 事件，调整曲线上某个点时触发此事件
  bezierCurveEditor.on("adjust", function (event) {
    console.log("触发事件：adjust");
  });
});