Openlayers 详细记录controls（控件）

controls：控件是一个可见的小部件，在屏幕上的固定位置具有DOM元素。

我controls沙盒的案例：https://codesandbox.io/s/hopeful-black-dnvcl?fontsize=14&hidenavigation=1&theme=dark

默认控件

默认情况下，地图中包含的控件集。除非另行配置，否则它将返回一个包含以下每个控件实例的集合：

• module:ol/control/Zoom~Zoom
• module:ol/control/Rotate~Rotate
• module:ol/control/Attribution~Attributio

zoom：地图缩放 

移除默认控件 

如何移除默认三个控件DefaultsOptions{Object}

controls: defaultControls({
    rotate:false,
    zoom: false

}).extend([])

记得 zoom，rotate，attribute一定不要首字母大写 

更多比较常用控件：

获取经纬度：MousePosition 

import MousePosition from 'ol/control/MousePosition';
// 鼠标获取经纬度
var mousePositionControl = new MousePosition({
    coordinateFormat: createStringXY(4),
    projection: "EPSG:4326",
    // comment the following two lines to have the mouse position
    // be placed within the map.
    className: "custom-mouse-position", //样式
    target: document.getElementById("mouse-position"),//指定元素
    undefinedHTML: " "});
// 渲染地图
var map = new Map({
    controls: defaultControls({
        zoom: false,
        rotate: false,
        attribution: false    
    }).extend([
        mousePositionControl
    ])
});

地图全屏：FullScreen

import { FullScreen } from "ol/control"; //控件
var map = new Map({
    controls: defaultControls({
        zoom: false,
        rotate: false,
        attribution: false    
    }).extend([
        new FullScreen()
    ])
});

如果需要改变样式：.ol-full-screen-false，ol-full-screen-true通过控制className就可以