Question

背景

我使用Cesium在使用Viewer.canvas.toDataURL捕获图像时运行模拟。模拟中有一些动作，我希望在动作开始时完全加载地图图像。但是，对于前几次渲染，图像的细节总是非常低。

我只想以15fps捕获图像，所以为了提高效率，我最多渲染15fps。问题是图像开始是低细节的，只有在渲染时才会更新。高细节图像需要大约75个渲染才能加载，这意味着输出图像的前5秒将以低细节图像渲染。

问题

我想将低细节图像的输出图像数量减少到15以下，理想情况下为0.

我怎么能

a）预先加载图像，以便在我开始渲染时将图像完全加载

或

b）使用渲染之间的时间来加载图像，以便最小化具有低细节图像的帧数？

或许还有另一种解决方案我还没想到。

我尝试过的事情

1）我试图限制图像提供者的区域，以加载更少的图像。这不会导致任何明显的变化，事实上它不会导致Viewer.imageryLayers._layers[0]._imageryProvider.rectangle的任何变化。

var Viewer = new Cesium.Viewer('cesiumContainer', {
  imageryProvider: Cesium.BingMapsImageryProvider({
    url: 'https://dev.virtualearth.net',
    rectangle: Cesium.Rectangle.fromDegrees(
      Params.Lon - 5, Params.Lat - 5, Params.Lon + 5, Params.Lat - 5)
  })

2）我尝试过提升图像提供程序的minimumLevel，希望这会阻止它加载低细节图像。同样，这并没有解决问题，Viewer.imageryLayers._layers[0]._imageryProvider.minimumLevel不受影响，始终为0。

var Viewer = new Cesium.Viewer('cesiumContainer', {
  imageryProvider: Cesium.BingMapsImageryProvider({
    url: 'https://dev.virtualearth.net',
    minimumLevel: 15
  })
});

最小工作示例

var Viewer = new Cesium.Viewer('cesiumContainer')
Viewer.useDefaultRenderLoop = false;

var CameraTarget = new Cesium.ConstantPositionProperty(
  new Cesium.Cartesian3(
    -1673357.9867530654,
    -4597650.657420824,
    4077993.9927027463
  )
);
var CameraOffset = new Cesium.ConstantPositionProperty(
  new Cesium.Cartesian3(20, 2, 15)
);

var RenderInterval = 1 / 15; // seconds
var TimeDelta = 0;
var LastRenderTime = 0;

function ScreenCapture()
{
  console.log('capture');
}

function Render()
{
  var CurrentTime = Viewer.clock.currentTime.secondsOfDay;
  var TimeDelta = CurrentTime - LastRenderTime;
  if (TimeDelta > RenderInterval)
  {
    Viewer.camera.lookAt(
      CameraTarget.getValue(Viewer.clock.currentTime),
      CameraOffset.getValue(Viewer.clock.currentTime)
    );
    Viewer.render();
    LastRenderTime = CurrentTime;
  }
  else
  {
    Viewer.clock.tick();
  }

  Cesium.requestAnimationFrame(Render);
}
Cesium.requestAnimationFrame(Render);

如何避免在Cesium中加载低细节图像？

0 个答案: