开发 地图 JS API 2.0 进阶教程 线 折线编辑插件

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

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

折线的编辑示例

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

1、折线编辑器 Polyline

1

1.1 准备

成为开发者并创建 key

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

提示

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

2

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

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

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

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

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