开发 地图 JS API 2.0 进阶教程 图层 高德官方图层

高德官方图层 最后更新时间: 2024年02月04日

本文介绍高德官方提供的图层及其使用方法,包括:

  1. 标准图层 TileLayer
  2. 卫星图层 TileLayer.Satellite
  3. 路网图层 TileLayer.RoadNet
  4. 实时交通图层 TileLayer.Traffic
  5. 楼块图层 Buildings
  6. 室内图层 IndoorMap
提示

如果你之前还没有了解过关于图层的添加,可以前往 覆盖物/图层管理教程

楼块图层示例

1、标准图层

你可以按照如下方法声明和创建一个标准图层,然后给地图对象设置layers属性,将其添加到地图中。

//创建标准图层
var layer = new AMap.createDefaultLayer({
  zooms: [3, 20], //可见级别
  visible: true, //是否可见
  opacity: 1, //透明度
  zIndex: 0, //叠加层级
});
//将图层添加到地图
var map = new AMap.Map("container", {
  layers: [layer], //地图图层的数组
});
提示

Layers属性值是用于设置地图图层的数组,数组可以包含一个或多个图层这个属性是可选的,如果未指定,JS API 会默认添加一个标准图层。

var map = new AMap.Map('container');

2、卫星与路网图层

卫星图层与路网图层通常一起使用,这两个图层的创建和使用方法和TileLayer类似,只需要修改类名为对应的类名即可。

//创建卫星图层
var satellite = new AMap.TileLayer.Satellite();
//创建路网图层
var roadNet = new AMap.TileLayer.RoadNet();
//将图层添加到地图
var map = new AMap.Map("container", {
  layers: [satellite, roadNet], //地图图层的数组
});

3、实时交通图层

实时交通图层用于展示当前时刻的道路交通状况,不同的颜色代表不同的拥堵程度,暗红色代表极度拥堵,绿色代表通畅,灰色代表路况不明。作为一种特殊的TileLayer,使用方法同卫星、路网等官方图层一样。特殊之处在于可以通过autoRefreshinterval参数指定是否自动刷新和刷新周期。

//初始化地图
var map = new AMap.Map("container", {
  zoom: 10, //地图级别
});

//创建实施交通图层
var traffic = new AMap.TileLayer.Traffic({
  autoRefresh: true, //是否自动刷新
  interval: 180, //刷新间隔,默认180s
});

// 通过 add 方法将图层添加到地图
map.add(traffic);
提示

除了在地图初始化时设置图层,还可以使用map.add(traffic)方法添加图层,使用map.remove(traffic)方法移除图层

4、楼块图层

楼块图层用于展示矢量建筑物,与标准图层中的楼块要素的效果相同。二者区别在于,楼块图层可以用来实现一些特殊的效果,如 3D 视图下为楼块指定高度比例系数heightFactor

提示

楼块图层的有效缩放级别范围为[ 17, 20 ] 

注意

创建楼块图层需要在初始化地图的时候设置showBuildingBlock: false属性,此属性会展示默认的楼块图层,此时再创建楼块图层会存在两个楼块图层。

//创建楼块图层
var buildings = new AMap.Buildings({
  zooms: [17, 20],
  zIndex: 10,
  heightFactor: 2, //2倍于默认高度(3D 视图下生效)
});
//将楼块图层添加到地图
var map = new AMap.Map("container", {
  center: [116.397428, 39.90923], //地图中心点
  viewMode: "3D", //地图模式
  pitch: 60, //俯仰角度
  rotation: -35, //地图顺时针旋转角度
  layers: [buildings], //地图图层的数组
  zoom: 17, //地图级别
  showBuildingBlock: false,
});

5、室内图层

5.1 默认室内图层

将地图属性 showIndoorMap 设置成 true,即可显示室内地图图层。地图zoom 大于17,并移动到有室内地图的地点就会自动显示室内地图。可以通过监听地图indoor_create事件来获取这个室内图层实例。

//创建地图,设置室内地图图层可见
var map = new AMap.Map("container", {
  center: [116.519942, 39.924677], //地图中心点
  showIndoorMap: true, //是否自动展示室内地图
  zoom: 18, //地图级别
});
//监听地图 indoor_create 事件,室内地图图层创建回调中可获取室内地图图层实例
map.on("indoor_create", function () {
  map.indoorMap.showIndoorMap("B000A8VT15", 4); //显示指定 POI 的室内地图,第一个参数为建筑物 POIID,第二个参数为楼层
});

使用map.indoorMap.showIndoorMap(indoorid,floor,shopid)方法可以显示指定 POI 的室内地图,其中indoorid参数为建筑物 POIID(获取POIID),floor参数为建筑物显示的楼层,shopid参数为商铺 ID

5.2 独立的室内图层

你也可以使用AMap.IndoorMap插件来自己创建室内图层,这时需要将地图的默认室内图层隐藏,例如:

本例使用异步安装插件,查看插件引入方式前往 插件的使用

//加载室内图层插件
AMap.plugin(["AMap.IndoorMap"], function () {
  var indoorMap = new AMap.IndoorMap({ alwaysShow: true });
  //设定在没有矢量底图的时候也显示,默认情况下室内图仅在有矢量底图的时候显示
  var map = new AMap.Map("container", {
    showIndoorMap: false, //隐藏地图自带的室内地图图层
    layers: [indoorMap, AMap.createDefaultLayer()], //地图图层的数组
  });
  indoorMap.showIndoorMap("B000A856LJ"); //显示指定 POI 的室内地图
});
返回顶部 示例中心 常见问题 智能客服 公众号
二维码