WebGIS开发智慧校园（13）地图的组成和操作

GIS开发特训营2025-11-03 20:06

+文末↓小助手，备注【智慧校园】无偿获取【完整版视频+笔记源码】

图层的添加：

地图是⼀层⼀层的，叠合在⼀起，组成完成的地图。

现在来试试实时路况的实现。

javascript 复制代码

var traffic = new AMap.TileLayer.Traffic({
 autoRefresh:true, 
interval:180, 
        }) 
map.add(traffic)

⾸先，指定是否⾃动刷新，其次，指定刷新间隔为180s。

将交通图层添加到map上，即可。

看⼀下效果：

如果不想看实时路况，想移除怎么办呢，按F12进⾏开发环境，选择console控制台，如图，输⼊

map.remove.(traffic)

回车执行，看一下改变：

路况信息就被移除了。

那么，这个功能怎么让⽤户能使⽤呢，可以做⼀个按钮来触发事件来实现。

现在div容器外⾯添加⼀个按钮来实现：

javascript 复制代码

<body> 
<button onclick="showTraffic()">显示交通信息</button> <button onclick="hideTraffic()">隐藏交通信息</button> <div id="container"></div> 
<script> 
var map = new AMap.Map('container',{ 
center:[116, 40], 
zoom:15, 
viewMode:'3D', 
pitch:45 
        }) 
var traffic = new AMap.TileLayer.Traffic({ autoRefresh:true, 
interval:180, 
        }) 
function showTraffic(){ 
map.add(traffic) 
        } 
function hideTraffic(){ 
map.remove(traffic) 
        } 
</script> 
</body>

这⾥做了两个按钮，⼀个添加，⼀个隐藏。

其实如果加个判断，做成⼀个按钮也可以的。看⼀下效果：

点击添加后：

点击隐藏后：