开发 地图 JS API 2.0 进阶教程 多边形绘制和编辑

多边形绘制和编辑 最后更新时间: 2024年03月13日

AMap.Polygon可以绘制多边形多边形是由多个点组成的可填充的形状可以是任何形状,例如矩形、三角形等,用于标记特定区域本文介绍如何在地图上绘制编辑多边形,并设置填充颜色、轮廓线宽度等属性。

多边形绘制示例

提示

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

1、绘制多边形

1.1 准备

成为开发者并创建 key

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

提示

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

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

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

对应各种类型多边行的轮廓坐标数组示意:(假设 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 ...] ...] 

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])
提示

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

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();
});
提示

polygonEditor.open()为开始编辑对象的方法,如果你想结束编辑可以调用polygonEditor.close()方法。

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

3.1 AMap.Polygon

参数/方法

说明

类型 

参数值描述

默认值

fillColor

多边形填充颜色

String

使用16进制颜色代码赋值

'#00B2D5'

strokeWeight

轮廓线宽度

Number

-

2

strokeColor

线条颜色

String

使用16进制颜色代码赋值

'#00D3FC'

fillOpacity

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

Number

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

0.5

setOptions()

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

Function

-

-

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