OpenLayers3如何加载常用控件-创新互联

这篇文章运用简单易懂的例子给大家介绍OpenLayers3如何加载常用控件，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

1. 前言

地图控件就是对地图的缩放、全屏、坐标显示控件等，方便我们对地图进行操作。OpenLayers 3 封装了很多常用的地图控件，例如地图导航、比例尺、鹰眼、测量工具等，这些控件都是基于ol.control.Control虚基类进行封装，ol.control.Control的子类为各类常用的地图控件，可以通过Map对象的Control参数进行设置或者通过addControl方法将控件添加到地图窗口中。

在加载地图时OpenLayers 3 通过ol.control.defaults 默认加载了三个常用的空间：缩放控件（ol.control.Zoom）、旋转控件（ol.control.Roate）、图层数据源属性控件（ol.control.Attribution）,因此我们可以通过鼠标在地图容器的左上角的缩放按钮，以及右下角的图层数据源控件来对地图进行操作。

2. 控件

2.1 导航控件

导航控件就是实现对地图的按级缩放，拖动导航条的上的滑块可以实现缩放操作。OpenLayers 3 框架提供的控制地图缩放的相关控件包括地图缩放控件（ol.control.Zoom）、缩放滑块（ol.control.ZoomSlider）、按钮式缩放到特定范围的控件（ol.control.ZoomToExtent）,可以自定义这些控件的样式。
下面我们将通过修改地图缩放的相关控件的默认样式，实现一个导航条，效果如下：

实现步骤如下：

（1）新建一个页面，加载OSM瓦片地图，具体可以查看这篇文章OpenLayers3基础教程之实现地图显示功能
（2）地图加载完成后，通过初始化ZoomSlider、ZoomToExtent、控件，并通过addControl方法将控件加载到地图容器中。

代码如下