控件是一个可见的小部件,其 DOM 元素位于屏幕上的固定位置。 它们可以涉及用户输入(按钮),或者仅提供信息; 位置是使用 CSS 确定的。 默认情况下,它们放置在 CSS 类名为 ol-overlaycontainer-stopevent 的容器中,但可以使用任何外部 DOM 元素。
.在Openlayers中多数Controls直接可以在地图上添加,比如Navigation(导航栏)。第二类是需要放在Div元素中才能用。第三类需要放置在panel(面板)中的操作类似于网页HTML中button按钮,需要点击或绑定才能起作用。最后一类就是自定义类型的。
常用的控件
controldefaults,地图默认包含的控件。
fullscreen,全屏控件,用于全屏幕查看地图。
mouseposition,鼠标位置控件,显示鼠标所在地图位置的坐标,可以自定义投影。
overviewmap,地图全局视图控件(鹰眼图)。
scaleline,比例尺控件。
zoom,地图放控件。
zoomslider,地图缩放滑块刻度控件。
使用控件
实例化地图map,通过参数control传入,不传值默认controldefaults中的控件。
也可以利用map对象的addControl()或addControls()方法在地图上添加Controls对象。
需要在默认控件基础上继续添加控件,可以使用ol.control.defaults().extend([new ol.control.FullScreen()]) 方法传入。
清除所有控件的方法
clearAllControls() {
let ctls = this.map.getControls();
let ctlsLength = ctls.getArray().length;
for (let i = 0; i < ctlsLength; i++)
this.map.removeControl(ctls.getArray()[i])
},