vue使用cesium加载倾斜摄影模型报错

Question

vue使用cesium加载倾斜摄影模型报错如下，会不会是cesium版本的问题？

Answer 1

引自免费微信小程序：皆我百晓生

遇到在Vue中使用Cesium加载倾斜摄影模型时报错的情况，通常是因为Cesium的Promise对象未能正确处理或资源未被正确加载。错误信息显示为“Cannot read properties of undefined (reading 'then')”，这表明在尝试访问一个未定义对象的'then'属性时发生了错误。

为了解决这个问题，可以遵循以下步骤：

1. 确认Cesium的版本兼容性

确保使用的Cesium版本与Vue项目兼容。Cesium 1.75及更高版本应该与Vue很好地协同工作。可以通过修改package.json文件中的Cesium依赖项来更新Cesium版本。

2. 检查Cesium的导入方式

在Vue组件中正确导入Cesium非常重要。使用ES6模块语法导入Cesium可以避免一些全局变量冲突的问题。例如：

import * as Cesium from 'cesium/Cesium';

或者，如果你使用的是Cesium的构建版本，确保在main.js或index.js中正确地加载了Cesium，并将其添加到Vue原型中：

import Vue from 'vue';
import * as Cesium from 'cesium/Cesium';

Vue.prototype.$Cesium = Cesium;

3. 异步初始化Cesium Viewer

在Vue组件的mounted生命周期钩子中异步初始化Cesium Viewer，这样可以确保DOM元素已准备好：

export default {
  name: 'MyCesiumComponent',
  mounted() {
    this.initCesium();
  },
  methods: {
    async initCesium() {
      const viewer = new this.$Cesium.Viewer('cesiumContainer', { ... });
      // 加载倾斜摄影模型
      const model = await Cesium.IonResource.fromAssetId(1234); // 使用正确的模型ID
      viewer.scene.primitives.add(new this.$Cesium.Cesium3DTileset({ url: model }));
    }
  }
}

4. 检查资源URL

确保倾斜摄影模型的URL正确无误。如果模型位于服务器上，检查跨源资源共享（CORS）设置是否允许从你的Vue应用中请求这些资源。

5. 错误处理

在加载模型或初始化Cesium Viewer时，添加错误处理逻辑，以便于调试和捕获潜在的网络或配置错误：

try {
  // Cesium Viewer初始化和模型加载代码
} catch (error) {
  console.error('Cesium initialization error:', error);
}

通过以上步骤，你应该能解决在Vue中使用Cesium加载倾斜摄影模型时遇到的问题。如果问题仍然存在，考虑检查浏览器的开发者工具中的网络标签页，查看是否有资源加载失败的错误提示。