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