还是大剑师兰特:曾是美国某知名大学计算机专业研究生,现为航空航海领域高级前端工程师;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()])
方法传入。
三、添加删除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文章来源:https://www.toymoban.com/news/detail-851789.html
10 清除所有控件
示例: 清除所有控件,按需添加Control 文章来源地址https://www.toymoban.com/news/detail-851789.html
五、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 等交互
到了这里,关于openlayers 入门教程(六):controls 篇的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!