vue使用cesium1.103.0

集成和使用 Cesium 1.103.0 在 Vue 项目中的方法
安装依赖库
为了在 Vue 项目中集成 Cesium，首先需要安装必要的 npm 包。通过命令行工具执行如下指令来添加 cesium 库到项目的 dependencies 中：
npm install cesium --save
登录后复制
这一步骤确保了 Cesium 的核心功能可以被引入并用于开发环境。
创建全局变量声明文件
由于 Cesium 使用了一个名为 Cesium 的全局对象，在 TypeScript 或严格模式下可能会遇到未定义错误。因此建议创建一个自定义的 .d.ts 文件以便于 IDE 和编译器识别该全局变量:
// src/shims.d.ts
declare module 'cesium';
import * as Cesium from 'cesium';
(window as any).Cesium = Cesium;
登录后复制
此操作使得整个应用程序能够访问 Cesium 对象而无需每次都导入它[^1]。
初始化 Cesium Viewer 组件
接下来可以在组件内部实现初始化逻辑。下面是一个简单的例子展示如何在一个单独的 Vue 单文件组件 (SFC) 内部完成这一过程：
<template>
<div id="cesiumContainer"></div>
</template>

<script lang="ts">
import { defineComponent, onMounted } from "vue";
export default defineComponent({
name: "CesiumMap",
setup() {
let viewer;

const initCesium = () => {
viewer = new Cesium.Viewer("cesiumContainer", {
// 可选参数...
});
};

onMounted(() => {
initCesium();
});

return {};
},
});
</script>

<style scoped>
#cesiumContainer {
width: 100%;
height: calc(100vh - var(--header-height));
}
</style>
登录后复制
这段代码展示了如何利用 Composition API 来设置生命周期钩子函数，并调用 initCesium() 方法以启动地图视图。
解决潜在问题
当运行应用时如果遇到了关于 WebGL 上下文丢失的问题，则可能是因为浏览器的安全策略阻止加载来自本地磁盘上的资源。解决办法之一是在启动 dev server 前设置正确的 CORS 头信息或者将 assets 放置在线上服务器上供测试用途。