首页 / Cesium / 使用示例
按属性给要素换样式
同一批建筑，换一套配色规则就变成另一种专题图。示例把规则写成函数，循环切换三套方案。
源码与运行效果
这个示例在做什么
24 栋建筑按高度分档，每 2.5 秒换一套配色：先按高度三分档，再按体量两分档，最后回到单色。 三套样式都写成了函数，输入高度、输出颜色，切换时只换函数。
真实 3D Tiles 里对应的是 Cesium3DTileStyle，样式条件写成表达式：
color: "(${height} > 55) ? color('#ff5c5c') : color('#4d7cff')"。
表达式的含义与这里的函数完全等价，只是换成了字符串形式，便于外部配置。
关键接口
| 接口 | 作用 |
|---|---|
Cesium3DTileStyle | 用表达式描述颜色、显隐、缩放 |
tileset.style | 整份数据统一样式，修改后会重新求值 |
ColorMaterialProperty | 实体材质，可随时替换 |
property.getValue() | 样式表达式里读要素属性的等价操作 |
可以直接改的地方
| 位置 | 改什么 | 效果 |
|---|---|---|
styles 数组 | 增加第四套函数 | 多一种配色方案 |
b.h > 55 | 改阈值 | 分档边界变化 |
setTimeout(apply, 2500) | 改成 1000 | 切换更快 |
材质加 withAlpha(0.7) | 半透明 | 能看穿前后排 |
替代说明：官方示例用 Cesium3DTileStyle 对 ion 数据集按属性着色。
这里把样式表达式换成 JavaScript 函数，分档逻辑一一对应；
真实项目里把同一套规则写成表达式字符串即可。