【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的样式可以让您定义数据集中的要素应如何显示的规则，例如建筑物的颜色或显示的建筑物类型。这有助于识别城市中的模式或常见信息更丰富的可视化。

样式是使用json和javascipt表达式定义的。此外，样式语言还提供了一组内置函数来支持常见的数学运算，例如最小值、距离和对数等。

本教程包含3D Tiles样式语言的这些常用部分的示例：

• 样式选项和
• 条件测试，包含要素、和点云中点的
• 使用定义创建
• 距离函数
• 创建新的颜色定义

有关 3D 切片样式和过滤的详细文档，请参阅 3D Tiles Styling Specification。 Sandcastle 中还提供了更多示例（搜索"styling"）。

我们可以通过两种常见方法将样式应用于3D tileset：通过 show 和 color 属性，一旦我们确定了样式规则是什么，我们就可以通过将 3D tileset 的 style 成员变量设置为新的 Cesium3DTileStyle 将其应用到我们的功能中。

我们可以通过单击某个要素来查看要素的属性列表：

除了着色之外，3D Tiles样式语言还允许您根据元数据属性显示和隐藏要素。 以下是 Cesium OSM Buildings 切片集中的墨尔本所有建筑物。

假设我们想要查找墨尔本的所有住宅楼(residential buildings)，这些住宅楼在OSM建筑中使用建筑属性分类为"residential"和"apartment".

您还可以使用条件来确定为要素分配什么颜色。

例如，您可能想为墨尔本皇冠娱乐中心周围区域的游客设计一条巴士路线。距综合体一定距离内有哪些建筑物？

此代码段根据每个建筑物与皇冠娱乐中心的距离为其分配颜色：

• 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建筑与皇冠娱乐中心的距离为其着色的方式。

假设您想要可视化加拿大蒙特利尔生物圈博物馆周围的环境。样式规则是，如果点的分类属性是植被，则将点着色为绿色。

应用样式规则后，我们可以直观地看到博物馆周围有多少植被：

有时建筑物会缺少属性。在这种情况下，我们可以添加一个空检查器条件：

到这里本教程就结束啦

源码可从_GitHub - cesiumjs教程的vue3版本_下载