无法在 openLayers 中切换全屏按钮

Question

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

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

我添加了我试过的代码。

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">';
  }
})

Answer 1

您应该定义两个跨度元素，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,
})

无法在 openLayers 中切换全屏按钮

Not able to toggle Fullscreen button in openLayers

angular

openlayers-6

openlayers-5