展示图层 最后更新时间: 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(); //隐藏路况图层