当前位置：首页 > article >正文

【Cesium学习（十）】Cesium 中对 3D 瓦片集进行样式化（Cesium3DTileStyle）

article 2025/2/22 1:05:37

前言

前面我们学习到了如何在Cesium中如何获得每一个构件实体对象的信息，获取到信息我们就可以实现不同的信息来展示不用的样式，接下来我们一起学习一下。

技术方案

在Cesium中有一个API：Cesium3DTileStyle，是一种用于在 Cesium 中对 3D 瓦片集进行样式化的工具。它允许开发者根据瓦片的属性来定义显示样式，例如颜色和透明度。样式是通过 JSON 格式定义的，并且可以包含条件和表达式来动态调整样式。API传送门
在这里插入图片描述

样式功能

Cesium3DTileStyle 主要通过 show 和 color 属性来控制瓦片的显示和颜色。例如，以下 JSON 定义了一个简单的样式，所有瓦片都显示为白色：

{
	"show": "true",
	"color": "color('#ffffff')"
}

可以根据瓦片的属性来定义更复杂的样式。例如，以下样式根据建筑物的高度来设置颜色，在这个例子中，高度小于 60 的建筑物显示为深蓝色，高度在 60 到 120 之间的建筑物显示为浅蓝色，其他建筑物显示为半透明的白色。

{
	"show": "${Area} > 0",
	"color": {
	"conditions": [
		["${Height} < 60", "color('#13293D')"],
		["${Height} < 120", "color('#1B98E0')"],
		["true", "color('#E8F1F2', 0.5)"]
	]
	}
}

实现案例

当我们加载这个的3D Tilest 模型中，想要不同的工程构件展示不一样的颜色，这里就可以实现一下！
在这里插入图片描述

代码实现

一、首先加载3DTilest模型

//> 设置一个变量来存放通过3DTiles创建的模型
let tileset;
try {
  tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({url: 'https://dtwin.plyh.gx.cn:10032/BIM/模型/桥梁工程/设计一标/动物通道大桥/tileset.json'}));
  viewer.scene.globe.depthTestAgainstTerrain = true;
  tileset.readyPromise.then(function (tileset) {
    viewer.zoomTo(tileset);
  });
} catch (error) {
  console.log(`Error loading tileset: ${error}`);
}

二、查看3D Tilest模型实体对象的所有属性

在这里插入图片描述

三、通过不同的工程名称来显示不同的样式

这里我们就已不同的分项工程名称来展示不用的样式，我们在加载模型的代码里，到加载完成瓦片的回调方法里面获取到tileset对象，进行样式化。

tileset.style = new Cesium.Cesium3DTileStyle({
  color: {
    conditions: [
      ["${分项工程} === '立柱'", "color('#004FFF', 0.5)"],
      ["${分项工程} === '小箱梁预制'", "color('#33BB66', 0.5)"],
      ["${分项工程} === '混凝土护栏'", "color('#FFAA22', 0.5)"],
    ],
  },
});