CesiumJS 快速入门指南

2026-01-16 09:47:43作者：滕妙奇

项目地址：https://gitcode.com/gh_mirrors/ces/cesium

1. 项目目录结构及介绍

CesiumJS 的目录结构如下：

cesium/
├──Build/               # 构建输出目录，包括Cesium库的minified版本和其他资源
├──Documentation/       # 文档相关的源代码和构建输出
├──Source/              # 源码目录，包含了Cesium的主要JavaScript文件
│   ├──Core/            # 核心组件
│   ├──Widgets/         # UI小部件
│   └──...               # 其他子目录，如ThirdParty（第三方库）等
├──Sandcastle/          # 在线示例和沙箱环境
└──Tools/               # 构建工具和脚本
└──package.json         # npm包配置文件
└──README.md            # 项目说明文件

Build/: 包含编译后的Cesium库，用于生产环境。
Documentation/: 文档的源代码和生成的HTML文档。
Source/: 存放所有源代码的地方，包括核心功能和UI组件。
Sandcastle/: 提供一个在线编辑器和演示平台，方便测试和学习Cesium功能。
Tools/: 用于构建、测试和发布的辅助脚本。

2. 项目的启动文件介绍

Cesium 是一个JavaScript库，没有传统的“启动文件”。不过，你可以通过在HTML中引入Build/Cesium.js或者使用现代打包工具（如Webpack或Rollup）来导入cesium/Source/Cesium.js。

以下是一个基本的HTML页面示例，用于引入Cesium库：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <title>我的第一个Cesium应用</title>
    <script src="path/to/Cesium/Cesium.js"></script>
    <style>
        #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="cesiumContainer"></div>
    <script>
        var viewer = new Cesium.Viewer('cesiumContainer');
    </script>
</body>
</html>

这里创建了一个名为viewer的新实例，将Cesium视图渲染到ID为cesiumContainer的元素中。

3. 项目的配置文件介绍

CesiumJS 并不依赖一个全局的配置文件，但你可以在你的应用程序中自定义设置以影响其行为。例如，可以通过传递配置对象给Viewer构造函数来改变默认设置：

var viewer = new Cesium.Viewer('cesiumContainer', {
    terrainProvider: Cesium.createWorldTerrain(), // 使用全球地形
    baseLayerPicker: false, // 禁止基图选择器
    homeButton: true // 显示回家按钮
});