开发 地图 JS API 2.0 进阶教程 多边形

多边形 Polygon 最后更新时间: 2023年12月04日

如果想要在地图上绘制多边形覆盖物,可以使用AMap.Polygon多边形是由多个点组成的可填充的形状可以是任何形状,例如矩形、三角形等,用于标记特定区域

多边形绘制示例

提示

多边形AMap.Polygon提供设置填充颜色、描边颜色、轮廓线样式、填充透明度等属性。

1、绘制多边形

1

1.1 准备

成为开发者并创建 key

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

提示

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

2

1.2 创建地图

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

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),
];
注意

多边形支持普通多边形,带单个孔多边形,带多个孔多边形类型绘制。

对应各种类型多边行的轮廓坐标数组示意:(假设 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 实例
var polygon = new AMap.Polygon({
  path: path, //路径
  fillColor: "#fff", //多边形填充颜色
  strokeWeight: 2, //线条宽度,默认为 2
  strokeColor: "red", //线条颜色
});
5

1.5 多边形 Polygon 对象添加到 Map

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

使用map.add()方法将多边形实例添加到地图中,map.setFitView()方法会根据地图上添加的覆盖物分布情况,自动缩放地图到合适的视野级别。

6

1.6 给 Polygon 添加事件

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

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

2.1 AMap.Polygon

参数/方法

说明

类型 

参数值描述

默认值

fillColor

多边形填充颜色

String

使用16进制颜色代码赋值

'#00B2D5'

strokeWeight

轮廓线宽度

Number

-

2

strokeColor

线条颜色

String

使用16进制颜色代码赋值

'#00D3FC'

fillOpacity

多边形填充透明度,取值范围 

Number

取值范围[0,1]0表示完全透明,1表示不透明。

0.5

setOptions()

修改多边形属性的方法,如样式风格,包括组成多边形轮廓线的节点、轮廓线样式等。

Function

-

-

返回顶部 示例中心 常见问题 智能客服