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
根据你的系统版本 选择下载对应版本的nodejs
下载完成后。安装完成后，在你的开发工具里面 输入 node -v 查看 出现版本号码 就说明安装成功了。如下：
接下来 我们下载 cesiumjs
下载地址 https://cesium.com/platform/cesiumjs/
使用npm 下载 和 直径点击 下载按钮 都可以下载
直接点击下载按钮，会跳转到如下页面
再直接点击下载按钮 会调转到 github下载地址，国内访问 很可能是这样，访问不通，这样建议多刷新几遍页面，会下载下来
下载后解压缩文件夹里面的长这样
打开Build 文件夹 将里面的Cesium 文件夹 复制到 我们的项目里
我的项目结构如下：将Cesium 放到 public 文件里面
index.html 页面里修改如下：将css，js代码引入到项目里
html
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
//引用cesium的css
<link rel="stylesheet" href="Cesium/Widgets/widgets.css" />
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong
>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without
JavaScript enabled. Please enable it to continue.</strong
>
</noscript>
<div id="app"></div>
</body>
//引用cesium的js
<script type="text/javascript" src="Cesium/Cesium.js"></script>
</html>在html 的body 里面
html
<div id="cesiumContainer"></div>在页面的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 ，放一张截图：
