高德官方图层 最后更新时间: 2023年03月27日
本章向您介绍高德官方提供的图层及其使用方法,包括:
- 标准图层 TileLayer
- 卫星图层 TileLayer.Satellite
- 路网图层 TileLayer.RoadNet
- 实时交通图层 TileLayer.Traffic
- 楼块图层 Buildings
- 室内地图 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。
提示
楼块图层的有效级别范围为[ 17, 20 ]
// 创建楼块图层
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');
});