覆盖物/图层管理 最后更新时间: 2024年01月15日

本文介绍覆盖物和图层添加、获取、移除的方法，及如何对一组覆盖物集合进行操作，包括

1. 添加、获取、移除覆盖物
2. 添加、设置、获取、移除图层
3. 覆盖物集合
4. GeoJSON 类 

1、添加、获取、移除覆盖物

1.1 添加覆盖物

覆盖物有多种类型，包括点标记、矢量图形、信息窗体等，均可以使用add()方法添加。

//构造点标记
var marker = new AMap.Marker({
  icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
  position: [116.405467, 39.907761],
});
//构造矢量圆形
var circle = new AMap.Circle({
  center: new AMap.LngLat("116.403322", "39.920255"), //圆心位置
  radius: 1000, //半径 单位:米
  strokeColor: "#F33", //线颜色
  strokeOpacity: 1, //线透明度
  strokeWeight: 3, //线粗细度
  fillColor: "#ee2200", //填充颜色
  fillOpacity: 0.35, //填充透明度
});
//单独将点标记和矢量圆形添加到地图上
map.add(marker);
map.add(circle);

map.add([marker, circle]); //将点标记和矢量圆同时添加到地图上

1.2 获取覆盖物

使用getAllOverlays(type)方法获取已经添加的覆盖物。其中type参数类型包括marker、circle、polyline、polygon，缺省时返回以上所有类型的所有覆盖物。

//获取所有已经添加的覆盖物
map.getAllOverlays();
//只获取所有已经添加的 marker
map.getAllOverlays('marker');

1.3 移除覆盖物

可以使用remove()方法移除覆盖物，参数可以为单个覆盖物对象或是一个包括多个覆盖物对象的数组。也可以使用clearMap()方法移除所有覆盖物。

//使用 remove 方法移除覆盖物，参数可以为单个覆盖物对象，也可以是一个包括多个覆盖物的数组

//单独移除点标记
map.remove(marker);

//同时移除点标记和矢量圆形
map.remove([marker,circle]);

//使用 clearMap 方法删除所有覆盖物
map.clearMap();

2、添加、设置、获取、移除图层

2.1 添加图层

地图上可使用add()方法添加各类型的图层，如高德官方的卫星、路网图层，第三方或是自定义图层等。

//构造官方卫星、路网图层
var layer1 = new AMap.TileLayer.Satellite(); //卫星图层
var layer2 = new AMap.TileLayer.RoadNet(); //路网图层
//添加到地图上
map.add(layer1);
map.add(layer2);

var layers = [layer1, layer2];
//添加到地图上
map.add(layers);

2.2 设置图层

使用setLayers()方法设置图层，该方法可将多个图层一次性添加到地图上替代地图上原有图层。

//构造官方卫星、路网图层
var layers = [new AMap.TileLayer.Satellite(), new AMap.TileLayer.RoadNet()];
//地图上设置图层
map.setLayers(layers);

2.3 获取图层

可以通过getLayers()方法获取地图图层数据

//获取地图图层数据
map.getLayers();

2.4 移除图层

通过remove()方法移除地图图层

//移除一个图层
map.remove(layer1);

map.remove([layer1, layer2]); //同时移除卫星图层和路网图层

3、覆盖物群组

3.1 覆盖物群组 OverlayGroup

当用户需要对一组覆盖物集合做整体操作时，可以使用AMap.OverlayGroup类创建的实例来操作，以避免通过循环来一个个设置属性。

//覆盖物1
var polyline = new AMap.Polyline({
  path: [
    new AMap.LngLat("116.368904", "39.913423"),
    new AMap.LngLat("116.382122", "39.901176"),
  ],
});
//覆盖物2
var circle = new AMap.Circle({
  center: new AMap.LngLat("116.407745", "39.917578"), //圆心
  radius: 50, //半径 单位：米
});

//创建覆盖物群组，传入覆盖物组成的数组
var overlayGroup = new AMap.OverlayGroup([polyline, circle]);
//对此覆盖物群组设置同一属性
overlayGroup.setOptions({
  strokeColor: "red",
  strokeWeight: 5,
});
//统一添加到地图实例上
map.add(overlayGroup);
//同时也可以对群组进行统一的展示隐藏操作
overlayGroup.hide(); //覆盖物隐藏
//overlayGroup.show(); //覆盖物可见

此外，如果overlayGroup已经被加入到地图实例中，后加入到overlayGroup里的覆盖物也会自动被添加到该地图实例中，移除时也相同。

var marker = new AMap.Marker({
  position: new AMap.LngLat("116.387271", "39.912501"),
});
overlayGroup.addOverlay(marker); //添加新的覆盖物到群组
//overlayGroup.removeOverlay(polyline1); //移除群组中的一个覆盖物

4、GeoJSON 类

GeoJSON类继承自OverLayGroup，也是对一组覆盖物群组进行操作的类。不同的是，这里是使用AMap.GeoJSON插件将GeoJSON类型的数据转换成OverlayGroup后再通过指定getMarker，getPolyline等属性，就可以拿到转换后的数据来绘制相应的覆盖物。具体方法如下：

//定义一个包含 GeoJSON 数据的字符串，该数据描述了一个多边形特征
var geoJsonData = `{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[116.403322, 39.920255],[116.410703, 39.897555],[116.402292, 39.892353],[116.389846, 39.891365]]]},"properties":{"name":"多边形"}}]}`;
//异步加载 AMap.GeoJSON 插件，该插件用于解析和渲染 GeoJSON 数据
AMap.plugin("AMap.GeoJSON", function () {
  //创建 geoJSON 实例，传入 GeoJSON 数据和其他选项
  var geoJson = new AMap.GeoJSON({
    //将字符串形式的 GeoJSON 数据解析为对象
    geoJSON: JSON.parse(geoJsonData),
    //定义一个回调函数来创建多边形对象，该函数接收一个 geojson 对象和一个 lnglats 数组作为参数
    getPolygon: function (geojson, lnglats) {
      // 返回一个新的 AMap.Polygon 对象，传入路径、填充透明度、边框颜色和填充颜色等选项
      //还可以自定义 getMarker 和 getPolyline，用于创建标记和折线对象
      return new AMap.Polygon({
        path: lnglats,
        fillOpacity: 0.8,
        strokeColor: "white",
        fillColor: "red",
      });
    },
  });
  //将geoJson对象添加到地图上
  map.add(geoJson);
});