OpenLayers学习笔记高级篇（二、地图控件）

在OpenLayers 3中，地图控件指的是下图标注的这些，包括缩放按钮，标尺，版权说明，指北针等等。

他们不会随着地图的移动而移动，一直处于一个固定的位置。 在实现上，并不是在画布上绘制的，而是使用传统的HTML元素来实现的，便于同地图分离，也便于界面实现。 在本章节中，将先概览OpenLayers 3中已有的地图控件，对其实现进行分析，在此基础上进一步修改其样式，从而定义自己的控件。

OpenLayers 3目前内置的地图控件类都在包ol.control下面，依次有：

• ol.control.Attribution: 右下角的地图信息控件
• ol.control.FullScreen: 全屏控件
• ol.control.MousePosition: 鼠标位置控件
• ol.control.OverviewMap: 鸟瞰图控件
• ol.control.Rotate: 指北针控件
• ol.control.ScaleLine: 比例尺控件
• ol.control.Zoom: 缩放按钮控件
• ol.control.ZoomSlider: 缩放滚动条控件
• ol.control.ZoomToExtent: 放大到设定区域控件

每一个类都有一些设置参数，可对照官网API的文档来了解其对应的功能。

默认情况下，在地图上是不会显示这么多地图控件的，只会应用ol.control.defaults()这个函数返回的地图控件，默认包含了ol.control.Zoom，ol.control.Rotate和ol.control.Attribution这个控件。 其使用方式同ol.interaction.defaults()很像，同样可以设置一些参数来控制控件的一些功能，从而实现定制化需求。

1、下面我们来实现一个没有任何控件的地图：

看一下效果：

地图已经没有了任何的控件信息！其实如果让地图控件都不显示有一个更简介的写法：controls: []，大家可以自行测试一下！

 2、我们再实现一个加载了所有基本控件的地图的展示：

看一下效果：

下图是一个界面控件和类的对照关系图： 

 

每一个控件都有相应的参数设置，如果具体到某一个控件使用时，不能满足需求，可以先参照官网API说明，进行相应使用。

3、如果我们想改变控件的UI，应该如何改变呢？其实也是非常简单的，我们先使用开发者调试工具获取到控件UI，然后直接使用css或者javascript修改即可！我们再来两个修改控件UI样式的demo：

                  
    
    
    
    
    
    
    
    
}



     

这一个我们是通过直接修改css样式改变控件UI的，可以看一下效果：

我们的地图放大缩小的控件UI已经发生了改变！

再来一个通过javascript修改控件UI的demo：

这里我们引入了JQuery库使用js代码对控件样式进行了修改，看一下效果：

修改成功！既然我们可以通过css或者js修改控件的ui，那么我们可不可以在地图上自定义控件呢？显然是可以的，自定义控件就相对简单，共分为两个步骤，第一步是构建界面，第二步是用代码实现功能。 下面自定义了一个输出当前地图的功能的demo：

3、自定义输出当前地图的控件：

这次先解释一下代码：首先在viewport节点下添加一个输出按钮，然后监听这个按钮，这里我们使用了一个saveAs方法，这是一个调用的封装好的保存文件的js文件，最后重新渲染了map，来看一下效果：

点击地图输出，会显示我们已经下载好的地图：

打开map.png:

 

当前地图输出成功！

关于地图控件的介绍我们就到这儿了！ 下一节我们会介绍地图中动画的使用！大家加油！