多边形绘制和编辑 最后更新时间: 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