示例中心
功能在线体验
控制台
您现在的位置: 开发 > 地图 JS API > 教程 > 图层 > 高德官方图层 >

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

更新时间:2018年05月29日

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

  1. 标准图层 TileLayer
  2. 卫星图层 TileLayer.Satellite
  3. 路网图层 TileLayer.RoadNet
  4. 实时交通图层 TileLayer.Traffic
  5. 楼块图层 Buildings
  6. 室内地图 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的全部属性和方法

卫星与路网图层

卫星图层与路网图层通常一起使用,这两个图层的创建和使用方法和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,使用方法同卫星、路网等官方图层一样。特殊之处在于可以通过autoRefreshinterval参数指定是否自动刷新和刷新周期。


    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');
});

查看室内地图详细接口文档




移动端
示例中心
功能
在线体验
常见问题