web-vue2/packages/components/map/controls/BaseMapControl.js

web ui for vue2

import {Control} from "ol/control";
class BaseMapControl extends Control {
    /**
     * 重写构造方法
     * @param opt_options
     */
    constructor(opt_options) {
        let options = opt_options || {};
        const element = document.createElement('div');
        element.className = 'base-map ol-selectable ol-control';
        if(options.buttons==null||options.buttons.length==0){
            options.buttons=[
                {name:"电子地图",code:"map",tipLabel:"点击切换成电子地图",className:"map1"},
                {name:"遥感地图",code:"img",tipLabel:"点击切换成遥感图",className:"map2"},
                {name:"地形地图",code:"ter",tipLabel:"点击切换成地形",className:"map3"},
            ]
        }

        super({
            element: element,
            options:options
        });
        for(let i in options.buttons){
            let button = document.createElement('button');
            let op=options.buttons[i];
            if(op.className)
                button.className=op.className;
            button.innerHTML = op.name;
            if(op.tipLabel)
                button.title=op.tipLabel;
            element.appendChild(button);
            button.addEventListener('click', this.handleClick.bind(this,op,options), false);
        }
    }
    handleClick(op,options,event) {
        this.getMap().getLayerGroup().getLayers().forEach((layerGroup,i)=>{
            if(layerGroup.get("code")=="base"&&layerGroup.getLayers) {
                let layers= layerGroup.getLayers();
                layers.forEach((layer, i) => {
                    let visible=op.code==layer.get("code");
                    layer.setVisible(visible);
                    // layer.getLayers().forEach((child,i)=>{
                    //     child.setVisible(visible);
                    // });
                });
            }
        })
    }
}

export default BaseMapControl;