cesium vue

### 在 Vue 中集成 Cesium 三维地球可视化库

#### 安装依赖项
为了在 Vue 项目中使用 Cesium，需要安装必要的 npm 包。通过命令行工具执行如下操作来引入 `cesium` 和其他辅助包：

npm install cesium vue-class-component vue-property-decorator --save

此步骤确保了 Cesium 及其与 Vue 组件化开发模式兼容的支持文件被正确加载到项目环境中[^3]。

#### 配置 Webpack
由于 Cesium 库体积较大，默认情况下可能不适合直接打包进入前端资源中。因此建议修改 webpack.config.js 文件以优化构建流程并减少不必要的性能开销:

const path = require('path');
module.exports = {
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'src'),
            Cesium$: 'cesium/Source/Cesium'
        }
    },
    module: {
        rules: [
            // ... other rules omitted ...
            {
                test: /\.js$/,
                include: /node_modules\/cesium/,
                use: [{
                    loader: 'script-loader'
                }]
            }
        ]
    }
};

这段配置使得应用程序能够更高效地处理来自 node_modules 下 cesium 目录内的 JavaScript 脚本文件。

#### 创建 Cesium Viewer 组件
接下来定义一个新的 Vue 单文件组件用于承载 Cesium 场景实例。这里采用 TypeScript 类风格语法增强代码可读性和维护性：

<template>
<div id="cesiumContainer"></div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
declare let Cesium: any;

@Component({
name: "CesiumViewer"
})
export default class extends Vue {

mounted() {
this.init();
}

init(): void {
if (!window.CESIUM_BASE_URL) window.CESIUM_BASE_URL = "/";

// Initialize the viewer with a div element.
var viewer = new Cesium.Viewer("cesiumContainer", {
shouldAnimate: true,
timeline: false,
animation: false
});
}
}
</script>

<style scoped>
#csmContainer {
width: 100%;
height: calc(100vh - var(--header-height));
}
</style>

上述模板创建了一个名为 `CesiumViewer` 的自定义组件，并在其挂载完成后初始化一个基本的地图视图对象。

#### 使用 Cesium Viewer 组件
最后一步是在页面布局或其他父级容器内注册并渲染刚才定义好的子组件即可实现完整的功能展示效果：

<CesiumViewer />

这样就完成了整个集成过程，实现了基于 Vue 框架下的 Cesium 三维地理信息系统应用搭建工作。