高德官方图层 最后更新时间: 2023年03月27日

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

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

标准图层

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

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

如果在地图初始时您只需要标准图层，那么地图对象的layers属性可以缺省，我们将为您自动添加一个标准图层：

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

卫星与路网图层

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

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

实时交通图层

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

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

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

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

// 通过 remove 方法将图层从地图移除
// map.remove(traffic) 

楼块图层

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

// 创建楼块图层
var buildings = new AMap.Buildings({
  'zooms': [16,18],
  'zIndex': 10,
  'heightFactor': 2 // 2 倍于默认高度（3D 视图下生效）
});
// 将楼块图层添加到地图
var map = new AMap.Map('container', {
  center: [116.397428, 39.90923],
  viewMode: '3D',
  layers: [
    buildings
  ],
  zoom: 17
});

室内地图

默认室内图层

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

// 创建地图，设置室内地图图层可见
var map = new AMap.Map('mapDiv', {
  center: [116.519942, 39.924677],
  showIndoorMap: true,
  zoom: 18
});
// 监听地图 indoor_create 事件，室内地图图层创建回调中可获取室内地图图层实例
map.on('indoor_create',function(){
  map.indoorMap.showIndoorMap('B000A8VT15', 4);
})

独立的室内图层

也可以自己来创建室内图层，这时需要将地图的默认室内图层隐藏，如：

// 加载室内图层插件
AMap.plugin(['AMap.IndoorMap'], function() {
	var indoorMap = new AMap.IndoorMap({alwaysShow:true});
	//设定在没有矢量底图的时候也显示，默认情况下室内图仅在有矢量底图的时候显示
	var map = new AMap.Map('mapDiv', {
		showIndoorMap:false, //隐藏地图自带的室内地图图层
		layers:[
			indoorMap, 
			AMap.createDefaultLayer()
		]
	});
	indoorMap.showIndoorMap('B000A856LJ');
});