无法在 openLayers 中切换全屏按钮答案

【问题标题】：Not able to toggle Fullscreen button in openLayers无法在 openLayers 中切换全屏按钮
【发布时间】：2021-12-08 18:34:33
【问题描述】：

我正在实现全屏功能。我需要在以下 2 种情况下切换全屏按钮

当全屏模式为假时，我需要在地图上显示“全屏（按代码）”按钮。哪个工作正常。
当全屏模式为真时，我需要在地图上显示“退出全屏（按代码）”按钮。哪个不起作用。

我已经添加了我尝试过的代码。

const fullscreen = document.createElement('span');
fullscreen.innerHTML = '<img src="fullscreen.png" width="20" height="20">';
document.addEventListener('change', (event) => {
if(document.fullscreenElement){
fullscreen.innerHTML = '<img src="fullscreen" width="20" height="20">';
  }else{
    fullscreen.innerHTML = '<img src="exitfullscreen.png" width="20" height="20">';
  }
})

【问题讨论】：

标签： angular openlayers-6 openlayers-5

【解决方案1】：

您应该定义两个 span 元素，OpenLayers 将根据状态使用正确的元素

const fullscreen = document.createElement('span');
fullscreen.innerHTML = '<img src="fullscreen.png" width="20" height="20">';

const exitfullscreen = document.createElement('span');
exitfullscreen.innerHTML = '<img src="exitfullscreen.png" width="20" height="20">';

new ol.control.FullScreen({
  label: fullscreen,
  labelActive: exitfullscreen,
})

【讨论】：

非常感谢。你节省了我的时间。