一、前言
Cesium 是一个强大的 3D 地球可视化库，广泛应用于地理信息系统（GIS）领域，提供了丰富的功能，如支持全球地形、影像渲染、3D 对象可视化等。Vite 是一个现代的构建工具，以其快速、简洁的特点广受开发者青睐。本文将指导你如何使用 Vite 创建一个 Cesium 项目，并配置 Cesium 的静态资源路径。
二、环境准备
首先，确保你的开发环境中安装了以下工具：
- Node.js：推荐安装最新版 Node.js，可以通过 Node.js 官网 获取并安装。
- Vite：Vite 是一个现代化的构建工具，创建和打包项目时具有非常高的效率。
安装完 Node.js 后，你可以使用 npm 或 yarn 来安装项目依赖。
三、创建 Vite 项目
- 初始化项目
打开终端，执行以下命令来创建一个新的 Vite 项目：
npm create vite@latest cesium-vite-demo --template vanilla这里使用了 Vite 的 vanilla 模板，这意味着我们将创建一个纯 JavaScript 项目。如果你使用 TypeScript，可以选择 vanilla-ts 模板。
- 进入项目目录
cd cesium-vite-demo- 安装依赖
在项目目录下，执行以下命令来安装 Vite 和其他依赖：
npm install四、安装 Cesium
在项目中使用 Cesium，首先需要通过 npm 安装 Cesium 库：
npm install cesium五、配置 Cesium 的静态资源路径
Cesium 有一些静态资源（如地球表面纹理、模型、影像等），这些资源需要被正确加载。默认情况下，Cesium 会从 node_modules/cesium/Build/Cesium/ 路径中加载静态资源。如果你想自定义这些静态资源的路径，可以进行以下配置。
- 配置 Vite 的
define 和静态资源路径
打开 vite.config.js 文件，添加 Cesium 的路径配置：
import { defineConfig } from 'vite';
import path from 'path';
export default defineConfig({
resolve: {
alias: {
cesium: path.resolve('node_modules/cesium')
}
},
build: {
rollupOptions: {
external: ['cesium'],
output: {
globals: {
cesium: 'Cesium'
}
}
}
},
define: {
'CESIUM_BASE_URL': JSON.stringify('/cesium/') // 设置 Cesium 静态资源路径
},
publicDir: 'public', // 配置静态资源目录
});在这个配置中，我们：
- 使用
define配置了CESIUM_BASE_URL，告诉 Cesium 从哪里加载静态资源。这里设置为/cesium/，即 Cesium 的资源将从/public/cesium/目录加载。 - 使用
resolve.alias设置了 Cesium 的路径，确保 Vite 能正确解析 Cesium 模块。 - 设置了
publicDir，告诉 Vite 将静态资源文件放在public目录下。
- 添加 Cesium 的静态资源到
public 目录
接下来，你需要将 Cesium 的静态资源（如模型、影像、地形等）从 node_modules/cesium/Build/Cesium/ 目录复制到项目的 public/cesium/ 目录下。你可以手动复制这些文件，或者使用脚本来处理。
手动复制的命令如下：
cp -r node_modules/cesium/Build/Cesium/ public/cesium/六、在 HTML 文件中加载 Cesium
修改 index.html 文件，添加 Cesium 的脚本和样式文件。Vite 默认会在项目的 index.html 中引入 JavaScript 代码，因此我们只需引入 Cesium 的相关文件。
在 <head> 标签中添加 Cesium 的样式：
<head>
<link rel="stylesheet" href="/cesium/cesium.css">
</head>在 <body> 标签中添加 Cesium 的脚本加载：
<body>
<div id="cesiumContainer" style="width: 100%; height: 100vh;"></div>
<script type="module">
import * as Cesium from 'cesium';
const viewer = new Cesium.Viewer('cesiumContainer', {
terrainProvider: Cesium.createWorldTerrain(),
});
</script>
</body>
这里，我们创建了一个 div 元素，并在其中初始化了一个 Cesium 的 Viewer 实例。
七、启动开发服务器
现在，一切准备就绪，你可以启动开发服务器来查看效果了。
npm run dev在浏览器中访问 http://localhost:3000，你应该能看到 Cesium 渲染的 3D 地球。
八、打包和部署
当开发完成并准备部署时，你可以使用以下命令来打包项目：
npm run buildVite 会将项目打包到 dist/ 目录下。你可以将 dist/ 目录中的内容部署到静态服务器上。如果你使用了自定义的 CESIUM_BASE_URL，请确保在服务器上正确配置路径。
九、总结
本文介绍了如何使用 Vite 创建一个简单的 Cesium 项目，并设置了 Cesium 默认的静态资源路径。通过正确配置 Vite 和 Cesium，你可以轻松地在现代 Web 项目中集成 Cesium，构建出强大的 3D 地理信息可视化应用。
可能的优化和扩展
- 缓存优化：在生产环境中，可以使用 HTTP 缓存策略来缓存 Cesium 的静态资源。
- 模块化开发：将 Cesium 的不同功能模块化，按需加载，减少首屏加载时间。
- TypeScript 支持：如果你使用 TypeScript，可以配置 Vite 来支持 TypeScript 开发，提升开发体验。
