openlayers 入门教程（六）：controls 篇

还是大剑师兰特

已于 2024-04-30 17:30:41 修改

阅读量3k

点赞数 73

分类专栏： # GIS入门教程文章标签： control 大剑师 openlayers入门教程

于 2024-03-25 00:00:00 首次发布

本文链接：https://blog.csdn.net/cuclife/article/details/136681072

版权

GIS入门教程专栏收录该内容

35 篇文章 34 订阅

订阅专栏

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；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+】

在这里插入图片描述

文章目录

在这里插入图片描述

控件是一个可见的小部件，其 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()]) 方法传入。