开发 地图 JS API 2.0 进阶教程 线 贝塞尔曲线编辑插件

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

AMap.BezierCurveEditor贝塞尔曲线编辑插件,支持对原有的曲线进行修改或直接在地图上动态绘制曲线,通过图面交互调整曲线的形状,从而实现实时编辑和绘制

曲线的编辑示例

1、贝塞尔曲线编辑插件 BezierCurveEditor

1

1.1 准备

成为开发者并创建 key

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

提示

你在2021年12月02日以后申请的 key 需要配合你的安全密钥一起使用。

2

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);
3

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

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

bezierCurveEditor.open()为开始编辑对象的方法,如果你想结束编辑可以调用bezierCurveEditor.close()方法。

返回顶部 示例中心 常见问题 智能客服 公众号
二维码