添加多边形最后更新时间: 2023年03月27日

亲手试一试

下载完整代码

多边形矢量图Polygon，是地图覆盖物重要的地图要素，可以用来突出标记某个区域的形状。矢量图覆盖物种类繁多，使用者可以根据自己实际需求来选择合适的类型。查看更多矢量图。

本章将讲述如何在地图图面上添加一个可交互的多边形。

准备

成为开发者并创建 key

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

添加矢量多边形Polygon

创建地图

const map = new AMap.Map('container', {
  center: [121.045332, 31.19884],
  zoom: 8.8
});

创建Polygon对象

AMap.Polygon对象为用户提供在地图图面绘制多边形的能力。可以为多边形设置填充颜色fillColor、描边颜色strokeColor、轮廓线样式等属性。

const polygon = new AMap.Polygon({
  fillColor: '#ccebc5', // 多边形填充颜色
  strokeOpacity: 1, // 线条透明度
  fillOpacity: 0.5, //填充透明度
  strokeColor: '#2b8cbe', // 线条颜色
  strokeWeight: 1, //线条宽度
  strokeStyle: 'dashed', // 线样式
  strokeDasharray: [5, 5], //轮廓的虚线和间隙的样式
});

提示

path 是多边形轮廓线的节点坐标数组。

支持单个普通多边形({Array })，单个带孔多边形({Array<Array >})，多个带孔多边形({Array<Array<Array >>})

添加Polygon实例的事件

给示例中的Polygon实例添加mouseover，mouseout事件。

 polygon.on('mouseover', () => { // 鼠标移入更改样式
   polygon.setOptions({
     fillOpacity: 0.7,
     fillColor: '#7bccc4'
   })
 })
polygon.on('mouseout', () => { // 鼠标移出恢复样式
  polygon.setOptions({
    fillOpacity: 0.5,
    fillColor: '#ccebc5'

  })
})

添加Polygon实例至地图

map.add(polygon)

添加多边形 最后更新时间: 2023年03月27日