Cesium 是一个非常流行的开源 JavaScript 库，由 Cesium Systems 开发，用于在网页上创建三维地球和地图。它基于 WebGL 技术，可以显示全球范围内的地理空间数据。
首先 cesium怎么读？
ˈsiːziəm\] 读音类似：C z m/ cz母
#### 首先 Cesium是什么？
Cesium是国外一个基于JavaScript编写的使用WebGL的地图引擎。Cesium支持3D,2D,2.5D形式的地图展示，可以自行绘制图形，高亮区域，并提供良好的触摸支持，且支持绝大多数的浏览器和mobile。
它本来的样子长这样
这样。。
以及这样。。地图展开后
好了 那我们上面的例子 已经看完了 下面我们学习一下 怎么安装它 我们基于vue3 开发 还是本地开发都需要安装nodejs
[下载nodejs: https://nodejs.org/en/download](https://nodejs.org/en/download "下载nodejs: https://nodejs.org/en/download")
根据你的系统版本 选择下载对应版本的nodejs
下载完成后。安装完成后，在你的开发工具里面 输入 node -v 查看 出现版本号码 就说明安装成功了。如下：
接下来 我们下载 cesiumjs
[下载地址 https://cesium.com/platform/cesiumjs/](https://cesium.com/platform/cesiumjs/ "下载地址 https://cesium.com/platform/cesiumjs/")
使用npm 下载 和 直径点击 下载按钮 都可以下载
直接点击下载按钮，会跳转到如下页面
再直接点击下载按钮 会调转到 github下载地址，国内访问 很可能是这样，访问不通，这样建议多刷新几遍页面，会下载下来
下载后解压缩文件夹里面的长这样
打开Build 文件夹 将里面的Cesium 文件夹 复制到 我们的项目里
我的项目结构如下：将Cesium 放到 public 文件里面
index.html 页面里修改如下：将css，js代码引入到项目里
```html
//引用cesium的css
<%= htmlWebpackPlugin.options.title %>
//引用cesium的js
```
在html 的body 里面
```html
```
在页面的js 里面
```javascript
Cesium.Ion.defaultAccessToken =
'你申请的tokens'
// 初始化Cesium Viewer
const viewer = new Cesium.Viewer('cesiumContainer', {
})
```
tokens 的申请在cesium 网站 需要注册登录后 创建，个人和非商业项目是免费的\~\~
然后把token 复制替换
```javascript
Cesium.Ion.defaultAccessToken =
'eyJqdGkiOiI1ODQ5MDM2MS0xY2JmLTRhYmUtODYyZC1iNDViMzk2ZDdkZGUiLCJpZCI6MzczNjc0LCJpYXQiOjE3NjcwODE3NjV9.LuYkwE7AwGf01zlwLT9GOo2h5oERVIayz5F0nXwoxAU'
```
**注意我上面的token是假的 不能直接使用！！！！！一定要换成你自己申请的tokens.否则可能出现地图展示不出来，加载错误等等。**
然后运行dome 就出来啦
## 基于vue3框架下载使用下面的下载方式
vue3和tyjs 会强制校验类型引入对象等，要是用上面的方法引入到项目里，也能用，但是typejs 会提示有错误信息 例如 ：
所以我们要用
```javascript
npm install cesium
```
安装完上面的cesium后 还要安装下面的插件 否则 运行会报错
```javascript
npm install vite-plugin-cesium -D
```
安装完成后 修改tsconfig.ts 文件，注意注释的新增2条 一个improt cesium 一个在 plugins里面的 cesium()
```javascript
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import vueDevTools from 'vite-plugin-vue-devtools'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import cesium from 'vite-plugin-cesium' // 新增引入 cesium
// https://vite.dev/config/
export default defineConfig({
plugins: [
vue(),
vueJsx(),
vueDevTools(),
cesium(), // 新增
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
},
},
})
```
最后 在你需要 展示地球的页面顶部 引入
```javascript
import { Ion, Terrain, Viewer } from 'cesium'
import 'cesium/Build/Cesium/Widgets/widgets.css'
```
页面挂载后：
```javascript
onMounted(async () => {
Ion.defaultAccessToken =
'你的tokens'
// 初始化Cesium Viewer
const viewer = new Viewer('cesiumContainer', {
terrain: Terrain.fromWorldTerrain(),
})
})
```
**注意 一点要在页面挂在后 在创建实例，否则会报错，因为在页面挂在前，页面里面还不存在，id为cesiumContainer的 div 元素**
最后的最后 我们就完成第一个任务啦 下载安装运行 vue cesium ，放一张截图：
## 今天是2025年12月31日，25年的最后一天，祝大家26年新年快乐！