ol-Cesium在Safari中无法退出全屏模式问题求助

1. 全屏状态判断不兼容Safari：Safari不支持标准的document.fullscreenElement属性，仅兼容带webkit前缀的document.webkitFullscreenElement，导致进入全屏后按钮点击仍判定为未全屏，无法触发退出逻辑。
2. 事件重复绑定风险：每次切换到3D模式时都给全屏按钮添加点击事件，多次切换会导致事件重复绑定，引发多次回调执行。

1. 统一全屏状态判断逻辑 #

替换原有判断条件，兼容所有主流浏览器（包括Safari）。

2. 优化事件绑定方式 #

将全屏按钮的点击事件绑定移到3D切换逻辑之外，确保仅绑定一次，避免重复触发。

3. 简化Cesium全屏退出调用 #

Cesium的Fullscreen工具类已封装浏览器前缀兼容，无需自行判断前缀，直接调用对应方法即可。

HTML部分（无改动） #

<div id="map" class="map">
  <div id="cesiumFs">                                                       
    <button id="cesiumFsButton" type="button" title="Toggle full-screen"></button>
  </div>

  <div id="CesiumEnable" class="cesium-icon-change-3d" title="Change projection">
    <i id="globe" class="fa fa-globe fa-2x" aria-hidden="true"></i>
  </div>
</div>

JS部分 #

const ol3d = new olcs.OLCesium({
  map: map,
});

// 默认关闭3D视图
ol3d.setEnabled(false);

// 提前获取DOM元素，避免重复查询
const cesiumFsTrigger = document.getElementById('cesiumFs');
const cesiumFsButton = document.getElementById('cesiumFsButton');
const cesiumFsElement = document.getElementById('map');
let iconFs = null;

// 全屏切换逻辑，仅绑定一次
cesiumFsTrigger.addEventListener("click", () => {
  // 兼容所有浏览器的全屏状态判断
  const isFullscreen = document.fullscreenElement 
    || document.webkitFullscreenElement 
    || document.mozFullScreenElement 
    || document.msFullscreenElement;

  if (!isFullscreen) {
    Cesium.Fullscreen.requestFullscreen(cesiumFsElement);
    iconFs.classList.remove('fa-expand-arrows-alt');
    iconFs.classList.add('fa-compress-arrows-alt');
  } else {
    // Cesium已封装前缀兼容，直接调用退出全屏
    Cesium.Fullscreen.exitFullscreen();
    iconFs.classList.remove('fa-compress-arrows-alt');
    iconFs.classList.add('fa-expand-arrows-alt');
  }
});

// 3D视图切换逻辑
document.getElementById('enable').onclick = function() {
  if(!ol3d.getEnabled()){
    // 切换3D视图时重置地图视角
    const NewView =  new ol.View({
      projection: mercatorProjection,
      center: ol.proj.transform([-80, 20], 'EPSG:4326', 'EPSG:3857'),
      zoom: 3,
      maxZoom: 15,
      minZoom: 0,     
    }); 
    map.setView(NewView);

    ol3d.setEnabled(true);  

    // 显示自定义全屏按钮并设置图标
    cesiumFsTrigger.classList.add('FsActive');
    cesiumFsButton.innerHTML = '<i id="toggleFs" class="fa fa-expand-arrows-alt" aria-hidden="true"></i>';
    iconFs = document.getElementById('toggleFs');
  }
  else {
    // 关闭3D视图，恢复原视角
    ol3d.setEnabled(false);
    map.setView(view); 
    cesiumFsTrigger.classList.remove('FsActive');
  }
};

备选方案（原生API兼容） #

若Cesium的Fullscreen工具仍存在兼容问题，可替换为原生API的兼容写法：

// 进入全屏逻辑替换
if (cesiumFsElement.requestFullscreen) {
  cesiumFsElement.requestFullscreen();
} else if (cesiumFsElement.webkitRequestFullscreen) {
  cesiumFsElement.webkitRequestFullscreen();
} else if (cesiumFsElement.mozRequestFullScreen) {
  cesiumFsElement.mozRequestFullScreen();
}

// 退出全屏逻辑替换
if (document.exitFullscreen) {
  document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
  document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
  document.mozCancelFullScreen();
}

内容的提问来源于stack exchange，提问作者Elena Politi