Cesium快速入门33：tile3d设置样式

二狗哈2025-12-28 12:41

这一节，我们给 3D Tiles 换皮肤------让一栋栋建筑按"类型、高度"自动变色，瞬间把灰白城市变成"彩虹都市"。全程只用官方样式语言，无需写着色器。

一、先看清"建筑长啥样"

打开 Cesium3DTilesInspector 面板，点击任意建筑，Info 里会弹出特征字段：

building = apartments / commercial / office
cesium#estimatedHeight = 68

这些字段就是"换皮肤"的判断依据。

二、统一染色：一句话全变黄

复制代码

const osmtile = Cesium.createOsmBuildings();
const osmBuildings = viewer.scene.primitives.add(osmtile);

/* 整片建筑统一刷成黄色 */
osmtile.style = new Cesium.Cesium3DTileStyle({
  show: true,
  color: "color('yellow')",
});

支持三种写法：

颜色名 "yellow"
十六进制 "#FFEB3B"
RGBA "rgba(255,255,0,0.5)"

三、按条件变色：公寓黄、高楼青、其余白

官方样式支持 conditions 数组，自上而下匹配，命中即停：

复制代码

osmtile.style = new Cesium.Cesium3DTileStyle({
  show: true,
  color: {
    conditions: [
      // 1. 公寓 = 黄色半透明
      ["${feature['building']} === 'apartments'", "rgba(255, 255, 0, 0.5)"],
      // 2. 估计高度 > 80 米 = 青色半透明
      ["${feature['cesium#estimatedHeight']} > 80", "rgba(2, 255, 255, 0.5)"],
      // 3. 默认 fallback = 白色半透明
      ["true", "rgba(255, 255, 255, 0.2)"],
    ],
  },
});

写规则时记住：

字段名用单引号包裹；
字符串比较用 ===；
最后一条必须是 ["true", ...] 作兜底。

四、常用判断字段速查

https://cesium.com/learn/cesiumjs/ref-doc/Cesium3DTileStyle.html?classFilter=3d

字段	含义	示例条件
`${feature['building']}`	建筑类型	`=== 'apartments'`
`${feature['cesium#estimatedHeight']}`	估算高度米	`> 100`
`${feature['name']}`	名称	`=== 'Canton Tower'`
`${feature['addr:country']}`	国家	`=== 'CN'`

五、性能提示

条件数组越长越慢，尽量把高概率规则放前面；
只用你需要的字段，多余字段不要写进表达式；
动态修改时直接 osmtile.style = newStyle，无需重建 tileset。

小结

3D Tiles 样式 = Cesium3DTileStyle 对象，支持统一色或条件色。
conditions 按顺序匹配，字段名用 ${feature['xxx']} 取值。
会一条 JSON 就能让"公寓黄、高楼青、其余白"，城市秒变彩虹。