openlayers添加按钮_OpenLayers 之 控件（control）详解

每一个地图应用都应该有一些工具方便用户控制地图的行为，比如缩放，全屏，坐标控件等等，在 OpenLayers 中怎么添加这些工具呢？下面我给大家介绍一下 OpenLayers 中包含的控件种类，并介绍其使用方法。对控件的定制化，和对 OpenLayers 增加控件和优化控件等超出了本文范围。

一、control 类

OpenLayers 中的控件是由 control 类定义的，这是一个虚基类，不负责实例化特定的控件，它的主要作用是让其他具体的种类的控件类实现继承。OpenLayers 中包含的控件有：

controldefaults，地图默认包含的控件，包含缩放控件和旋转控件；

fullscreencontrol，全屏控件，用于全屏幕查看地图；

mousepositioncontrol，鼠标位置控件，显示鼠标所在地图位置的坐标，可以自定义投影；

overviewmapcontrol，地图全局视图控件；

rotatecontrol，地图旋转控件；

scalelinecontrol，比例尺控件；

zoomcontrol，缩放控件；

zoomslidercontrol，缩放刻度控件；

zoomtoextentcontrol，缩放到全局控件。

下面我们来分别介绍各种控件的使用方法。

二、控件举例介绍

1. fullscreen control - 全屏控件

地图全屏控件，该控件提供一个全屏按钮，当点击的时候，地图充满整个屏幕(注意是整个屏幕，而不是整个浏览器窗口)；当在全屏模式时，在屏幕的右上角会出现一个退出按钮，用于退出全屏模式，同时按 Esc 按钮也可以退出全屏模式。在 map 对象中添加如下代码：

controls: ol.control.defaults().extend([

new ol.control.FullScreen()

]),

刷新浏览器运行代码，结果如下图：

点击全屏后，全屏按钮变成退出按钮，点击即可退出全屏模式，同时点击 ESC也可以退出全屏模式：

2. mouseposition control - 鼠标位置控件

鼠标位置控件，用于显示鼠标指针 2D 坐标，默认情况下，它显示的是地图的 view 对象中设置的投影，但是可以修改为任意投影。鼠标位置控件是加载在地图右上角的位置，如，我们在以上全屏控件的基础上加如下代码：

controls: ol.control.defaults().extend([

new ol.control.FullScreen(),

new ol.control.MousePosition()

]),

刷新浏览器，得到结果截图如下：

这个默认的鼠标位置控件，连全屏按钮都遮盖了，为了避免遮盖，我们将鼠标位置控件移动到别的地方，右下角是一个不错的地方，那么怎么修改位置呢？</