OpenLayers4自定义控件-模拟视频网站开关灯的效果

视频网站一般都有个开关灯的功能，关灯后，网站变黑，只有视频窗口没有影响。

用OpenLayers4自定义控件模拟实现。

先放简易效果图。黑屏的效果直接采用简易的蒙版效果模拟。

开灯效果

关灯效果

    // 自定义控件(关灯开灯)
    ol.control.Light = function (opt_options) {
        var options = opt_options || {}; // 参数
        this.openText = options.openText ? options.openText : "开灯"; // 开灯的默认文字
        this.closeText = options.closeText ? options.closeText : "关灯"; // 关灯的默认文字

        var className = "ol-unselectable ol-control"; // 控件默认样式
        var closeLightClass = "ol-light"; // 自定义控件的样式

        this.element = document.createElement("div"); // 控件容器
        this.element.className = closeLightClass + " " + className; // 设置控件的样式

        this.button = document.createElement("button"); // 开关按钮
        this.button.setAttribute("title", this.closeText); // 设置提示文字
        this.button.className = "off";
        this.element.appendChild(this.button);

        var this_ = this; // 存储当前指向的控件对象
        this.button.onclick = function (event) {
            event = event || window.event; // 获取event对象
            this_.execute(); // 执行动作
            event.preventDefault(); // 阻止事件冒泡
        };
        ol.control.Control.call(this, {
            element: this.element,
            target: options.target
        });
    };

    // 指定控件继承关系
    ol.inherits(ol.control.Light, ol.control.Control);

    // 按钮执行事件
    ol.control.Light.prototype.execute = function () {
        if (this.button.getAttribute("title") == this.openText) {
            this.lightOn();
        } else {
            this.lightOff();
        }
    };

    // 开灯
    ol.control.Light.prototype.lightOn = function () {
        // 修改按钮文字及样式
        this.button.setAttribute("title", this.closeText);
        this.button.classList.remove("on");
        this.button.className = "off";
        this.button.blur(); // 失去焦点，否则有点击的border
        // 删除蒙版
        var mb = document.getElementsByClassName("ol-light-mask")[0];
        mb.parentNode.removeChild(mb);
    };

    // 关灯
    ol.control.Light.prototype.lightOff = function () {
        // 修改按钮文字及样式
        this.button.setAttribute("title", this.openText);
        this.button.classList.remove("off");
        this.button.className = "on";
        this.button.blur();
        // 添加蒙版
        var mb = document.createElement("div");
        mb.className = "ol-light-mask";
        var viewPort = this.getMap().getViewport();
        viewPort.insertBefore(mb, viewPort.childNodes[0]);
    };

初始化Map时，只需添加控件即可。

controls: ol.control.defaults().extend([new ol.control.Light()])