WebGIS第五课：地图控件的添加

首先来看高德官网的UI界面：

他和我们现在的WebGIS工程最大的不同就是上面有很多控件，用户可以操作的。比如右下角有加号和减号按钮，这叫做控件。如何在我们的工程中引入这些呢，下面来看。

这是我们上一课看到的界面，这时候他下面有加号和减号按钮了。怎么办到的呢，其实就是这么几行代码实现的：

  // 使用plugin
        AMap.plugin(['AMap.ToolBar'],function(){
            //引入
            map.addControl(new AMap.ToolBar())
        })

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

左下角就出现比例尺了。代码如下：

       // 使用plugin
        AMap.plugin(['AMap.ToolBar','AMap.Scale'],function(){
            //引入
            map.addControl(new AMap.ToolBar())
            map.addControl(new AMap.Scale())
        })

 下面来看鹰眼控件。这个听起来高大上，实际就是缩略图。一般在右下角显示地图的全景。

代码如下：

        // 使用plugin
        AMap.plugin(['AMap.ToolBar','AMap.Scale','AMap.HawkEye'],function(){
            //引入
            map.addControl(new AMap.ToolBar())
            map.addControl(new AMap.Scale())
            map.addControl(new AMap.HawkEye())
        })

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

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

        // 使用plugin
        AMap.plugin(['AMap.ToolBar','AMap.Scale','AMap.HawkEye','AMap.MapType'],function(){
            //引入
            map.addControl(new AMap.ToolBar())
            map.addControl(new AMap.Scale())
            map.addControl(new AMap.HawkEye())
            map.addControl(new AMap.MapType())
        })

还有其他的一些控件，比如控制工具，效果：

代码：

        // 使用plugin
        AMap.plugin(['AMap.ToolBar','AMap.Scale','AMap.HawkEye','AMap.MapType','AMap.ControlBar'],function(){
            //引入
            map.addControl(new AMap.ToolBar())
            map.addControl(new AMap.Scale())
            map.addControl(new AMap.HawkEye())
            map.addControl(new AMap.MapType())
            map.addControl(new AMap.ControlBar()) // 鼠标右键也可以实现
        })

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