展示图层 最后更新时间: 2023年04月04日
本章教程将介绍如何在地图上添加图层，以及对图层的其他操作。目前JS API支持各类图层，官网的图层、三方图层、数据图层等等。本例将主要介绍官方图层：实时交通路况图层 TileLayer.Traffic。
准备
成为开发者并创建 key
为了正常调用 API ，请先注册成为高德开放平台开发者，并申请 web 平台（JS API）的 key 和安全密钥，点击 具体操作。
图层
1
加载地图
const map = new AMap.Map('container', {
viewMode: '2D', // 默认使用 2D 模式
zoom:11, //初始化地图层级
center: [116.397428, 39.90923] //初始化地图中心点
});提示
地图在初始化的时候，如果你没有配置layers属性，JS API会默认添加一个标准图层，标准图层的配置为：
const layer = new AMap.createDefaultLayer({ // 提示：参数值并不是API默认使用的值
zooms:[3,20], //可见级别
visible:true, //是否可见
opacity:1, //透明度
zIndex:0 //叠加层级
})如果你想更改默认配置，你可以在初始化地图的时候传入你创建的 createDefaultLayer。
const map = new AMap.Map('container',{
...otherOptions, // 其他配置
layers:[layer] // layer为你通过 new AMap.createDefaultLayer() 创建的默认图层
});2
创建实时交通路况图层
实时交通图层用于展示当前时刻的道路交通状况，不同的颜色代表不同的拥堵程度，暗红色代表极度拥堵，绿色代表通畅，灰色代表路况不明。
const traffic = new AMap.TileLayer.Traffic({
'autoRefresh': true, //是否自动刷新，默认为false
'interval': 180, //刷新间隔，默认180s
});
map.add(traffic); //通过add方法添加图层提示
移除路况图层：map.remove(traffic)。
3
路况图层的显示和隐藏
只需要对图层对象调用show()和hide()，即可控制图层的显示和隐藏。
traffic.show(); //显示路况图层
traffic.hide(); //隐藏路况图层