cesium地球瓦片加载完成了再执行动画

cesium项目有时候地球瓦片会加载很慢，这就会导致地球瓦片还没有加载出来配置的相关动画流程已经结束了，导致很突兀，所以我们需要实现监听瓦片是否加载完成，加载完成后再执行后续步骤。

这里我们使用Globe.tileLoadProgressEvent来监听瓦片的加载。

Globe.tileLoadProgressEvent 是 Cesium 中 Globe 对象的一个重要事件,用于监听地球表面瓦片加载进度。以下是对它的介绍和使用方法:

cesium版本

vue3 vite js

"cesium": "1.93.0",

动态效果

介绍

tileLoadProgressEvent 是一个事件,当瓦片加载队列的长度自上一个渲染帧以来发生变化时触发。具体来说:

当加载队列为空时,表示当前视图的所有地形和影像瓦片都已加载完成。
事件会传递瓦片加载队列的新长度作为参数。
可以通过监听这个事件来获取地图加载进度。

使用方法

以下是使用 tileLoadProgressEvent 的基本步骤:

获取 Globe 对象:

const globe = viewer.scene.globe;

添加事件监听:

globe.tileLoadProgressEvent.addEventListener((queueLength) => {
  // 处理加载进度
});

在回调函数中处理加载进度:

globe.tileLoadProgressEvent.addEventListener((queueLength) => {
  if (queueLength === 0) {
    console.log("所有瓦片加载完成");
  } else {
    console.log(`当前还有 ${queueLength} 个瓦片正在加载`);
  }
});

实际应用示例

以下是一个更完整的示例,展示如何使用 tileLoadProgressEvent 来获取和显示地图加载进度:

function getProgress() {
  let tilesLoaded = 0;
  let tilesTotal = 0;

  viewer.scene.globe.tileLoadProgressEvent.addEventListener((queueLength) => {
    tilesTotal++;
    if (queueLength === 0) {
      tilesLoaded++;
    }
    
    const loadProgress = (tilesLoaded / tilesTotal * 100).toFixed(2);
    console.log(`加载进度: ${loadProgress}%`);
    
    if (queueLength === 0 && tilesLoaded === tilesTotal) {
      console.log("地图加载完成");
    }
  });
}

// 调用函数开始监听
getProgress();

这个示例计算了已加载瓦片和总瓦片数,从而得出加载百分比。当所有瓦片加载完成时,会输出完成信息。

通过使用 tileLoadProgressEvent,我们可以有效地监控 Cesium 地球表面瓦片的加载进度,为用户提供更好的加载体验和反馈。

在线演示地址

cesium地球瓦片加载完成了再执行动画

实例代码下载

代码运行环境：vue3 + vite + js nodejs 16