贝赛尔曲线编辑插件 BezierCurveEditor 最后更新时间: 2023年03月23日

亲手试一试

下载完整代码

BezierCurveEditor 插件提供了对贝赛尔曲线进行编辑能力。

准备

成为开发者并创建 key

为了正常调用 API ，请先注册成为高德开放平台开发者，并申请 web 平台（JS API）的 key 和安全密钥，点击具体操作。

贝赛尔曲线编辑插件 BezierCurveEditor

具体使用方式如下：

创建地图

const map = new AMap.Map('container',{
    zoom: 10,  //设置地图显示的缩放级别
    center: [116.397428, 39.90923],  //设置地图中心点坐标
    mapStyle: 'amap://styles/whitesmoke',  //设置地图的显示样式
    viewMode: '2D'  //设置地图模式
});

创建路径

var path = [//每个弧线段有两种描述方式
  [116.37, 39.91],//起点
  //第一段弧线
  [116.380298, 39.907771, 116.38, 39.90],//控制点，途经点
  //第二段弧线
  [116.385298, 39.907771, 116.40, 39.90],//控制点，途经点//弧线段有两种描述方式1
  //第三段弧线
  [//弧线段有两种描述方式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,
  // 线样式还支持 'dashed'
  strokeStyle: "solid",
  // strokeStyle是dashed时有效
  strokeDasharray: [10, 10],
  lineJoin: 'round',
  lineCap: 'round',
  zIndex: 50,
})

将贝赛尔曲线添加至地图实例

map.add(bezierCurve);

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

// 引入贝塞尔曲线编辑器插件
map.plugin(["AMap.BezierCurveEditor"],function(){
   // 实例化多边形编辑器，传入地图实例和要进行编辑的多边形实例
   var bezierCurveEditor = new AMap.BezierCurveEditor(map, bezierCurve)

    bezierCurveEditor.on('addnode', function(event) {
        log.info('触发事件：addnode')
    })

    bezierCurveEditor.on('adjust', function(event) {
        log.info('触发事件：adjust')
    })

    bezierCurveEditor.on('removenode', function(event) {
        log.info('触发事件：removenode')
    })

    bezierCurveEditor.on('end', function(event) {
        log.info('触发事件： end')
        // event.target 即编辑后的曲线对象
    })
});

查看全部属性和方法