一、Cesium简介
CesiumJS 是一个开源的 JavaScript 库，它能够帮助开发者创建出具有卓越性能、高精度、出色视觉质量和易用性的世界级 3D 地球仪和地图。无论是在航空航天领域，用于模拟飞行路径和展示卫星数据；还是在智能城市中，用于可视化城市规划和交通流量；亦或是无人机行业，用于展示飞行轨迹和地形数据，CesiumJS 都能大显身手。它在 Apache 2.0 许可下发布，这意味着无论是商业用途还是非商业用途，都可以免费使用。
二、Cesium本地环境搭建
（一）下载与解压
-
获取最新版本代码：访问 CesiumJS – Cesium，找到最新的 release 版本代码下载地址，点击下载。
-
解压文件：下载完成后，找到下载的压缩包文件，双击将其解压到一个合适的目录中，比如
C:\Cesium或者D:\Cesium等。 -
打开文件夹：使用 Visual Studio Code（VSCode）打开刚刚解压的目录。VSCode 是一个功能强大的代码编辑器，它支持多种编程语言，包括 JavaScript，而且有大量的插件可以扩展其功能，非常适合用于开发 Cesium 应用。
-
安装依赖资源：在 VSCode 的终端中，运行以下命令来安装所需的资源：
cnpm install这里使用的是
cnpm，它是 npm 的一个镜像版本，更适合国内用户，能够更快地下载依赖包。如果你还没有安装cnpm，可以通过运行npm install -g cnpm --registry=https://r.cnpmjs.org来安装。 -
本地运行：安装完成后，在终端中运行以下命令启动本地服务器：
cnpm start运行成功后，浏览器会自动打开一个页面，显示 Cesium 的欢迎界面。如果没有自动打开，你可以在浏览器中输入
http://localhost:8080来访问。
点击HelloWorld查看基础示例demo
代码分析：以下是 HelloWorld 示例的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Use correct character set. -->
<meta charset="utf-8" />
<!-- Tell IE to use the latest, best version. -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
/>
<title>Hello World!</title>
<!-- 引入Cesium.js， 该js定义了Cesium对象 -->
<script src="../Build/Cesium/Cesium.js"></script>
<style>
@import url(../Build/Cesium/Widgets/widgets.css);
html,
body,
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<!-- 定义cesium要渲染的元素 -->
<div id="cesiumContainer"></div>
<script>
// 执行创建cesium渲染
var viewer = new Cesium.Viewer('cesiumContainer');
</script>
</body>
</html>三.Cesium目录结构介绍
（一）根路径文件
-
CHANGES.md：记录了 Cesium 每个版本的变更内容，包括新增的功能、修复的错误以及改进的性能等。通过阅读这个文件，你可以快速了解不同版本之间的差异，帮助你在升级版本时做出决策。
-
gulpfile.cjs：这是一个构建工具配置文件，使用了 Gulp 工具。它定义了 Cesium 的打包流程，包括 GLSL 语法的转义、压缩和未压缩库文件的打包、API 文档的生成以及自动化单元测试等。如果你需要对 Cesium 的构建过程进行自定义，比如添加新的构建任务或者修改现有的任务，就需要编辑这个文件。
-
index.html：这是 Cesium 的 Web 导航首页。当你通过
cnpm start启动本地服务器后，浏览器会自动打开这个页面。它提供了一个入口点，让你可以方便地访问 Cesium 的各种示例代码和文档。 -
package.json：这是一个包的依赖管理文件，它包含了项目的基本信息，如包的名称、版本号、描述、官网 URL、作者等。更重要的是，它列出了项目所依赖的包，包括开发环境和生产环境依赖包列表。此外，它还定义了项目的主入口文件以及执行脚本，例如
cnpm start就是通过这个文件中的脚本定义来执行的。 -
README.md：这是项目的入门手册，它详细介绍了整个项目的使用方法、功能特点、安装步骤以及如何运行示例代码等。通过阅读这个文件，你可以快速了解 Cesium 的基本概念和开发流程。
-
server.cjs：这是 Cesium 内置的 Node 服务器文件。当你运行
npm run start或npm run startPublic命令时，实际上就是执行了这个文件中的代码。它负责启动一个本地服务器，让你可以在本地开发和测试 Cesium 应用。
（二）Apps文件夹
-
CesiumViewer：这是一个简单的 Cesium 初始化示例，它展示了如何创建一个基本的 Cesium 地球仪。通过阅读这个示例代码，你可以学习到 Cesium 的基本用法，比如如何设置地球仪的视角、如何添加数据等。
-
SampleData：这个文件夹包含了所有示例代码所用到的数据，包括 json、geoJson、topojson、kml、czml、gltf、3dtiles 以及图片等格式的数据。这些数据为示例代码提供了丰富的素材，帮助你更好地理解和学习 Cesium 的各种功能。
-
Sandcastle：这是 Cesium 的示例程序代码存储位置。Sandcastle 是一个在线的代码编辑器，它允许你直接在浏览器中编写和运行 Cesium 代码。这个文件夹中的代码就是 Sandcastle 中的示例代码。这些示例代码涵盖了 Cesium 的各种功能，从基础的地球仪创建到复杂的 3D 模型加载、动画效果实现等，非常值得深入研究。
-
TimelineDemo：这个文件夹包含了时间轴的示例代码。时间轴是 Cesium 中一个非常重要的功能，它允许你根据时间来展示数据的变化。通过这个示例代码，你可以学习到如何使用时间轴来控制数据的显示和隐藏，以及如何实现时间轴的自定义样式等。
（三）Build文件夹
-
Cesium：这个文件夹包含了打包之后的 Cesium 库文件（压缩版本）。在实际开发中，通常会使用这个压缩版本的文件，因为它可以减少文件大小，提高加载速度。
-
CesiumUnminified：这个文件夹包含了打包之后的 Cesium 库文件（未压缩版本）。虽然它的文件大小比压缩版本大，但它保留了代码的可读性，方便开发人员进行调试。当你在开发过程中遇到问题时，可以通过查看未压缩版本的代码来快速定位问题所在。
-
Documentation：这个文件夹包含了打包之后的 API 文档。API 文档是学习和使用 Cesium 的重要参考资料，它详细介绍了 Cesium 的各个类、方法、属性以及事件的使用方法和参数说明。通过阅读 API 文档，你可以深入了解 Cesium 的内部实现原理，从而更好地利用它来开发出强大的 3D 地理应用。
（四）Source文件夹
Source 文件夹是 Cesium 项目的重中之重，它包含了 Cesium 的所有源码。这个文件夹中的代码按照功能模块进行了组织，涵盖了从核心的 3D 渲染引擎到各种地理空间数据处理工具等各个方面。
四.Cesium界面组件显隐
4.1.通过js配置项控制（推荐）
var viewer = new Cesium.Viewer("cesiumContainer", {
animation: false, // 动画小组件
baseLayerPicker: false, // 底图组件，选择三维数字地球的底图（imagery and terrain）。
fullscreenButton: false, // 全屏组件
vrButton: false, // VR模式
geocoder: false, // 地理编码（搜索）组件
homeButton: false, // 首页，点击之后将视图跳转到默认视角
infoBox: false, // 信息框
sceneModePicker: false, // 场景模式，切换2D、3D 和 Columbus View (CV) 模式。
selectionIndicator: false, //是否显示选取指示器组件
timeline: false, // 时间轴
navigationHelpButton: false, // 帮助提示，如何操作数字地球。
// 如果最初应该看到导航说明，则为true；如果直到用户明确单击该按钮，则该提示不显示，否则为false。
navigationInstructionsInitiallyVisible: false,
});
// 隐藏logo
viewer._cesiumWidget._creditContainer.style.display = "none";
4.2.通过css样式隐藏控制
/* 通过CSS控制组件显隐及位置 */
.cesium-viewer-toolbar, /* 右上角按钮组 */
.cesium-viewer-animationContainer, /* 左下角动画控件 */
.cesium-viewer-timelineContainer, /* 时间线 */
.cesium-viewer-bottom /* logo信息 */ {
display: none !important;
}
.cesium-widget-credits /* 隐藏logo图片 */ {
display: none !important;
}
.cesium-viewer-fullscreenContainer /* 全屏按钮 */ {
display: none !important;
position: absolute;
top: 0;
}
