Question

我正在使用Cesium在由Angular开发的网页中显示3D模型。问题是，当我单击按钮以使查看器全屏显示时，背景变成黑色，并且查看器没有伸展，这完全与铯角Git存储库上的this issue中所述。

在我的情况下，铯是在Angular项目的指令中定义的，我只需将属性传递给div，即可在所需的所有组件中调用它。例如：

<div [appCesium]="myResource.url + '/model.json'" class="cesiumContainer"></div>

在指令中，我仅定义了ngOnInit函数，该函数使用某些参数（缩放，动画等）初始化Cesiusm。我尝试添加一些代码行，这些代码行是在函数结尾处在回购中进行的讨论中建议的，以测试全屏模式是否可以正常工作。问题是初始化铯时模型要全屏显示，当我想通过单击Cesium查看器提供的放大按钮或（可选）禁用默认的全屏按钮并创建自定义按钮以全屏显示并触发自定义按钮来触发此代码时，运行我的代码。这是我的代码：

... viewer options settings ...
const viewer = new Cesium.Viewer(this.el.nativeElement, viewerOptions);
... home button definition ...
... zoom button definition ...
// test of full screen code (which works)
const canvas = viewer.canvas;
if ('webkitRequestFullscreen' in canvas) {
    canvas.webkitRequestFullscreen();
} else if ('requestFullScreen' in canvas) {
    canvas.requestFullScreen();
}

有什么主意吗？

编辑

此刻，我通过向全屏按钮添加侦听器来“修复”该问题，如下所示：

viewer.fullscreenButton.viewModel.command.afterExecute.addEventListener(function() {
  const canvas = viewer.canvas;
  if ('webkitRequestFullscreen' in canvas) {
    // chrome
    canvas.webkitRequestFullscreen();
  } else if ('requestFullScreen' in canvas) {
      // other browsers
      canvas.requestFullScreen();
  }
});

但是这种方法有两个问题：

只有画布全屏显示。小部件丢失。
在Cesium上的“全屏”按钮图标，第一次单击后将变为“退出全屏模式”，并且永远不会变回来。

如果您有解决此问题的解决方案，我将在此处保留此问题。

使铯铯全屏

0 个答案: