CesiumJS 是一个主要用于三维地球和地图可视化的 JavaScript 库。它可以支持海量的三维模型数据，也就是说，我们可以根据自己的需要，选择展示地球的某一部分内容，并以三维的方式更直观、更快速地进行展示。
Cesium 可以跨平台、跨浏览器运行，而且无需安装任何插件，使用起来非常方便。
它的核心优势在于强大的地理数据可视化能力，因此与数字孪生技术密切相关。同时，Cesium 还提供了丰富的工具，帮助我们快速实现地理数据的可视化展示。
此外，Cesium 还可以与 Three.js 结合使用。例如，当我们需要展示一个三维地球时，可以用 Cesium 来进行渲染；而当我们需要更精细、更逼真的三维模型和细节时，可以结合 Three.js 来实现。
所以，接下来我们就来看一下 Cesium 是如何使用的，这也是我们本节课的重点内容。
首先，我们需要下载 CesiumJS。登录官网后，我们可以通过 NPM 安装，也可以直接下载官方提供的安装包。这里我已经提前下载好了。
下载完成后，Cesium 的压缩包大概就是这么大。我们可以在本地新建一个文件夹，把压缩包放进去并解压。当前版本是 1.93。
解压后，我们进入目录，使用 Yarn 安装依赖，也就是安装 Node Modules 中的相关依赖包。安装完成后，我们可以执行 yarn start 命令，启动 Cesium 自带的本地服务器。
启动后，我们就可以在本地访问官方文档和案例了。比如，本地会自动启动 Documentation 文档页面。这样，即使网络不好或无法翻墙，我们也可以离线查阅文档。
更重要的是，Cesium 提供了丰富的案例，尤其是 Sandcastle（沙盒）工具。在沙盒中，我们可以直接查看代码和效果，通过代码与可视化内容的结合，快速学习和理解如何实现三维地球的展示。
接下来，我们就用 Vue3 来创建一个最简单的项目，运行我们的第一个 Cesium 示例。
首先，我们使用 Vue CLI 创建一个 Vue3 项目，命令是：
vue create cesium-base
项目创建完成后，我们进入项目目录，安装 Cesium：
yarn add cesium
安装完成后，我们就可以开始编写代码了。
打开 App.vue 文件，把默认内容清空。我们需要创建一个用于显示三维地球的容器，给它设置一个 ID，比如叫 cesiumContainer。
在 Vue3 中，我们可以使用 setup 语法糖来编写逻辑。我们可以通过 ref 获取这个容器的 DOM 对象，也可以直接使用 ID 获取。
接下来，我们需要导入 Cesium 库和它自带的 CSS 样式文件。Cesium 的样式文件位于 node_modules/cesium/Build/Cesium/Widgets/widgets.css，我们需要把它引入项目。
此外，Cesium 还需要一些静态资源文件，比如图片、字体等，这些资源位于 node_modules/cesium/Build/Cesium/ 目录下的四个文件夹中。
我们需要把这四个文件夹复制到项目的 public 目录下，否则运行时会出现资源缺失的问题。
复制完成后，我们还需要设置一个全局变量，告诉 Cesium 静态资源的路径：
window.CESIUM_BASE_URL = '/';这是一个固定的写法，必须是大写的 CESIUM_BASE_URL，路径设置为根目录。
然后，我们在 onMounted 生命周期钩子中初始化 Cesium，确保 DOM 已经挂载完成：
new Cesium.Viewer('cesiumContainer');这样，我们就完成了最基本的 Cesium 地球初始化。
完整代码如下：
<template>
<div id="cesiumContainer" ref="cesiumContainer"></div>
</template>
<script setup>
import * as Cesium from 'cesium';
import { onMounted } from 'vue';
import './Widgets/widgets.css';
window.CESIUM_BASE_URL = '/';
onMounted(() => {
Cesium.Ion.defaultAccessToken = 'your token';
new Cesium.Viewer('cesiumContainer');
});
</script>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
#cesiumContainer {
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>最后，我们启动项目：
yarn dev
浏览器中就会显示出我们的第一个三维地球了。
那么，这一节课我们就先上到这里。