openlayers控件ol.control.Control 自定义控件

openlayers控件是固定在屏幕上带DOM元素可见的小部件，可以是按钮，可以是只带信息的信息框，同时你自己也可以自定义自己需要的小部件。详细介绍大家可以自行查看官网文档。openlayers.org/en/latest/a…

以下是个人自定义的组件：

js代码

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(255,255,255,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
    })
}

//继承ol.control.Control
ol.inherits(ol.control.LoadingControl,ol.control.Control)

//暴露出去的方法
ol.control.LoadingControl.prototype.show = function(){
    this.element.style.display = 'block'
}

//暴露出去的方法
ol.control.LoadingControl.prototype.hidden = function(){
    this.element.style.display = 'none'
}

export default ol.control.LoadingControl

控件调用：

import LoadingControl from './loading.js'

let loadControl = new LoadingControl()
loadControl.set('id','loading') //标识控件，后续方便查找
map.addControl(loadControl)

// 根据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() // 显示控件
_load.hide() //隐藏控件

css代码：

.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;
            }
        }
    }
}

以上就是一套完整代码，从控件自定义到调用，如果有写的不好的地方，欢迎来交流！