The OpenLayers control is a widget fixed on the screen with DOM elements visible. It can be a button or an information box with only information. You can also customize your own widgets. You can check the official website for details. Openlayers.org/en/latest/a…

The following is a personal custom component:

Js code

ol.control.LoadingControl = function(opt_options){
    const _options = opt_options || {}
    
    const _root = document.createElement('div')
    _root.className = 'ol-layer-data-loading'
    _root.style = {
        'width':'100%'.'height':'100%'.'background-color':'rgba (255255255,0.5)'
    }
    
    const _box = document.createElement('span')
    _box.className = 'ol-layer-spin-dot-spin'
    
    for(let i = 0 ; i < 4; i++){
        const _i = document.createElement('i')
        _i.className = 'ol-layer-spin-dot-item dot'+i
        _box.appendChild(_i)
    }
    _root.appendChild(_box)
    
    ol.control.Control.call(this, {element:_root,
        target:_options.target
    })
}

/ / inheritance ol. Control. Control
ol.inherits(ol.control.LoadingControl,ol.control.Control)

// The method of exposure
ol.control.LoadingControl.prototype.show = function(){
    this.element.style.display = 'block'
}

// The method of exposure
ol.control.LoadingControl.prototype.hidden = function(){
    this.element.style.display = 'none'
}

export default ol.control.LoadingControl
Copy the code

Control call:

import LoadingControl from './loading.js'

let loadControl = new LoadingControl()
loadControl.set('id'.'loading') // Identify the control to facilitate subsequent lookup
map.addControl(loadControl)

// Find the control added to the map by id
function getControlById(id,map){
    let _controlArray = map.getControls().getArray()
    let filter = _controlArray.filter(a= >{
        return a.get('id') == id
    }) 
    
    return filter.length > 0 ? filter[0] :undefined
}

let _load = getControlById('loading',map)
_load.show() // Display the control
_load.hide() // Hide the control
Copy the code

The CSS code:

.ol-layer-data-loading{
    width:100%;
    height:100%;
    box-sizing:border-box;
    margin:0;
    padding:0;
    font-size:14px;
    font-variant:tabular-nums:
    line-height:1.5;
    list-style:none;
    font-feature-settings:'tnum';
    position:absolute;
    display:none;
    color:#6996ff;
    text-align:center;
    vertical-align:middle;
    transition:transform 0.3 cubic-bezier(0.78.0.14.0.15.0.86);
    background-color:rgba(255.255.255.0.5)
    
    .ol-layer-spin-dot-spin{
        position:relative;
        top:50%;
        font-size:32px;
        transform:rotate(45deg);
        animation:antRotate 1.2s infinite linear;
        display:inline-block;
        width:1em;
        height:1em;
        
        .ol-layer-spin-dot-item{
            position:absolute;
            display:block;
            width:9px;
            height:9px;
            background-color:#6996ff;
            border-radius:100%;
            transform:scale(0.75)
            transform-origin:50% 50%;
            animation:antSpinMove 1s infinite linear alternate;
            -webkit-animation:antSpinMove 1s infinite linear alternate;
            
            &.dot0{
                top:0;
                left:0;
                opacity:1;
            }
            
            &.dot1{
                top:0;
                right:0;
                opacity:0.6;
            }
            
            &.dot2{
                bottom:0;
                right:0;
                opacity:0.3;
            }
            
            &.dot3{
                bottom:0;
                left:0;
                opacity:0.1; }}}}Copy the code

The above is a complete set of code, from control custom to call, if there is a bad place to write, welcome to exchange!