添加多边形 最后更新时间: 2024年01月22日
多边形矢量图是地图覆盖物重要的地图要素之一，可以用来突出标记某个区域的形状。矢量图覆盖物种类繁多，你可以根据需求来选择合适的类型。本文介绍如何在地图图面上添加一个可交互的多边形AMap.Polygon。
多边形的绘制示例
1、添加矢量多边形 Polygon
1
1.1 准备
成为开发者并创建 key
为了正常调用 API ，请先注册成为高德开放平台开发者，并申请 web 平台（JS API）的 key 和安全密钥，点击 具体操作。
提示
你在2021年12月02日以后申请的 key 需要配合你的安全密钥一起使用。
2
1.2 创建地图
const map = new AMap.Map("container", {
center: [121.045332, 31.19884], //地图中心点
zoom: 8.8, //地图级别
});3
1.3 创建 Polygon 对象
AMap.Polygon对象为用户提供在地图图面绘制多边形的能力。可以为多边形设置填充颜色fillColor、描边颜色strokeColor、轮廓线样式等属性。
const pathArr = [
[
[
[121.7789, 31.3102],
[121.7279, 31.3548],
[121.5723, 31.4361],
[121.5093, 31.4898],
[121.5624, 31.4864],
[121.5856, 31.4547],
[121.7694, 31.3907],
[121.796, 31.3456],
[121.7789, 31.3102],
],
],
];
const polygon = new AMap.Polygon({
path: pathArr, //多边形路径
fillColor: "#ccebc5", //多边形填充颜色
strokeOpacity: 1, //线条透明度
fillOpacity: 0.5, //填充透明度
strokeColor: "#2b8cbe", //线条颜色
strokeWeight: 1, //线条宽度
strokeStyle: "dashed", //线样式
strokeDasharray: [5, 5], //轮廓的虚线和间隙的样式
});提示
path是多边形轮廓线的节点坐标数组。多边形支持普通多边形，带单个孔多边形，带多个孔多边形类型绘制。
对应各种类型多边行的轮廓坐标数组示意：（假设 lnglat = new AMap.LngLat(lng, lat) 或 lnglat = [lng, lat]）
普通多边形：path = [lnglat, lnglat ...] 或 path = [[lnglat, lnglat ...]]
带单个孔多边形：path = [[lnglat, lnglat ...], [ lnglat, lnglat ...]]
带多个孔多边形：path = [[lnglat, lnglat ...], [lnglat, lnglat ... ], [lnglat, lnglat ...] ...] 4
1.4 给 Polygon 添加事件
给示例中的Polygon实例添加mouseover，mouseout事件。
//鼠标移入更改样式
polygon.on("mouseover", () => {
polygon.setOptions({
fillOpacity: 0.7, //多边形填充透明度
fillColor: "#7bccc4",
});
});
//鼠标移出恢复样式
polygon.on("mouseout", () => {
polygon.setOptions({
fillOpacity: 0.5,
fillColor: "#ccebc5",
});
});5
1.5 添加 Polygon 实例至地图
map.add(polygon)