开发 地图 JS API 2.0 入门教程 添加多边形

添加多边形 最后更新时间: 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实例添加mouseovermouseout事件。

//鼠标移入更改样式
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)

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

2.1 AMap.Polygon

参数/方法

说明

类型 

参数值描述

默认值

fillColor

多边形填充颜色

String

使用16进制颜色代码赋值

'#00B2D5'

strokeWeight

轮廓线宽度

Number

-

2

strokeColor

线条颜色

String

使用16进制颜色代码赋值

'#00D3FC'

fillOpacity

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

Number

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

0.5

strokeOpacity

轮廓线透明度

Number

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

0.9

strokeStyle

轮廓线样式

String

实线:"solid" 

虚线:"dashed"

"solid" 

strokeDasharray

勾勒形状轮廓的虚线和间隙的样式,在strokeStyledashed时有效,在 ie9+浏览器有效

Array<number>

详见 参考手册

-

setOptions()

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

Function

-

-

返回顶部 示例中心 常见问题 智能客服 公众号
二维码