A control is a visible widget with a DOM element at a fixed position on the screen. They can involve user input (buttons), or simply provide information; the position is determined using CSS. By default, they are placed in a container with a CSS class named ol-overlaycontainer-stopevent, but any external DOM element can be used.
.In Openlayers, most Controls can be added directly on the map, such as Navigation (navigation bar). The second category needs to be placed in a Div element to be used. The third type of operation that needs to be placed in the panel (panel) is similar to the button button in the HTML of the web page, and it needs to be clicked or bound to work. The last category is the custom type.
commonly used controls
controldefaults, the controls included in the map by default.
fullscreen, full screen control, used to view the map in full screen.
mouseposition, the mouse position control, displays the coordinates of the map position where the mouse is located, and can customize the projection.
overviewmap, map global view control (Eagle Eye Map).
scaleline, scale control.
zoom, map control.
zoomslider, map zoom slider scale control.
use controls
Instantiate the map map, pass in the parameter control, if no value is passed, it defaults to the control in controldefaults.
You can also use the addControl() or addControls() method of the map object to add Controls objects on the map.
If you need to continue adding controls based on the default controls, you can use the ol.control.defaults().extend([new ol.control.FullScreen()]) method to pass in.
Method to clear all controls
clearAllControls() {
let ctls = this.map.getControls();
let ctlsLength = ctls.getArray().length;
for (let i = 0; i < ctlsLength; i++)
this.map.removeControl(ctls.getArray()[i])
},