npm install cesium @cesium/engine vite-plugin-cesium -D
时间: 2025-05-16 15:50:16 浏览: 38
### 安装 Cesium 及其相关依赖项
为了在基于 Vite 的项目中使用 Cesium,可以通过以下方法安装所需的依赖项并将其设置为开发依赖:
#### 使用 npm 进行安装
运行以下命令可以一次性完成 `cesium`、`@cesium/engine` 和 `vite-plugin-cesium` 的安装,并将它们标记为开发依赖( `-D` 表示仅作为开发环境中的依赖)。
```bash
npm install cesium @cesium/engine vite-plugin-cesium -D
```
此命令会自动将指定的包添加到项目的 `package.json` 文件中的 `devDependencies` 字段下[^1]。
如果希望安装特定版本的 Cesium(例如 1.99),则可以在命令中明确指定版本号。以下是针对 Cesium 版本 1.99 的安装命令:
```bash
npm install [email protected] vite-plugin-cesium -D
```
需要注意的是,在某些情况下,API 文档可能未及时更新至最新版本,因此建议根据实际需求选择合适的版本以匹配现有文档说明[^2]。
#### 配置 Babel 解析器(可选)
对于部分 Vue 项目而言,扩展解析器可能是必要的操作之一。这一步骤涉及下载插件以及修改配置文件内容。具体做法如下所示:
1. **安装必需的 Babel 插件**
执行下面这条指令即可获取支持可选链语法等功能所必备的组件:
```bash
npm install --save-dev @babel/plugin-proposal-optional-chaining
```
2. **调整 Babel 配置**
接下来需编辑位于根目录下的 `babel.config.js` 文件,向其中加入新启用的功能模块定义代码片段:
```javascript
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: ['@babel/plugin-proposal-optional-chaining']
};
```
上述更改有助于确保构建过程能够正确处理现代 JavaScript 特性[^4]。
#### 创建 HelloWorld 组件实例化 Viewer 对象
最后,在视图层面上实现基本的地图展示效果也很重要。这里给出一个简单的例子供参考——即新建名为 HellowWorld.vue 的单文件组件,内部加载地图容器并通过挂载生命周期钩子函数初始化 Cesium 实例对象。
```html
<template>
<div id="cesiumContainer"></div>
</template>
<script setup>
import { onMounted } from 'vue';
import * as Cesium from '../cesium_source';
let viewer;
onMounted(() => {
viewer = new Cesium.Viewer('cesiumContainer');
});
</script>
<style scoped>
html,
body,
#app,
#cesiumContainer {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
</style>
```
这段脚手架式的模板结构展示了如何利用 Vue Composition API 构建交互界面的同时引入外部地理信息系统库资源[^3]。
---
阅读全文
相关推荐


















