点击查看:最新Cesium可视化系统实战视频课程
Cesium 是一个强大的开源地理信息系统 (GIS) 框架,广泛应用于三维地图可视化、地理数据的展示与分析等领域。在 Cesium 中,CZML(Cesium Language)是一个用于表示时间动态地理数据的标准格式,常用于传输和展示复杂的三维对象、动画和路径。本文将深入讲解 CZML 的应用及其在 Cesium 中的实际操作,帮助读者更好地理解如何在项目中使用 CZML 来实现动态和交互式的三维地理数据可视化。
1. CZML 介绍
CZML 是一种基于 JSON 格式的标记语言,用于在 Cesium 中描述时间序列的空间数据。它支持对地理对象、模型、路径等进行时间动态的描述。CZML 的核心目的是在 Cesium 中高效地加载和呈现动态数据。
一个典型的 CZML 文件包括多个对象,每个对象可以包含关于位置、方向、尺寸、材质、时间变化等信息。通过对这些对象进行描述,开发者能够创建如飞行路径、物体动画、动态天气等复杂场景。
CZML 文件的基本结构
一个 CZML 文件是由多个对象组成的,每个对象都有唯一的 id
,并包含一个或多个属性,常见的属性有:
id
:对象的唯一标识符。name
:对象的名称。position
:物体的地理位置。box
、model
、path
等:对象的几何形态与外观。
每个对象也可以根据时间变化进行更新,这使得 CZML 文件在展示动态数据时具有很大的灵活性。
2. 示例代码解析
让我们以以下的代码为例,详细讲解如何使用 CZML 在 Cesium 中加载多个动态地理对象。
const czml = [
{
id: "document",
name: "box",
version: "1.0",
},
{
id: "shape1",
name: "Blue box",
position: {
cartographicDegrees: [-114.0, 40.0, 300000.0],
},
box: {
dimensions: {
cartesian: [400000.0, 300000.0, 500000.0],
},
material: {
solidColor: {
color: {
rgba: [0, 0, 255, 255],
},
},
},
},
},
{
id: "shape2",
name: "Red box with black outline",
position: {
cartographicDegrees: [-107.0, 40.0, 300000.0],
},
box: {
dimensions: {
cartesian: [400000.0, 300000.0, 500000.0],
},
material: {
solidColor: {
color: {
rgba: [255, 0, 0, 128],
},
},
},
outline: true,
outlineColor: {
rgba: [0, 0, 0, 255],
},
},
},
{
id: "shape3",
name: "Yellow box outline",
position: {
cartographicDegrees: [-100.0, 40.0, 300000.0],
},
box: {
dimensions: {
cartesian: [400000.0, 300000.0, 500000.0],
},
fill: false,
outline: true,
outlineColor: {
rgba: [255, 255, 0, 255],
},
},
},
];
const dataSource = Cesium.CzmlDataSource.load(czml);
viewer.dataSources.add(dataSource);
viewer.zoomTo(dataSource);
2.1 CZML 数据结构
这段代码定义了一个 CZML 数组,包含了三个不同的物体(shape1
、shape2
和 shape3
),每个物体具有不同的外观和属性。下面是这些物体的基本特性解析:
2.1.1 shape1
– 蓝色的盒子
{
"id": "shape1",
"name": "Blue box",
"position": {
"cartographicDegrees": [-114.0, 40.0, 300000.0]
},
"box": {
"dimensions": {
"cartesian": [400000.0, 300000.0, 500000.0]
},
"material": {
"solidColor": {
"color": {
"rgba": [0, 0, 255, 255]
}
}
}
}
}
- 位置:
shape1
物体的位置通过cartographicDegrees
属性定义,其值是[经度, 纬度, 高度]
,即 [-114.0, 40.0, 300000.0]。 - 尺寸:盒子的尺寸是通过
cartesian
定义的,表示盒子在三维空间中的长、宽、高分别为 400000, 300000 和 500000。 - 材质:
shape1
物体的颜色是蓝色,通过rgba
属性指定其颜色为纯蓝色。
2.1.2 shape2
– 红色盒子,带黑色轮廓
{
"id": "shape2",
"name": "Red box with black outline",
"position": {
"cartographicDegrees": [-107.0, 40.0, 300000.0]
},
"box": {
"dimensions": {
"cartesian": [400000.0, 300000.0, 500000.0]
},
"material": {
"solidColor": {
"color": {
"rgba": [255, 0, 0, 128]
}
}
},
"outline": true,
"outlineColor": {
"rgba": [0, 0, 0, 255]
}
}
}
- 颜色:该盒子的填充颜色是半透明的红色,通过
rgba
颜色值[255, 0, 0, 128]
。 - 轮廓:通过
outline
设置为true
,表示盒子有轮廓。轮廓的颜色通过outlineColor
设置为黑色[0, 0, 0, 255]
。
2.1.3 shape3
– 只有轮廓的黄色盒子
{
"id": "shape3",
"name": "Yellow box outline",
"position": {
"cartographicDegrees": [-100.0, 40.0, 300000.0]
},
"box": {
"dimensions": {
"cartesian": [400000.0, 300000.0, 500000.0]
},
"fill": false,
"outline": true,
"outlineColor": {
"rgba": [255, 255, 0, 255]
}
}
}
- 颜色:这个盒子没有填充(
fill: false
),仅有黄色的轮廓。轮廓颜色是纯黄色[255, 255, 0, 255]
。
2.2 加载和显示 CZML
const dataSource = Cesium.CzmlDataSource.load(czml);
viewer.dataSources.add(dataSource);
viewer.zoomTo(dataSource);
Cesium.CzmlDataSource.load(czml)
:加载包含在czml
变量中的 CZML 数据。viewer.dataSources.add(dataSource)
:将加载的数据源添加到 Cesium 的viewer
中,显示在地图上。viewer.zoomTo(dataSource)
:将视角缩放至包含数据源的区域,确保用户可以看到所有加载的物体。
3. CZML 的应用场景
CZML 格式非常适合展示需要动态变化的三维地理对象,如以下几种场景:
3.1 动态路径与轨迹展示
使用 CZML,可以展示飞机、车辆等移动物体的轨迹。例如,飞机的飞行路径可以通过动态位置数据来描述,从而实现航迹线的实时展示。
3.2 动态地理对象展示
对于一些需要在地理空间中动态展示的对象,如地震、风速、气候数据等,CZML 能够通过时间戳来描述这些对象随时间变化的状态。
3.3 时序动画效果
CZML 支持将时间属性与物体属性关联,开发者可以实现物体的动态变换。例如,物体的大小、颜色、材质等可以根据时间变化动态调整,适用于模拟天气变化、爆炸效果等复杂场景。