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()])
转载自:https://blog.csdn.net/fengyekafei/article/details/80116862