当前位置：首页 > article >正文

Cesium系列：从入门到实践，打造属于你的3D地球应用

article 2026/2/12 22:57:58

一、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. --><metaname="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,});// 隐藏logoviewer._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;}