折线编辑插件 PolyEditor 最后更新时间: 2024年10月11日

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

折线的编辑示例

点击新建 Polyline 后，点击地图任意位置，开始绘制折线。

亲手试一试

下载完整代码

1、折线编辑器 Polyline

1.1 准备

成为开发者并创建 key

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

提示

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

1.2 创建折线 Polyline 实例并添加到 Map

const map = new AMap.Map("container", {
  zoom: 12, //地图级别
  center: [116.397428, 39.90923], //地图中心点
  mapStyle: "amap://styles/whitesmoke", //设置地图的显示样式
  viewMode: "2D", //设置地图模式
});
//折线的节点坐标数组，每个元素为 AMap.LngLat 对象
var path = [
  new AMap.LngLat(116.368904, 39.913423),
  new AMap.LngLat(116.382122, 39.901176),
  new AMap.LngLat(116.387271, 39.912501),
  new AMap.LngLat(116.398258, 39.9046),
];
var polyline = new AMap.Polyline({
  path: path,
  borderWeight: 2, //线条宽度，默认为1
  strokeColor: "red", //线条颜色
  lineJoin: "round", //折线拐点连接处样式
});
//折线 polyline 对象添加到 Map
map.add(polyline);

查看详细AMap.Polyline折线教程

1.3 构造折线编辑对象，并开启折线的编辑状态

//引入折线编辑器插件
map.plugin(["AMap.PolylineEditor"], function () {
  //实例化折线编辑器，传入地图实例和要进行编辑的折线实例
  polylineEditor = new AMap.PolylineEditor(map, polyline);
  //开启编辑模式
  polylineEditor.open();
});

提示

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

查看AMap.Polyline全部属性和方法