openlayers 入门教程（六）：controls 篇

一、常用的控件

二、使用控件方法

三、添加删除control 的基本方法

四、control示例

1 比例尺 - ScaleLine

2 鹰眼/缩小图 - OverviewMap

3 全屏 - FullScreen

4 版权信息 - Attribution

5 旋转地图 - Rotate

6 放大缩小 - Zoom

7 缩放滑块控件 - ZoomSlider

8 鼠标位置 - MousePosition

示例：显示鼠标经纬度信息

9 ZoomToExtent

10 清除所有控件

五、Openlayers 入门教程 -系列文章列表

控件是一个可见的小部件，其 DOM 元素位于屏幕上的固定位置。它们可以涉及用户输入（按钮），或者仅提供信息；位置是使用 CSS 确定的。默认情况下，它们放置在 CSS 类名为 ol-overlay container-stop event 的容器中，但可以使用任何外部 DOM 元素。

.在Openlayers中多数Controls直接可以在地图上添加，比如Navigation（导航栏）。第二类是需要放在Div元素中才能用。第三类需要放置在panel（面板）中的操作类似于网页HTML中button按钮，需要点击或绑定才能起作用。最后一类就是自定义类型的。

一、常用的控件

controldefaults，地图默认包含的控件。
fullscreen，全屏控件，用于全屏幕查看地图。
mouseposition，鼠标位置控件，显示鼠标所在地图位置的坐标，可以自定义投影。
overviewmap，地图全局视图控件（鹰眼图）。
scaleline，比例尺控件。
zoom，地图放控件。
zoomslider，地图缩放滑块刻度控件。

二、使用控件方法

实例化地图map，通过参数control传入，不传值默认 control defaults 中的控件。
也可以利用map对象的**addControl()或addControls()**方法在地图上添加Controls对象。
需要在默认控件基础上继续添加控件，可以使用 ol.control.defaults().extend([new ol.control.FullScreen()]) 方法传入。

三、添加删除control 的基本方法

addControl(control) 将给定的控件添加到地图中
removeControl(control) 从地图中移除已给定的控件

四、control示例

1 比例尺 - ScaleLine

示例：添加比例尺功能

2 鹰眼/缩小图 - OverviewMap

示例：添加鹰眼功能

3 全屏 - FullScreen

示例：添加全屏显示功能

4 版权信息 - Attribution

示例：修改自定义地图版权信息

5 旋转地图 - Rotate

示例：添加旋转地图功能

6 放大缩小 - Zoom

示例：自定义地图放大缩小按钮功能

7 缩放滑块控件 - ZoomSlider

示例：添加缩放滑块控件

8 鼠标位置 - MousePosition

示例：显示鼠标经纬度信息

9 ZoomToExtent

示例： ZoomToExtent

10 清除所有控件

示例：清除所有控件，按需添加Control

五、Openlayers 入门教程 -系列文章列表

openlayers 入门教程（一）：openlayers简介
openlayers 入门教程（二）：Map 篇
openlayers 入门教程（三）：View 篇
openlayers 入门教程（四）：Layers 篇
openlayers 入门教程（五）：Sources 篇
openlayers 入门教程（六）：Controls篇
openlayers 入门教程（七）：Interactions篇
openlayers 入门教程（八）：Geom 篇
openlayers 入门教程（九）：Overlay 篇
openlayers 入门教程（十）：Style 篇
openlayers 入门教程（十一）：Formats篇
openlayers 入门教程（十二）：定位与轨迹
openlayers 入门教程（十三）：动画
openlayers 入门教程（十四）：第三方插件
openlayers 入门教程（十五）：与 canvas、echart，turf 等交互