Cesium 中computeViewRectangle的使用场景
一、背景:为什么“看得见”如此重要
在数字孪生、城市信息模型(CIM)或空三展示场景里,几十万甚至上百万条实体同时加载到 Cesium 场景是常态。
如果一股脑全部渲染,GPU 和 CPU 都会被浪费在“镜头背后”的对象上。
因此,“相机视域剔除(Frustum Culling)”就成了首道性能护城河。
Cesium 官方提供了两种高层接口:
viewer.camera.getPixelSize—— 适合判断“实体在屏幕上占多少像素”;viewer.camera.computeViewRectangle—— 直接给出“当前镜头在地表上的外包矩形”。
本文要聊的,就是如何用 7 行代码,借助第 2 种接口完成“实体是否在地表可见区域”的极速判断。
二、7 行代码逐行拆解
js// 1. 取出实体在“当前时刻”的位置 const position = entity.position?.getValue(Cesium.JulianDate.now()); if (!position) return; // 2. 位置无效直接短路 // 3. 计算相机当前视域在地表上的外包矩形(WGS84 弧度坐标) let rectangle = viewer.camera.computeViewRectangle(); if (!rectangle) return []; // 4. 矩形无效(常见于地下/太空视角)直接返回 // 5. 把笛卡尔坐标转成弧度 const cartographic = Cesium.Cartographic.fromCartesian(position); // 6. 判断点是否在矩形内 const show = Cesium.Rectangle.contains(rectangle, cartographic); // 7. 根据布尔值决定实体显隐(或数据层筛选) entity.show = show;
三、核心 API 行为细节
1. computeViewRectangle 的“坑”
- 返回类型:
Cesium.Rectangle(西/南/东/北,单位弧度)。 - 如果相机朝上看或完全离地心太远,会返回
undefined——此时建议回退到camera.getPixelSize或BoundingSphere做体积剔除。 - 对地下相机、VR 模式、 Columbus View 同样可能失效,务必做空保护。
2. fromCartesian 的“高度”维度
Cartographic.fromCartesian 会解析出 (longitude, latitude, height)。
但 Rectangle.contains 只比较二维 (lon, lat),高度被完全忽略。
也就是说,即使实体在相机“正上方 10 km”,只要经纬度落在矩形内,也会被判为 true。
需要高度剔除时,可额外判断:
jsconst camHeight = viewer.camera.positionCartographic.height; if (cartographic.height > camHeight + 1000) show = false; // 举例:高于相机 1 km 就隐藏
四、结语
“看得见才渲染”是 3D 大屏场景的生存法则。
Cesium 已经把复杂的空间几何运算封装成一行 Rectangle.contains,
剩下的,就是你在数据层把它用对、用稳、用快。
