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就可以