还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。
| No. | 内容链接 |
|---|---|
| 1 | Openlayers 【入门教程】 - 【源代码+示例300+】 |
| 2 | Leaflet 【入门教程】 - 【源代码+图文示例 150+】 |
| 3 | Cesium 【入门教程】 - 【源代码+图文示例200+】 |
| 4 | MapboxGL【入门教程】 - 【源代码+图文示例150+】 |
| 5 | 前端就业宝典 【面试题+详细答案 1000+】 |
文章目录
-
- 一、常用的控件
- 二、使用控件方法
- [三、添加删除control 的基本方法](#三、添加删除control 的基本方法)
- 四、control示例
-
- [1 比例尺 - ScaleLine](#1 比例尺 - ScaleLine)
- [2 鹰眼/缩小图 - OverviewMap](#2 鹰眼/缩小图 - OverviewMap)
- [3 全屏 - FullScreen](#3 全屏 - FullScreen)
- [4 版权信息 - Attribution](#4 版权信息 - Attribution)
- [5 旋转地图 - Rotate](#5 旋转地图 - Rotate)
- [6 放大缩小 - Zoom](#6 放大缩小 - Zoom)
- [7 缩放滑块控件 - ZoomSlider](#7 缩放滑块控件 - ZoomSlider)
- [8 鼠标位置 - MousePosition](#8 鼠标位置 - MousePosition)
- [9 ZoomToExtent](#9 ZoomToExtent)
- [10 清除所有控件](#10 清除所有控件)
- [五、Openlayers 入门教程 -系列文章列表](#五、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 清除所有控件
五、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 等交互