简介
在一般的业务场景中,例如地下管线这些需要看地下模型的场景时候,需要开启地下模式。开启地下模式后,你可以通过添加地下内容来丰富地图的显示。你可以添加地下建筑、管道网络、地下设施等等,以展示地下世界的各种信息。使用Cesium的实体(Entity)对象和几何体(Geometry)对象,你可以创建各种具有逼真效果的地下结构。
Cesium提供了许多选项来定制地下模式的外观和行为。你可以设置地下环境的亮度、透明度和光照效果等。此外,你还可以根据需要调整地下模式下的相机视角和交互操作。
实现效果
实现代码
javascript
const enterUnderGround = () => {
const { scene } = viewer;
const { globe } = viewer.scene;
const { imageryLayers } = viewer;
scene.globe.depthTestAgainstTerrain = false;
scene.screenSpaceCameraController.inertiaZoom = 0.5;//调整相机惯性缩放时长
scene.screenSpaceCameraController.enableCollisionDetection = false;//禁用相机与地形的碰撞检测
scene.highDynamicRange = false;//关闭高动态范围渲染
scene.skyAtmosphere.show = false;//关闭大气
scene.skyBox.show = false;//关闭天空盒
scene.fog.enabled = false;//关闭雾
globe.baseColor = Color.BLACK;
if (imageryLayers && imageryLayers.length > 0) {
// 遍历所有的影像,把影像透明度调整为0.7
for (let index = 0; index < imageryLayers.length; index++) {
const layer = imageryLayers.get(index);
layer.alpha = 0.2;
}
}
//当相机在地下或地球是半透明时渲染地球背面的颜色,根据相机的距离与地球颜色混合。
globe.undergroundColor = Color.BLACK;
//获取或设置 Globe#undergroundColor 与地球颜色混合的近距离和远距离
globe.undergroundColorAlphaByDistance.near = 1000;
globe.undergroundColorAlphaByDistance.far = 1000000;
globe.undergroundColorAlphaByDistance.nearValue = 0;
globe.undergroundColorAlphaByDistance.farValue = 1;
};
关闭地下模式
javascript
const cancelUnderGround = () => {
const { scene } = viewer;
const { globe } = viewer.scene;
const { imageryLayers } = viewer;
scene.globe.depthTestAgainstTerrain = true;
[[Cesium计算模型包围盒中心点]]
// 退出地下模式的参数---------------------------------------------------
const originalOpts = {
baseColor: globe.baseColor,
alpha: 1.0,
skyBox: true,
skyAtmosphere: true,
highDynamicRange: true,
fog: true,
};
//启用或禁用相机与地形的碰撞检测
scene.screenSpaceCameraController.enableCollisionDetection = true;
scene.highDynamicRange = originalOpts.highDynamicRange;
scene.skyAtmosphere.show = originalOpts.skyAtmosphere;
scene.skyBox.show = originalOpts.skyBox;
scene.fog.enabled = originalOpts.fog;
globe.baseColor - originalOpts.baseColor;
if (imageryLayers && imageryLayers.length > 0) {
// 遍历所有的影像,把影像透明度调整回来
for (let index = 0; index < imageryLayers.length; index++) {
const layer = imageryLayers.get(index);
layer.alpha = 1;
}
}
};