面编辑 PolyEditor 最后更新时间: 2023年12月04日

如果你想对地图上已有的多边形面进行编辑，可以使用AMap.PolygonEditor矢量图形编辑工具插件。

多边形编辑示例

亲手试一试

下载完整代码

提示

矢量面图形的编辑工具支持包括：多边形编辑工具 PolygonEditor，椭圆编辑插件 EllipseEditor，矩形编辑插件RectangleEditor，这些工具均可以在引入后，对此类型覆盖物的多种属性进行编辑。

1、多边形编辑工具的实现

1.1 准备

成为开发者并创建 key

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

提示

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

1.2 创建多边形 Polygon 实例并添加到 Map

var map = new AMap.Map("container", {
  center: [121.045332, 31.19884], //地图中心点
  mapStyle: "amap://styles/whitesmoke", //设置地图的显示样式
  viewMode: "2D", //设置地图模式
  zoom: 8.8, //地图级别
});
//多边形轮廓线的节点坐标数组
var path = [
  new AMap.LngLat(116.368904, 39.913423),
  new AMap.LngLat(116.387271, 39.912501),
  new AMap.LngLat(116.398258, 39.9046),
];
//创建多边形 Polygon 实例
var polygon = new AMap.Polygon({
  path: path,
  fillColor: "#fff", //多边形填充颜色
  borderWeight: 2, //线条宽度，默认为 1
  strokeColor: "red", //线条颜色
});
//多边形 Polygon对象添加到 Map
map.add(polygon);
//将覆盖物调整到合适视野
map.setFitView([polygon]);

查看详细AMap.Polygon多边形教程

1.3 创建并开启多边形编辑器 PolygonEditor

//引入多边形编辑器插件
map.plugin(["AMap.PolygonEditor"], function () {
  //实例化多边形编辑器，传入地图实例和要进行编辑的多边形实例
  var polygonEditor = new AMap.PolygonEditor(map, polygon);
  //开启编辑模式
  polygonEditor.open();
});

提示

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

查看PolygonEditor更多属性和方法说明

椭圆编辑示例

矩形编辑示例