高德官方图层 最后更新时间: 2021年01月22日
本章向您介绍高德官方提供的图层及其使用方法,官方图层包括:
- 标准图层 TileLayer
- 卫星图层 TileLayer.Satellite
- 路网图层 TileLayer.RoadNet
- 实时交通图层 TileLayer.Traffic
- 楼块图层 Buildings
- 室内地图 IndoorMap
其中楼块图层支持 IE9 以上的浏览器,其他图层支持所有浏览器。
标准图层
您可以按照如下方法声明和创建一个标准图层,然后给地图对象设置layers
属性,将其添加到地图中。
var layer = new AMap.TileLayer({
zooms:[3,20], //可见级别
visible:true, //是否可见
opacity:1, //透明度
zIndex:0 //叠加层级
})
var map = new AMap.Map('container',{
layers:[layer] //当只想显示标准图层时layers属性可缺省
});
如果在地图初始时您只需要标准图层,那么地图对象的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
});
map.add(traffic); //通过add方法添加图层
//map.remove(traffic) //需要时可以移除
楼块图层
楼块图层专门用来展示矢量的建筑物层,与标准图层中的楼块要素的效果相同,所以使用时应先通过features
属性隐藏地图的默认楼块。二者区别在于,楼块图层显示的级别范围较标准图层中的楼块大,可以用来实现一些特殊的效果,3D 视图下还可以为楼块指定高度比例系数heightFactor
。与其他图层不同,楼块图层的有效级别范围为 [ 15, 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',
pitch:60,
rotation:-35,
features:['bg','road','point'],//隐藏默认楼块
mapStyle:'amap://styles/light',
layers: [new AMap.TileLayer.Satellite(),//高德默认标准图层
buildings],
zoom: 16
});
室内地图
默认室内图层
目前,高德地图 JS API 已经在多数浏览器中开启了矢量地图绘制,在这些浏览器上,我们默认会为添加展示室内图层(移动端默认不显示,需要通过设置showIndoorMap属性设置打开)。当地图处在合适的级别下,移动到有室内地图的地方就会自动显示室内地图。可以通过监听地图indoor_create 事件来获取这个室内图层,取得控制权。
var map = new AMap.Map('mapDiv', {
resizeEnable: true,
center:[116.519942, 39.924677],
zoom:18
});
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', {
resizeEnable: true,
showIndoorMap:false,//隐藏地图自带的室内地图图层
layers:[indoorMap,new AMap.TileLayer()]
});
indoorMap.showIndoorMap('B000A856LJ');
});