目录
一、常用的控件
二、使用控件方法
三、添加删除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 等交互