vue3 使用cesium

### 如何在 Vue 3 中集成 Cesium 并进行开发

#### 创建 Vue 3 项目
为了开始集成本过程，首先需要创建一个新的 Vue 3 项目。可以使用 Vue CLI 或者 Vite 来快速初始化一个新项目。

对于 Vue CLI 用户来说，可以通过如下命令安装最新版本的 Vue CLI 和创建项目：

npm install -g @vue/cli
vue create my-project
cd my-project

而对于偏好 Vite 的开发者，则可执行下面的操作来建立基于 Vite 的 Vue 应用程序:

npm init vite@latest my-vue-app --template vue
cd my-vue-app
npm install

#### 安装 Cesium 及其依赖项
一旦有了基础框架，在终端里进入项目的根目录下，接着添加必要的包以支持 Cesium 功能。这通常涉及到安装 `cesium` NPM 包以及可能的一些辅助工具或库。

npm install cesium

需要注意的是，当引入 Cesium 类时应遵循特定路径以防遇到潜在错误[^4]。

#### 修改 Webpack 配置
为了让 Cesium 能够顺利工作于 Vue 环境之中，需调整构建工具的相关设定——即修改 `vue.config.js` 文件中的 Webpack 设置以便正确处理来自 Cesium 的静态文件和其他资源。

具体做法是在该配置文件内加入针对 Cesium 的特殊处理逻辑，比如指定公共路径、优化图片加载方式等措施确保一切按预期运作[^1]。

#### 编写自定义 Hook 函数用于管理 Cesium 实例
考虑到代码复用性和维护便利性的因素，建议编写专门用来初始化和控制 Cesium Viewer 组件行为的小型 hook 函数。此类函数可以在多个地方被调用而无需重复书写相同的初始化语句。

这里给出一段简单的实现例子作为参考：

// useCesiumView.js
import { Ion, Terrain, Viewer } from "cesium";

Ion.defaultAccessToken = "在此处填入有效的访问令牌"; // 替换成自己的 token

export const useCesiumView = (containerId, options = {}) => {
    return new Viewer(containerId, {
        terrainProvider: Terrain.fromWorldTerrain(),
        ...options,
    });
};

这段脚本展示了怎样利用官方提供的 API 构建出一个基本的地图查看器实例，并允许传参定制更多属性[^3]。

#### 将 Cesium 嵌入到 Vue 组件当中
最后一步就是把之前准备好的所有东西组合起来形成完整的解决方案啦！打开任意一个 .vue 结构化的单文件组件，按照常规方法导入刚刚编写的 hook 方法并应用至模板部分即可完成整个流程。

以下是具体的实践案例片段供学习交流之用：

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

<script setup lang="ts">
import { onMounted } from "vue";
import { useCesiumView } from "./path/to/useCesiumView";

onMounted(() => {
    let viewer = useCesiumView("cesiumContainer");
});
</script>

<style scoped>
/* 根据实际情况调整样式 */
#cesiumContainer {
    width: 100%;
    height: calc(100vh - var(--header-height));
}
</style>

此外，还需保证 HTML 页面本身具有合适的布局结构让地图容器占据足够的空间展示内容[^5]。