Advanced Tutorial

Style and Filter 3D Tiles

进阶中级30-45 分钟

这篇教程的意义在于把“数据已经加载”推进成“数据开始表达信息”。

Overview

核心思路

通过属性驱动样式、颜色和显隐规则,把 3D Tiles 从“真实背景”变成“信息载体”。这是从展示走向分析的关键一步。

Best For

适合哪些系统

  • 需要高亮重点建筑或设施的场景。
  • 基于属性做分级分类展示的场景。
  • 需要过滤异常值、危险区、重点区的应用。

Starter Code

样式表达式骨架

tileset.style = new Cesium3DTileStyle({
  color: {
    conditions: [
      ["${height} > 120", "color('#ff7a59')"],
      ["${height} > 60", "color('#72b6ff')"],
      ["true", "color('#7ef0c4')"],
    ],
  },
  show: "${usage} !== 'inactive'",
});

Project Advice

项目中怎么用才有效

先做一套最小规则 只用一个字段做第一次分层,避免一开始就把颜色和条件写乱。
一定配图例或说明 颜色变化如果没有解释,用户很难把视觉和业务含义对应起来。
样式为业务服务 不要为了好看堆规则,先明确你要突出什么对象。

Steps

建议实操流程

  1. 先确认 tileset 中有哪些可用属性。
  2. 只挑一个字段做第一次样式实验。
  3. 再逐步加入颜色、透明度和显隐条件。
  4. 最后加上图例或解释文字,不让用户只看到颜色变化。

Good For

最适合的业务

  • 楼宇分级展示。
  • 重点设施筛选。
  • 异常值高亮预警。

Pitfalls

易错点

  • 不先理解属性字段,会导致样式表达式写错。
  • 规则太多时,视觉效果容易杂乱。
  • 高亮逻辑如果没有业务解释,会让用户看不懂重点在哪里。