2022-04-26

cesiumjs-3d-tiles-styling

磁贴的样式语言

3D 切片样式语言允许您定义数据集中要素的显示方式的规则，例如建筑物的颜色或显示的建筑物类型。这有助于识别城市中的模式或创建信息更丰富的可视化。

样式是使用 JSON 和 JavaScript 表达式定义的。此外，样式语言还提供了一组支持常见数学运算的样式，例如、和。built-in functions ``min``distance``log

本指南包括 3D 磁贴样式语言的以下常用部分的示例：

样式选项和show``color
测试包括特征属性测试、空检查和点云中点的检查conditions``Classification
创建新变量defines
功能distance
创建新的颜色定义

什么是 3d 磁贴功能？

要素可以是单个建筑物、门、窗、阀门或点云中的点等要素。

应用基本样式

有两种常见的方法可以将样式应用于 3D 切片集：通过和颜色视觉属性。确定样式规则后，可以通过将 3D 切片集的成员变量设置为新的show ``style``Cesium3DTileStyle.

对于下面的代码片段，我们使用澳大利亚墨尔本的Cesium OSM建筑3D Tiles和Crown Entertainment Complex。规则是将名为“皇冠娱乐中心”的建筑物涂成红色，将所有其他建筑物涂成白色。CesiumJS将有效地将此规则应用于每个功能，替换该功能上的任何现有样式。我们选择的特征属性是，它已存在于数据集中。name

osmBuildingsTileset.style = new Cesium.Cesium3DTileStyle({
  color: {
    conditions: [
      ["${name} === 'Crown Entertainment Complex'", "color('red')"],
      ["true", "color('white')"],
    ],
  },
});

在沙堡开业

我们可以通过单击查看器中的功能来查看功能属性列表：

3D 磁贴样式名称属性

基于属性显示要素

除了着色之外，3D 磁贴样式语言还允许您根据要素的元数据属性显示和隐藏要素。

以下是墨尔本的所有建筑物，来自CesiumOSM建筑瓷砖集。

3D 磁贴样式显示所有建筑物

墨尔本之前只展示住宅楼。

假设我们想找到墨尔本的所有住宅楼，这些住宅楼在OSM建筑中被归类为“住宅”或“公寓”。building

1
2
3

osmBuildingsTileset.style = new Cesium.Cesium3DTileStyle({
  show: "${feature['building']} === 'residential' || ${feature['building']} === 'apartments'",
});

OPEN IN SANDCASTLE

3D Tiles styling showOnlyResidentialBuildings

墨尔本仅显示住宅楼。

颜色特征使用条件

您还可以使用条件来确定要为要素指定的颜色。

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

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

osmBuildingsTileset.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 磁贴样式允许您定义阵列中的要素。conditions``color
条件的行为类似于 if 语句。
定义
表达式将创建新变量。
定义defines
distance是 3D 磁贴样式语言的一种。built-in function
支持 CSS 样式的颜色定义。
定义

上面的代码段生成以下样式结果：

3D 磁贴样式 osmBuildingColorByDistance

设置点云的样式

点云是遵循上述相同样式规则的点的集合，具有一些附加选项。

点云样式选项和属性

除了视觉属性之外，点云图块还支持。默认值为 1.0。color``show``pointSize``pointSize

在铯离子上平铺的 LAS 文件中的点云包括两个每点属性：和。Classification``Intensity

Classification是指向点的数据类型（如地面、低植被或建筑物）的整数映射。
Intensity 是点表面的反射率，即介于 0 和 255 之间的整数（包括 0 和 255）。

点云样式还可以应用于其他点属性，如位置、颜色和法线。例如，您可以使用元数据属性根据点云切片与中心点的距离创建点云切片的热图，类似于我们根据 OSM 建筑物与皇冠娱乐综合体的距离对 OSM 建筑物进行着色的方式（请参阅热图沙堡）。POSITION_ABSOLUTE

点云样式示例

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

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

在沙堡开业

应用样式规则后，我们可以想象博物馆周围环境中有多少是植被：

3D 瓷砖造型生物博物馆蒙特利尔PointCloud分类

处理未定义的属性

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

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

在此示例中，如果任何建筑物不具备材质元数据属性，则其颜色为白色。

在Cesium story中使用样式编辑器

您还可以使用 Cesium story中的样式编辑器设置 3D 磁贴的样式。我们上面介绍的相同样式方法可以在编辑器中应用，而无需编写代码。

3D 磁贴样式 ionStyleEditor