ol-Cesium 在 Safari 中退出全屏模式不起作用

Question

我有一张用 OpenLayer 6 投影的地图。我添加了一个按钮以使用 ol-cesium 更改为 3d 视图。

当地图在 Cesium 中时，Openlayer 的全屏按钮不再可见（顺便说一句，当我在标准 OL 2d 中时，它在所有浏览器中都能完美运行），就像 ol-controls 一样。所以我添加了一个全屏按钮，它只在 ol3d 中出现。 但是，当我激活 ol3d 时，全屏和普通屏幕之间的切换只能在 Firefox 和 Chrome 中正常工作。 在 Safari 中，我可以访问全屏，但我无法退出（我必须使用键盘 esc）。我不明白问题出在哪里。

这是我的代码

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,
});

//set ol3d to false as normally I want the 2d map view
ol3d.setEnabled(false);

//when clicking on 3D I enable the Cesium view 
document.getElementById('enable').onclick = function() {

  //get the elements controlling Fullscreen mode
  let cesiumFsTrigger = document.getElementById('cesiumFs');
  let cesiumFsButton = document.getElementById('cesiumFsButton');

  //if ol3d is true
  if(!ol3d.getEnabled()){

    //when opening up Cesium I change zoom and center
    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);

       //set ol3d to true  
    ol3d.setEnabled(true);  

        //When in 3d add a "Fullscreen" icon in substitution to the OpenLayer interaction (otherwise not working with Cesium)
        //shows the new fullscreen button (set as active) 
        cesiumFsTrigger.classList.add('FsActive');

          //add a fontawesome icon
        cesiumFsButton.innerHTML = '<i id="toggleFs" class="fa fa-expand-arrows-alt" aria-hidden="true"></i>';

        let iconFs = document.getElementById('toggleFs');
        let cesiumFsElement = document.getElementById('map');

          //set fullscreen mode to the map
        cesiumFsTrigger.addEventListener("click", () => {
          if (!document.fullscreenElement) {
            Cesium.Fullscreen.requestFullscreen(cesiumFsElement);
            iconFs.classList.remove('fa-expand-arrows-alt');
            iconFs.classList.add('fa-compress-arrows-alt');
  
          } else {
             if (Cesium.Fullscreen.exitFullscreen) {
             Cesium.Fullscreen.exitFullscreen();
             iconFs.classList.remove('fa-compress-arrows-alt');
             iconFs.classList.add('fa-expand-arrows-alt');
             }
             else if (Cesium.Fullscreen.webkitExitFullscreen) {
             Cesium.Fullscreen.webkitExitFullscreen();
             iconFs.classList.remove('fa-compress-arrows-alt');
             iconFs.classList.add('fa-expand-arrows-alt');
             }

          }
         });//close fullscreen conditions for icons 
  }
  else {
     //if ol3d is false
    ol3d.setEnabled(false)
    map.setView(view); 
    cesiumFsTrigger.classList.remove('FsActive');
  }
};

Answer 1

我确认它可以与 Safari 一起使用， 我的主要想法是创建一个查看器并添加一个自定义事件处理程序 beforeExecute 和 afterExecute。
在这方面，我对 Safari 和其他浏览器有不同的行为。

用于检查它是否有效。
首先获取test.igc（扩展很重要）测试轨道。
接下来转到https://www.highcanfly.club/trackjoiner并添加一个“Vol”，这是一只苍蝇……。 点击“Tracer en 3D”后，它会像这样创建一个 Cesium Viewer 并添加两个自定义事件：
Look in the full code for the cesium() method。它是在安装视图后立即调用的方法。

         Ion.defaultAccessToken = cesiumConf.token;
        const viewer = new Viewer('cesiumContainer', {
            geocoder: false,
            infoBox: true,
            timeline: false,
            animation: false,
            navigationHelpButton: true,
            sceneModePicker: false,
            baseLayerPicker: this.$auth0.user.value !== undefined,
            terrainProvider: createWorldTerrain(),
            // imageryProvider: new Cesium.OpenStreetMapImageryProvider({
            //   url: 'https://a.tile.openstreetmap.org/'
            // }),
            imageryProvider: new ArcGisMapServerImageryProvider({
                url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
            })
        });
        viewer.scene.primitives.add(createOsmBuildings());
        const fullScreenHandler = () => {
            const canvas = viewer.canvas;
            if ('webkitRequestFullscreen' in canvas) {
                canvas['webkitRequestFullscreen']() // Safari
            } else {
                canvas.requestFullscreen();
            }
        }
        viewer.fullscreenButton.viewModel.command.beforeExecute.addEventListener(fullScreenHandler)
        viewer.fullscreenButton.viewModel.command.afterExecute.addEventListener(fullScreenHandler)

如果您想查看我的完整代码，请访问：
https://github.com/highcanfly-club/vue-highcanfly/blob/main/src/components/Cards/CardCesium.vue。

Answer 2

这是我找到的解决方案，效果很好

HTML

<div id="map" class="map">
  <div id="cesiumFs"></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

//the following code enables the change of view in 3D Cesium (ol-cesium)
const ol3d = new olcs.OLCesium({
  map: map,
});
//set ol3d to false as normally I want the 2d map view
ol3d.setEnabled(false);

//when clicking on 3D I enable the Cesium view 
document.getElementById('enable').onclick = function() {

  //get the elements controlling Fullscreen mode
  let cesiumFsTrigger = document.getElementById('cesiumFs');
  
  if(!ol3d.getEnabled())
  //if ol3d is true
  {
       //when opening up Cesium I change zoom and center
    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);

    //enable ol3d  
    ol3d.setEnabled(true);


        //Fullscreen Cesium 
        //shows the fullscreen container (set as active) 
        cesiumFsTrigger.classList.add('FsActive');

        let cesiumFsElement = document.getElementById('map');

        //set the Cesium widget fullscreen
        var widgetFsContainer= document.getElementById('cesiumFs');
        
        //adds the Cesium.Fullscreenbutton
        new Cesium.FullscreenButton(widgetFsContainer, cesiumFsElement);    
          
       
  }
  else {

    //if ol3d is false
    ol3d.setEnabled(false)
    map.setView(view);
    const widgetToRemove = document.getElementsByClassName('cesium-button');
    while(widgetToRemove.length > 0){
      widgetToRemove[0].parentNode.removeChild(widgetToRemove[0]);
    }
       
    cesiumFsTrigger.classList.remove('FsActive');

  }
};