开发 地图 JS API 2.0 进阶教程

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

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

多边形编辑示例

提示

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

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

1

1.1 准备

成为开发者并创建 key

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

提示

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

2

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

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

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

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

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