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

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

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], //地图图层的数组
});

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，使用方法同卫星、路网等官方图层一样。特殊之处在于可以通过autoRefresh和interval参数指定是否自动刷新和刷新周期。

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

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

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

4、楼块图层

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

//创建楼块图层
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 的室内地图
});