【CesiumJS 入门】3D Tiles的样式和筛选

最新推荐文章于 2025-05-24 20:49:14 发布

原创最新推荐文章于 2025-05-24 20:49:14 发布 · 1.3k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#3d

Cesium 专栏收录该内容

2 篇文章

订阅专栏

【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')"],
    ],
    },
});