经纬志
首页 / Cesium / 使用示例

批表层级的父子关系

三维数据里的属性常常是树状的:楼栋属于园区,园区属于片区。示例把三级关系挂在实体上,点一下就能追到根。

CesiumJS 1.121 · 更新 2026-10-28
源码与运行效果
运行效果

这个示例在做什么

场景里有三个园区,每个园区三栋楼。点任意一栋,浮层会给出「园区 / 楼栋 / 高度」三项信息, 这三项就是挂在实体上的自定义属性。

3D Tiles 里的同类信息放在批表(Batch Table)里,按 batchId 索引; 层级批表还允许属性指向父节点,从而实现「楼栋 → 园区」的父子关系。 示例用实体的 properties 复现这套结构,取值方式同样是 picked.id.properties.park.getValue()。

关键接口

接口作用
entity.properties挂任意键值对,相当于一条批表记录
property.getValue()取出属性值,本例中都是字符串或数字
scene.pick(position)屏幕坐标拾取,返回带 id 的对象
ScreenSpaceEventHandler注册左键点击回调

可以直接改的地方

位置改什么效果
properties 对象增加 year 等字段浮层多一行信息
parks 数组改成四个园区场景与浮层同步扩展
LEFT_CLICK改成 MOUSE_MOVE悬停即显示信息
#info 样式调整位置与宽度信息面板外观

替代说明:官方示例读取 ion 数据集里的层级批表。 这里用实体属性模拟同样的父子关系,取值 API 与批表属性一致; 换成真实 tileset 时改读 feature.getProperty()。