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

悬停高亮与检查面板

检查器的价值在于「指哪查哪」。悬停高亮加属性面板,二三十行代码就能搭出雏形。

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

这个示例在做什么

鼠标悬停在建筑上,该建筑描边变成蓝色,右侧面板显示编号、经纬度、高度与底面积。 移开就恢复原样,面板淡下去。

检查器类的工具都遵循这个模式:悬停拾取 → 记录上一个高亮对象 → 切换高亮 → 展示属性。要注意「恢复上一个对象」这一步,否则高亮会一路累积。 3D Tiles 的检查器还会显示瓦片层级、几何误差等调试字段,取值方式相同。

关键接口

接口作用
MOUSE_MOVE悬停事件,回调里用 endPosition
box.outlineColor改描边色做高亮,比换材质更轻
tile._geometricError 等真实瓦片的调试字段(仅供排查)
scene.pick每分钟数百次调用,注意不要在回调里做重活

可以直接改的地方

位置改什么效果
#4d9bff换成告警红高亮配色
properties加字段面板多一行
MOUSE_MOVE改成 LEFT_CLICK点击才显示,不随鼠标扫过变化
panel.style.opacity调整数值未选中时的面板淡化程度

替代说明:官方示例使用 Cesium 的瓦片检查器查看 ion 数据的内部结构。 这里用实体属性复现「悬停高亮 + 属性面板」的交互,字段换成瓦片调试值即可。