Cesium案例(五) Underground Color

发布时间 2023-04-06 14:07:33作者: gis_BlackCaat
     Cesium.Ion.defaultAccessToken =
       token
      const viewer = new Cesium.Viewer("cesiumContainer");

      const scene = viewer.scene;
      const globe = scene.globe;
      //获取或设置深度测试椭球。

      scene.screenSpaceCameraController.enableCollisionDetection = false;
      //获取用于相机输入处理的控制器。
      //启用或禁用相机与地形的碰撞检测。
      const longitude = -3.82518;
      const latitude = 53.11728;
      const height = -500.0;
      const position = Cesium.Cartesian3.fromDegrees(
        longitude,
        latitude,
        height
      );
      const url = " ../Source/SampleData/models/ParcLeadMine/ParcLeadMine.glb";

      const entity = viewer.entities.add({
        name: url,
        position: position,
        model: {
          uri: url,
        },
      });

      viewer.scene.camera.setView({
        //设置相机位置、方向和变换。
        destination: new Cesium.Cartesian3(
          3827058.651471591,
          -256575.7981065622,
          5078738.238484612
        ),
        //摄像机在 WGS84(世界)坐标中的最终位置,
        //或从自上而下视图可见的矩形。
        orientation: new Cesium.HeadingPitchRoll(
          1.9765540737339418,
          -0.17352018581162754,
          0.0030147639151465455
        ),
        //包含方向和向上属性或航向、俯仰和滚动属性的对象。
        //默认情况下,方向将指向 3D 中框架的中心,在哥伦布视图中指向负 z 方向。
        //向上方向将指向 3D 中的当地北方,在哥伦布视图中指向正 y 方向。
        //在无限滚动模式下,2D 中不使用方向。
        endTransform: Cesium.Matrix4.IDENTITY,
        //表示相机的参考框架。
      });

      const originalColor = Cesium.Color.BLACK;
      const originalNearDistance = 1000.0;
      const originalFarDistance = 1000000.0;
      const originalNearAlpha = 0.0;
      const originalFarAlpha = 1.0;

      let color = originalColor;

      const viewModel = {
        enabled: true,
        nearDistance: originalNearDistance,
        farDistance: originalFarDistance,
        nearAlpha: originalNearAlpha,
        farAlpha: originalFarAlpha,
      };

      Cesium.knockout.track(viewModel);
      //Cesium.knock能够使Cesium球体监听html控件,
      // 从而根据控件的值实时改变一些地图属性.
      const toolbar = document.getElementById("toolbar");
      Cesium.knockout.applyBindings(viewModel, toolbar);
      for (const name in viewModel) {
        if (viewModel.hasOwnProperty(name)) {
          Cesium.knockout.getObservable(viewModel, name).subscribe(update);
        }
      }

      Sandcastle.addToolbarButton("Random color", function () {
        color = Cesium.Color.fromRandom({
          //使用提供的选项创建随机颜色。
          //对于可重现的随机颜色,您应该在应用程序开始时调用 CesiumMath#setRandomNumberSeed 一次。
          alpha: 1.0,
          //如果指定,则使用 alpha 分量而不是随机值。
        });
        update();
      });

      Sandcastle.addToolbarButton("Clear", function () {
        color = originalColor;
        viewModel.enabled = true;
        viewModel.nearDistance = originalNearDistance;
        viewModel.farDistance = originalFarDistance;
        viewModel.nearAlpha = originalNearAlpha;
        viewModel.farAlpha = originalFarAlpha;
        update();
      });

      function update() {
        globe.undergroundColor = viewModel.enabled ? color : undefined;
        //当相机在地下或球体半透明时渲染球体背面的颜色,根据相机的距离与球体颜色混合。
        //要禁用地下着色,请将 undergroundColor 设置为 undefined 。
        let nearDistance = Number(viewModel.nearDistance);
        nearDistance = isNaN(nearDistance)
          ? originalNearDistance
          : nearDistance;

        let farDistance = Number(viewModel.farDistance);
        farDistance = isNaN(farDistance) ? originalFarDistance : farDistance;

        if (nearDistance > farDistance) {
          nearDistance = farDistance;
        }

        let nearAlpha = Number(viewModel.nearAlpha);
        nearAlpha = isNaN(nearAlpha) ? 0.0 : nearAlpha;

        let farAlpha = Number(viewModel.farAlpha);
        farAlpha = isNaN(farAlpha) ? 1.0 : farAlpha;

        globe.undergroundColorAlphaByDistance.near = nearDistance;
        globe.undergroundColorAlphaByDistance.far = farDistance;
        globe.undergroundColorAlphaByDistance.nearValue = nearAlpha;
        globe.undergroundColorAlphaByDistance.farValue = farAlpha;
      }
      update();