WebGIS开发【智慧校园】实战案例：13. 地图的组成和操作

最新推荐文章于 2024-10-06 13:20:09 发布

WebGIS开发

最新推荐文章于 2024-10-06 13:20:09 发布

阅读量328

点赞数 4

分类专栏： GIS开发文章标签： javascript html5 arcgis

本文链接：https://blog.csdn.net/2301_78220461/article/details/141897577

版权

GIS开发专栏收录该内容

46 篇文章 0 订阅

订阅专栏

图层的添加：

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

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

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>

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

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