点击查看：最新Cesium可视化系统实战视频课程
Cesium 是一个强大的开源 JavaScript 库，用于可视化 3D 地球及其他空间数据。它支持多种数据格式，其中 CZML 和 3D Tiles 是最常用的两种格式。在本篇文章中，我们将讨论如何使用 CZML 文件来加载 3D Tiles 数据。
1. 了解 CZML 和 3D Tiles 格式
- CZML 是一种 JSON 格式，用于描述时间动态的空间数据。CZML 可以表示位置、时间序列数据、形状和其他类型的地理信息。它的设计目的是为动态数据的可视化提供高效的支持，尤其是在需要展示随时间变化的数据时。
- 3D Tiles 是 Cesium 提供的一种数据格式，主要用于存储大规模的 3D 建模数据。它常用于表示城市建模数据、点云数据等。3D Tiles 通过瓦片化技术，使得在浏览器中加载和显示大规模 3D 数据变得更加高效。
在 Cesium 中，CZML 文件和 3D Tiles 数据可以结合使用，允许用户加载和可视化城市模型等大规模 3D 数据，并提供动态的交互体验。
2. 如何使用 CZML 加载 3D Tiles
下面，我们将通过一个简单的代码示例，演示如何在 Cesium 中加载 3D Tiles 数据，特别是如何通过 CZML 来完成这一过程。
2.1 基本的 CZML 文件结构
CZML 文件是一个 JSON 格式的数组，其中每个对象表示一个数据元素。每个对象通常包括 id 和一些其他属性，例如模型、位置、时间等。对于加载 3D Tiles 数据，主要需要定义一个包含 tileset 的对象。
[
{
"id": "document",
"version": "1.0"
},
{
"id": "BatchedColors",
"name": "BatchedColors",
"tileset": {
"uri": "./SampleData/city_tiles/tileset.json"
}
}
]
在上面的 CZML 示例中：
- 第一个对象是
document，定义了 CZML 文件的基本版本信息。 - 第二个对象表示一个 3D Tiles 数据集，使用
tileset来引用包含 3D Tiles 数据的 JSON 文件（tileset.json）。其中uri是指向 3D Tiles 数据集的相对路径。
2.2 加载 CZML 数据到 Cesium Viewer 中
在 Cesium 中，我们可以使用 CzmlDataSource 来加载 CZML 文件。通过调用 Cesium.CzmlDataSource.load() 方法，Cesium 会解析 CZML 文件并将其中的空间数据呈现出来。
以下是一个代码示例，展示了如何加载 CZML 文件并将其添加到 Cesium Viewer 中：
const czml = [
{
id: "document",
version: "1.0",
},
{
id: "BatchedColors",
name: "BatchedColors",
tileset: {
uri: "./SampleData/city_tiles/tileset.json",
},
},
];
const dataSourcePromise = viewer.dataSources.add(
Cesium.CzmlDataSource.load(czml)
);
dataSourcePromise.then(function(){
viewer.zoomTo(dataSourcePromise);
});
- 步骤 1: 定义 CZML 数据。首先，我们创建一个包含 3D Tiles 数据集（通过
tileset和uri引用）和文档信息（document）的 CZML 数据。 - 步骤 2: 将 CZML 数据加载到 Cesium Viewer 中。我们使用
viewer.dataSources.add()方法，将CzmlDataSource.load(czml)返回的 promise 添加到 Viewer 中。CzmlDataSource.load()会处理这个 CZML 数据并将其转换为可视化对象。 - 步骤 3: 当数据加载完成后，通过
.then()方法，我们可以调用viewer.zoomTo(dataSourcePromise)来让 Viewer 自动缩放并聚焦到加载的数据源上，确保用户能够看到加载的 3D Tiles 数据。
3. 进一步扩展与应用
3.1 加载多个 3D Tiles 数据集
在实际应用中，您可能会需要加载多个 3D Tiles 数据集。为了实现这一点，您只需要在 CZML 文件中添加多个 tileset 对象即可。例如：
[
{
"id": "document",
"version": "1.0"
},
{
"id": "BatchedColors1",
"name": "BatchedColors1",
"tileset": {
"uri": "./SampleData/city_tiles/tileset1.json"
}
},
{
"id": "BatchedColors2",
"name": "BatchedColors2",
"tileset": {
"uri": "./SampleData/city_tiles/tileset2.json"
}
}
]
您可以像之前一样加载这个新的 CZML 文件，只要确保每个数据源的 id 唯一即可。Cesium 会自动处理多个数据集的加载与显示。
3.2 控制 3D Tiles 的可见性
在 Cesium 中，您还可以通过代码动态控制 3D Tiles 数据集的可见性。例如，您可以控制每个 3D Tiles 数据集在加载后是否可见。
const dataSourcePromise = viewer.dataSources.add(
Cesium.CzmlDataSource.load(czml)
);
dataSourcePromise.then(function(dataSource) {
const batchTable = dataSource.entities.getById("BatchedColors").tileset;
batchTable.show = false; // 设置为不可见
});这段代码将在数据加载完成后将名为 “BatchedColors” 的 3D Tiles 数据集的可见性设置为 false，使其不在视图中显示。
3.3 使用 CZML 与时间动态交互
由于 CZML 文件支持时间数据，您可以在加载 3D Tiles 时为其添加时间动态效果。例如，您可以将 3D Tiles 数据集的属性与时间轴关联，让其随着时间的推移展示不同的内容。
{
"id": "BatchedColors",
"name": "BatchedColors",
"tileset": {
"uri": "./SampleData/city_tiles/tileset.json",
"minimumScreenSpaceError": 2
},
"availability": {
"start": "2023-01-01T00:00:00Z",
"stop": "2023-12-31T23:59:59Z"
}
}
上面的例子展示了如何为 3D Tiles 数据集设置一个时间区间（availability），使得数据集仅在特定的时间范围内可见。
4. 总结
通过结合使用 CZML 文件和 3D Tiles 数据，Cesium 为大规模 3D 数据的加载和可视化提供了强大的支持。CZML 提供了一种便捷的方式来描述和动态展示空间数据，而 3D Tiles 允许您高效地处理复杂的城市模型、点云等数据。利用 Cesium 提供的 API，您可以轻松加载和控制这些数据集，以便构建更加丰富和互动的 3D 可视化应用。
希望本文的示例和讲解能够帮助您更好地理解如何在 Cesium 中使用 CZML 加载和管理 3D Tiles 数据！
