高德地图 JS API 的覆盖物/图层管理

高德地图 JS API 的覆盖物/图层管理

本章为您介绍覆盖物 / 图层添加、获取、移除的方法,包括

  1. 添加 / 获取 / 移除覆盖物
  2. 添加 / 设置 / 获取 / 移除图层

添加 / 获取 / 移除覆盖物

添加覆盖物

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

JavaScript
// 构造点标记
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,缺省是返回以上所有类型所有覆盖物。

JavaScript
// 获取已经添加的覆盖物
map.getAllOverlays();

// 获取已经添加的marker
map.getAllOverlays('marker');

移除覆盖物

JavaScript
// 使用remove方法移除覆盖物,参数可以为单个覆盖物对象,也可以是一个包括多个覆盖物的数组
// 单独移除点标记
map.remove(marker);
// 同时移除点标记和矢量圆形
map.remove([marker,circle]);

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

添加 / 设置 / 获取 / 移除图层

添加图层

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

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

设置图层

可以使用setLayers方法设置图层,使用该方法后,地图图层会被重置。

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

获取图层

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

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

移除图层

通过remove方法移除地图图层

JavaScript
// 移除一个图层
map.remove(layer1);
0 0 投票数
文章评分
订阅评论
提醒
0 评论
内联反馈
查看所有评论
0
希望看到您的想法,请您发表评论x