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

最新推荐文章于 2025-11-07 17:52:11 发布

原创最新推荐文章于 2025-11-07 17:52:11 发布 · 292 阅读

CC 4.0 BY-SA版权

文章标签：

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

图层的添加：

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

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

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

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

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

看⼀下效果：

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

map.remove.(traffic)

回车执行，看一下改变：

路况信息就被移除了。

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

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

<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>