覆盖物/图层管理 最后更新时间: 2023年03月27日
本章为您介绍覆盖物 / 图层添加、获取、移除的方法,及如何对一组覆盖物集合进行操作,包括
- 添加 / 获取 / 移除覆盖物
- 添加 / 设置 / 获取 / 移除图层
- 覆盖物集合 OverlayGroup
- GeoJSON类 GeoJSON
添加 / 获取 / 移除覆盖物
添加覆盖物
覆盖物有多种类型,包括点标记、矢量图形、信息窗体等,均可以使用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);
// add方法可以传入一个覆盖物数组,将点标记和矢量圆同时添加到地图上
map.add([marker,circle]);
获取覆盖物
可以使用getAllOverlays(type)方法获取已经添加的覆盖物。其中type参数类型包括marker、circle、polyline、polygon,缺省是返回以上所有类型所有覆盖物。
// 获取已经添加的覆盖物
map.getAllOverlays();
// 获取已经添加的marker
map.getAllOverlays('marker');
移除覆盖物
// 使用remove方法移除覆盖物,参数可以为单个覆盖物对象,也可以是一个包括多个覆盖物的数组
// 单独移除点标记
map.remove(marker);
// 同时移除点标记和矢量圆形
map.remove([marker,circle]);
// 使用clearMap方法删除所有覆盖物
map.clearMap();
添加 / 设置 / 获取 / 移除图层
添加图层
地图上可使用add()方法添加各类型的图层,如高德官方的卫星、路网图层,第三方或是自定义图层等。
// 构造官方卫星、路网图层
var layer1 = new AMap.TileLayer.Satellite();
var layer2 = new AMap.TileLayer.RoadNet();
var layers = [
layer1,
layer2
]
// 添加到地图上
map.add(layers);
设置图层
可以使用setLayers()方法设置图层,使用该方法后,地图图层会被重置。
// 构造官方卫星、路网图层
var layers = [
new AMap.TileLayer.Satellite(),
new AMap.TileLayer.RoadNet()
]
// 地图上设置图层
map.setLayers(layers);
获取图层
可以通过getLayers()方法获取地图图层数据
// 获取地图图层数据
map.getLayers();
移除图层
通过remove()方法移除地图图层
// 移除一个图层
map.remove(layer1);
覆盖物群组
覆盖物群组 OverlayGroup
当用户需要对一组覆盖物集合做整体操作时,可以使用 AMap.OverlayGroup 类创建的实例来操作,以避免通过循环来一个个设置属性。
// 覆盖物1
var polyline1 = new AMap.Polyline({
path: [
new AMap.LngLat("116.368904","39.913423"),
new AMap.LngLat("116.382122","39.901176"),
]
});
// 覆盖物2
var polyline2 = new AMap.Polyline({
path: [
new AMap.LngLat("116.387271","39.912501"),
new AMap.LngLat("116.398258","39.904600")
]
});
// 创建覆盖物群组,传入覆盖物组成的数组
var overlayGroup = new AMap.OverlayGroup([polyline1, polyline2]);
// 对此覆盖物群组设置同一属性
overlayGroup.setOptions({
strokeColor: 'red',
strokeWeight: 5
});
// 统一添加到地图实例上
map.add(overlayGroup);
// 同时也可以对群组进行统一的展示隐藏操作
overlayGroup.show();
overlayGroup.hide();
此外,如果已经将 overlayGroup 加入到地图实例中了以后,新加入到 overlayGroup 里的覆盖物也会自动被添加到该地图实例中,移除时也相同。
var polyline3 = new AMap.Polyline({
path: [
new AMap.LngLat("116.387271","39.912501"),
new AMap.LngLat("116.398258","39.904600")
]
});
// 添加新的覆盖物到群组
overlayGroup.addOverlay(polyline3);
// 移除群组中的一个覆盖物
overlayGroup.removeOverlay(polyline1);
GeoJSON类 GeoJSON
GeoJSON 类继承自 OverLayGroup,也是对一组覆盖物群组进行操作的类。不同的是,这里是将 GeoJSON 类型的数据转换成 OverlayGroup 后再指定方法绘制覆盖物群组。通过指定 getMarker, getPolyline 等属性,就可以拿到转换后的数据来绘制相应的覆盖物。具体方法如下:
// 创建 geoJSON 实例
var geoJson = new AMap.GeoJSON({
geoJSON: JSON.parse(geoJsonData), // GeoJSON对象
getPolygon: function(geojson, lnglats) {//还可以自定义getMarker和getPolyline
return new AMap.Polygon({
path: lnglats,
fillOpacity: .8,
strokeColor:'white',
fillColor:'red'
});
}
});
map.add(geoJson);