前端基础到webgis开发系列教程（8）实时路况的实现以及地图控件的添加（缩放控件/比例尺控件/鹰眼控件/地图图层切换控件）

 一、地图显示

地图显示是GIS开发的第一步。

首先我们需要通过代码，将地图显示出来，后续所有的操作都是基于这个底图进行的

1）步骤

• 引入对应资源文件
• 创建地图容器
• 加载地图

示例

二、地图参数

center：中心点经纬度

zoom：缩放比例

viewmode：显示2D还是3D

三、图层操作

创建图层，添加到地图对象中图层的添加：地图是⼀层⼀层的，叠合在⼀起，组成完成的地图。

1.1实时路况

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

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

将交通图层添加到map上，即可。看⼀下效果：

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

map.remove(traffic)

回⻋执⾏，看⼀下改变：

1.2显示交通按钮以及隐藏交通按钮

路况信息就被移除了。 那么，这个功能怎么让⽤户能使⽤呢，可以做⼀个按钮来触发事件来实 现。现在div容器外⾯添加⼀个按钮来实现：

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

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

点击隐藏后：

四、地图控件的添加

1. 什么是地图控件?

地图控件就是可以用来控件地图显示的工具

2. 常见的地图控件

常见的地图控件有

缩放控件

旋转控件

比例尺

鹰眼

3. 使用步骤

在高德API中，控件通常以插件的形式做为扩展使用步骤如下：

1. 使用插件

2. 实例化插件对象

3. 添加到地图

3.1缩放控件

⾸先来看⾼德官⽹的UI界⾯：

他和我们现在的WebGIS⼯程最⼤的不同就是上⾯有很多控件，⽤户可以操作的。

⽐如右下⻆有加号和减 号按钮，这叫做控件。

如何在我们的⼯程中引⼊这些呢，下⾯来看。

这是我们上⼀课看到的界⾯，这时候他下⾯有加号和减号按钮了。

怎么办到的呢？

其实就是这么⼏⾏代 码实现的：

3.2⽐例尺控件

此外，还有⽐例尺控件也⽤的⽐较多，怎么加载呢，⼀样的道理，也是同样的办法添加的：

左下⻆就出现⽐例尺了。代码如下：

3.3鹰眼控件

下⾯来看鹰眼控件。这个听起来⾼⼤上，实际就是缩略图。⼀般在右下⻆显示地图的全景。

代码如下：

3.4地图图层切换控件

接下来可以加⼀个切换地图图层的控件。效果如下：

这是切换为卫星图，并添加了路⽹和交通信息的地图。实现也很简单，代码如下：

3.5控制⼯具

还有其他的⼀些控件，⽐如控制⼯具，效果：

代码：

注意，鹰眼控件把⼯具条给挡住了，实际貌似⼯具条在右上显示，这⾥后期可以修改完善⼀下。

持续更新webgis开发相关技术/面试/就业内容

关注我学习webgis开发不迷路