【CesiumJS 入门】系列是将CesiumJS官网教程文章翻译为中文,同时对文章进行了一定的补充,并且提供Vue3版本的代码GitHub - cesiumjs教程的vue3版本 。希望这个系列可以帮助你更好的学习cesium。
本教程解释了如何使用CesiumJS来设计和过滤3D Tiles以突出显示数据集的重要特征。
前提
-
具有
属性或分类
的3D Tileset. 你可以上传你自己数据或使用Cesium精选的3D Tileset,例如OSM建筑物或蒙特利尔点云,这些可以在Cesium ion Asset Depot中找到。要将您的数据集转换为3D Tiles,请查看我们数据导入快速指南。 -
关于CesiumJS的基础知识,对于初学者,请访问快速入门教程
-
一个Cesium ion账号
3D Tiles的样式语言
3D Tiles的样式可以让您定义数据集中的要素应如何显示的规则,例如建筑物的颜色或显示的建筑物类型。这有助于识别城市中的模式或常见信息更丰富的可视化。
样式是使用json和javascipt表达式定义的。此外,样式语言还提供了一组内置函数来支持常见的数学运算,例如最小值、距离和对数等。
本教程包含3D Tiles样式语言的这些常用部分的示例:
- 样式选项
show
和color
- 条件测试,包含要素
属性测试
、空值检查
和点云中点的分类检查
- 使用定义创建
新变量
- 距离函数
- 创建新的颜色定义
有关 3D 切片样式和过滤的详细文档,请参阅 3D Tiles Styling Specification。
Sandcastle 中还提供了更多示例(搜索"styling")。
使用基础样式
我们可以通过两种常见方法将样式应用于3D tileset:通过 show 和 color 属性,一旦我们确定了样式规则是什么,我们就可以通过将 3D tileset 的 style 成员变量设置为新的 Cesium3DTileStyle 将其应用到我们的功能中。
buildingsTileset.style = new Cesium.Cesium3DTileStyle({
color: {
conditions: [
["${name} === 'Crown Entertainment Complex'", "color('red')"],
["true", "color('white')"]
]
}
})
我们可以通过单击某个要素来查看要素的属性列表:
通过一个属性来显示要素
除了着色之外,3D Tiles样式语言还允许您根据元数据属性显示和隐藏要素。
以下是 Cesium OSM Buildings 切片集中的墨尔本所有建筑物。
假设我们想要查找墨尔本的所有住宅楼(residential buildings),这些住宅楼在OSM建筑中使用建筑属性分类为"residential"和"apartment".
buildingsTileset.style = new Cesium.Cesium3DTileStyle({
show: "${feature['building']} === 'residential' || ${feature['building']} === 'apartments'",
});
使用条件着色要素
您还可以使用条件来确定为要素分配什么颜色。
例如,您可能想为墨尔本皇冠娱乐中心周围区域的游客设计一条巴士路线。距综合体一定距离内有哪些建筑物?
此代码段根据每个建筑物与皇冠娱乐中心的距离为其分配颜色:
buildingsTileset.style = new Cesium.Cesium3DTileStyle({
defines: {
distanceFromComplex:
"distance(vec2(${feature['cesium#longitude']}, ${feature['cesium#latitude']}), vec2(144.96007, -37.82249))",
},
color: {
conditions: [
["${distanceFromComplex} > 0.010", "color('#d65c5c')"],
["${distanceFromComplex} > 0.006", "color('#f58971')"],
["${distanceFromComplex} > 0.002", "color('#f5af71')"],
["${distanceFromComplex} > 0.0001", "color('#f5ec71')"],
["true", "color('#ffffff')"],
],
},
});
- 3D Tiles 样式条件可让您在一个数组中定义要素的颜色。
- 条件的行为类似于 if 语句
- 定义表达式(defines expression)创建新变量
- 距离(distance)是 3D Tiles 样式语言的内置函数。
- 支持 CSS 样式的颜色定义。
上面的代码片段产生以下样式结果:
点云样式
点云是遵循上述相同样式规则的点的集合,并具有一些附加选项。
点云样式选项和属性
除了 color 和 show 属性之外,点云图块还支持 pointSize。默认 pointSize 为 1.0。在Ceisum ion的 LAS 文件中的点云包括两个每点属性:分类(Classification)和强度(Intensity)。
点云样式也可以应用于其他属性,例如位置 position 、颜色 color 和法线 normal。例如,您可以使用POSIION_ABSOLUTE元数据属性根据点云图块与中心点的距离创建点云图片的热图,类似于我们根据OSM建筑与皇冠娱乐中心的距离为其着色的方式。
pointCloudTileset.style = new Cesium.Cesium3DTileStyle({
color: {
conditions: [
["${Classification} === 2", "color('brown')"], // ground
["${Classification} === 3", "color('greenyellow')"], // low vegetation
["${Classification} === 4", "color('green')"], // medium vegetation
["${Classification} === 5", "color('darkgreen')"], // high vegetation
["true", "color('white')"]
]
}
});
点云样式例子
假设您想要可视化加拿大蒙特利尔生物圈博物馆周围的环境。样式规则是,如果点的分类属性是植被,则将点着色为绿色。
应用样式规则后,我们可以直观地看到博物馆周围有多少植被:
处理未定义的属性
有时建筑物会缺少属性。在这种情况下,我们可以添加一个空检查器条件:
buildingsTileset.style = new Cesium.Cesium3DTileStyle({
color: {
conditions: [
["${material} === null", "color('white')"],
["${material} === 'glass'", "color('skyblue', 0.5)"],
["${material} === 'concrete'", "color('grey')"],
["${material} === 'brick'", "color('indianred')"],
["true", "color('white')"],
],
},
});
到这里本教程就结束啦
源码可从_GitHub - cesiumjs教程的vue3版本_下载
如果文章对你有帮助,希望可以收获你的点赞收藏加关注,我会持续带来更多有价值的内容!