多边形绘制和编辑 最后更新时间: 2024年03月13日

AMap.Polygon可以绘制多边形，多边形是由多个点组成的可填充的形状，可以是任何形状，例如矩形、三角形等，用于标记特定区域。本文介绍如何在地图上绘制编辑多边形，并设置填充颜色、轮廓线宽度等属性。

多边形绘制示例

1、绘制多边形

1.1 准备

1.2 创建地图

//创建地图
var map = new AMap.Map("container", {
  center: [121.045332, 31.19884], //地图中心点
  mapStyle: "amap://styles/whitesmoke", //设置地图的显示样式
  viewMode: "2D", //设置地图模式
  zoom: 8.8, //地图级别
});

1.3 设置多边形轮廓线的节点坐标数组

//多边形轮廓线的节点坐标数组
var path = [
  new AMap.LngLat(116.368904, 39.913423),
  new AMap.LngLat(116.387271, 39.912501),
  new AMap.LngLat(116.398258, 39.9046),
];

普通多边形：path = [lnglat, lnglat ...] 或 path = [[lnglat, lnglat ...]]
带单个孔多边形：path = [[lnglat, lnglat ...], [ lnglat, lnglat ...]]
带多个孔多边形：path = [[lnglat, lnglat ...], [lnglat, lnglat ... ], [lnglat, lnglat ...] ...] 

1.4 创建多边形 Polygon 实例

//创建多边形 Polygon 实例
var polygon = new AMap.Polygon({
  path: path, //路径
  fillColor: "#fff", //多边形填充颜色
  strokeWeight: 2, //线条宽度，默认为 2
  strokeColor: "red", //线条颜色
});

1.5 多边形 Polygon 对象添加到 Map

//多边形 Polygon对象添加到 Map
map.add(polygon);
//将覆盖物调整到合适视野
map.setFitView([polygon])

1.6 给 Polygon 添加事件

//鼠标移入事件
polygon.on("mouseover", () => {
  polygon.setOptions({
    //修改多边形属性的方法
    fillOpacity: 0.7, //多边形填充透明度
    fillColor: "#7bccc4",
  });
});
//鼠标移出事件
polygon.on("mouseout", () => {
  polygon.setOptions({
    fillOpacity: 1,
    fillColor: "#fff",
  });
});

2、多边形编辑

AMap.PolygonEditor多边形编辑插件，支持对原有的多边形进行修改或直接在地图上动态绘制多边形，通过调整多边形的位置、大小、形状，从而实现实时编辑和绘制

2.1 构造多边形编辑对象，并开启多边形的编辑状态

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

3、本章涉及的属性及方法说明

3.1 AMap.Polygon