开发 地图 JS API 2.0 进阶教程

面编辑 PolyEditor 最后更新时间: 2023年03月28日

本文主要绍矢量面图形的编辑工具。除了可以在图面绘制各种覆盖物以外,我们还可以借助矢量图形编辑工具对各种已经绘制好的图形进行编辑工作。

提示

矢量面图形的编辑工具支持的图形的编辑工具包括 多边形编辑工具 PolyEditor, 椭圆编辑插件 EllipseEditor,矩形编辑插件RectangleEditor,这些插件均可以在引入后,对每种类型覆盖物的多种属性进行编辑。

注意

下面以多边形编辑工具 PolygonEditor 为例进行介绍。

准备

成为开发者并创建 key

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

多边形 Polygon

创建步骤如下:

1

创建地图

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

设置多边形轮廓线的节点坐标数组

// 多边形轮廓线的节点坐标数组
var path = [
  new AMap.LngLat(116.368904,39.913423),
  new AMap.LngLat(116.382122,39.901176),
  new AMap.LngLat(116.387271,39.912501),
  new AMap.LngLat(116.398258,39.904600)
];
注意

多边形轮廓线的节点坐标数组。 支持单个普通多边形,单个带孔多边形,多个带孔多边形数据类型绘制。

3

创建多边形 Polygon 实例

// 创建多边形 Polygon 实例
var polygon = new AMap.Polygon({
  path: path,  
  fillColor: '#fff', // 多边形填充颜色
  borderWeight: 2, // 线条宽度,默认为 1
  strokeColor: 'red', // 线条颜色
});
4

多边形 Polygon对象添加到Map

//多边形 Polygon对象添加到 Map
map.add(polygon);
// 缩放地图到合适的视野级别
map.setFitView([ polygon ])

多边形编辑器 PolygonEditor

创建步骤如下:

5

创建并开启多边形编辑器

// 引入多边形编辑器插件
map.plugin(["AMap.PolygonEditor"],function(){
  // 实例化多边形编辑器,传入地图实例和要进行编辑的多边形实例
  var polygonEditor = new AMap.PolygonEditor(map, polygon); 
  // 开启编辑模式
  polygonEditor.open(); 
}); 

示例
中心
常见
问题
智能
客服