Skip to content
Cesium地下模式

简介

在一般的业务场景中,例如地下管线这些需要看地下模型的场景时候,需要开启地下模式。开启地下模式后,你可以通过添加地下内容来丰富地图的显示。你可以添加地下建筑、管道网络、地下设施等等,以展示地下世界的各种信息。使用Cesium的实体(Entity)对象和几何体(Geometry)对象,你可以创建各种具有逼真效果的地下结构。

Cesium提供了许多选项来定制地下模式的外观和行为。你可以设置地下环境的亮度、透明度和光照效果等。此外,你还可以根据需要调整地下模式下的相机视角和交互操作。

实现效果

https://bu.dusays.com/2023/06/16/648c042189292.png

实现代码

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;
    }
  }
};

Updated at: