Elevation Band Material【译】

原文链接及内容

原文链接：https://sandcastle.cesium.com/?src=Elevation%20Band%20Material.html

效果如下视频所示：

示例代码如下：

<style>
  @import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar">
  <table>
    <tbody>
      <tr>
        <td>背景透明度</td>
        <td>
          <input type="range" min="0.0" max="1.0" step="0.01" data-bind="value: backgroundTransparency, valueUpdate: 'input'">
        </td>
      </tr>
      <tr>
        <td>(高程)条带透明度</td>
        <td>
          <input type="range" min="0.0" max="1.0" step="0.01" data-bind="value: bandTransparency, valueUpdate: 'input'">
        </td>
      </tr>
      <tr>
        <td>条带厚度</td>
        <td>
          <input type="range" min="10" max="1000" step="1" data-bind="value: bandThickness, valueUpdate: 'input'">
        </td>
      </tr>
      <tr>
        <td>条带1的位置</td>
        <td>
          <input type="range" min="4000" max="8848" step="1" data-bind="value: band1Position, valueUpdate: 'input'">
        </td>
      </tr>
      <tr>
        <td>条带2的位置</td>
        <td>
          <input type="range" min="4000" max="8848" step="1" data-bind="value: band2Position, valueUpdate: 'input'">
        </td>
      </tr>
      <tr>
        <td>条带3的位置</td>
        <td>
          <input type="range" min="4000" max="8848" step="1" data-bind="value: band3Position, valueUpdate: 'input'">
        </td>
      </tr>
      <tr>
        <td>启用渐变</td>
        <td>
          <input type="checkbox" data-bind="checked: gradient">
        </td>
      </tr>
    </tbody>
  </table>
</div>

/**
 * const viewer1 = new Cesium.Viewer("cesiumContainer", {
 *   errain: Cesium.Terrain.fromWorldTerrain({
 *     requestWaterMask: true,
 *     requestVertexNormals: true
 *   });
 * );
 * 开启以下属性可以为3D 地球提供高精度地形渲染和增强视觉效果。
 * requestWaterMask: 启用了水域掩膜（Water Mask），使海洋、湖泊等水域表面呈现动态反光效果。
 * requestVertexNormals: 启用顶点法线（Vertex Normals），用于计算复杂光照效果（如山峰、山谷的阴影）。
 */


const viewer = new Cesium.Viewer("cesiumContainer", {
  geocoder: false,
  sceneModePicker: false,
  homeButton: false,
  navigationHelpButton: false,
  baseLayerPicker: false,
  navigationInstructionsInitiallyVisible: false,
  fullscreenButton: false,
  selectionIndicator: false,
  skyBox: false,
  timeline: false,
  animation: false,
  shouldAnimate: true,
  infoBox: false,
  terrain: Cesium.Terrain.fromWorldTerrain({
    requestVertexNormals: true, //需要可视化斜坡(面)
  }),
});

viewer.cesiumWidget.creditContainer.style.display = "none";

viewer.camera.setView({
  destination: new Cesium.Cartesian3(
    290637.5534733206,
    5637471.593707632,
    2978256.8126927214
  ),
  orientation: {
    heading: 4.747266966349747,
    pitch: -0.2206998858596192,
    roll: 6.280340554587955,
  },
});

const viewModel = {
  gradient: false,
  band1Position: 7000.0,
  band2Position: 7500.0,
  band3Position: 8000.0,
  bandThickness: 100.0,
  bandTransparency: 0.5,
  backgroundTransparency: 0.75,
};

Cesium.knockout.track(viewModel);
const toolbar = document.getElementById("toolbar");
Cesium.knockout.applyBindings(viewModel, toolbar);
/**
 * 我们拖动滑块或开启渐变都会执行updateMaterial函数去改变渲染效果
 */
for (const name in viewModel) {
  if (viewModel.hasOwnProperty(name)) {
    Cesium.knockout.getObservable(viewModel, name).subscribe(updateMaterial);
  }
}

function updateMaterial() {
  const gradient = Boolean(viewModel.gradient);
  const band1Position = Number(viewModel.band1Position);
  const band2Position = Number(viewModel.band2Position);
  const band3Position = Number(viewModel.band3Position);
  const bandThickness = Number(viewModel.bandThickness);
  const bandTransparency = Number(viewModel.bandTransparency);
  const backgroundTransparency = Number(viewModel.backgroundTransparency);

  const layers = [];
  const backgroundLayer = {
    entries: [
      {
        height: 4200.0,
        color: new Cesium.Color(0.0, 0.0, 0.2, backgroundTransparency),
      },
      {
        height: 8000.0,
        color: new Cesium.Color(1.0, 1.0, 1.0, backgroundTransparency),
      },
      {
        height: 8500.0,
        color: new Cesium.Color(1.0, 0.0, 0.0, backgroundTransparency),
      },
    ],
    extendDownwards: true,
    extendUpwards: true,
  };
  layers.push(backgroundLayer);

  const gridStartHeight = 4200.0;
  const gridEndHeight = 8848.0;
  const gridCount = 50;
  for (let i = 0; i < gridCount; i++) {
    const lerper = i / (gridCount - 1);
    /**
     * Cesium.Math.lerp(p, q, time) → number：计算两个值的线性插值。
     * - p: 插值的起始值。
     * - q: 插值的结束值。
     * - time: 插值时间通常在[0.0, 1.0]范围内。
     * 
     * 举例：const n = Cesium.Math.lerp(0.0, 2.0, 0.5); // returns 1.0
     */
    const heightBelow = Cesium.Math.lerp(
      gridStartHeight,
      gridEndHeight,
      lerper
    );
    const heightAbove = heightBelow + 10.0;
    const alpha = Cesium.Math.lerp(0.2, 0.4, lerper) * backgroundTransparency;
    layers.push({
      entries: [
        {
          height: heightBelow,
          color: new Cesium.Color(1.0, 1.0, 1.0, alpha),
        },
        {
          height: heightAbove,
          color: new Cesium.Color(1.0, 1.0, 1.0, alpha),
        },
      ],
    });
  }

  //抗锯齿
  const antialias = Math.min(10.0, bandThickness * 0.1);

  if (!gradient) {
    const band1 = {
      entries: [
        {
          height: band1Position - bandThickness * 0.5 - antialias,
          color: new Cesium.Color(0.0, 0.0, 1.0, 0.0),
        },
        {
          height: band1Position - bandThickness * 0.5,
          color: new Cesium.Color(0.0, 0.0, 1.0, bandTransparency),
        },
        {
          height: band1Position + bandThickness * 0.5,
          color: new Cesium.Color(0.0, 0.0, 1.0, bandTransparency),
        },
        {
          height: band1Position + bandThickness * 0.5 + antialias,
          color: new Cesium.Color(0.0, 0.0, 1.0, 0.0),
        },
      ],
    };

    const band2 = {
      entries: [
        {
          height: band2Position - bandThickness * 0.5 - antialias,
          color: new Cesium.Color(0.0, 1.0, 0.0, 0.0),
        },
        {
          height: band2Position - bandThickness * 0.5,
          color: new Cesium.Color(0.0, 1.0, 0.0, bandTransparency),
        },
        {
          height: band2Position + bandThickness * 0.5,
          color: new Cesium.Color(0.0, 1.0, 0.0, bandTransparency),
        },
        {
          height: band2Position + bandThickness * 0.5 + antialias,
          color: new Cesium.Color(0.0, 1.0, 0.0, 0.0),
        },
      ],
    };

    const band3 = {
      entries: [
        {
          height: band3Position - bandThickness * 0.5 - antialias,
          color: new Cesium.Color(1.0, 0.0, 0.0, 0.0),
        },
        {
          height: band3Position - bandThickness * 0.5,
          color: new Cesium.Color(1.0, 0.0, 0.0, bandTransparency),
        },
        {
          height: band3Position + bandThickness * 0.5,
          color: new Cesium.Color(1.0, 0.0, 0.0, bandTransparency),
        },
        {
          height: band3Position + bandThickness * 0.5 + antialias,
          color: new Cesium.Color(1.0, 0.0, 0.0, 0.0),
        },
      ],
    };

    layers.push(band1);
    layers.push(band2);
    layers.push(band3);
  } else {
    const combinedBand = {
      entries: [
        {
          height: band1Position - bandThickness * 0.5,
          color: new Cesium.Color(0.0, 0.0, 1.0, bandTransparency),
        },
        {
          height: band2Position,
          color: new Cesium.Color(0.0, 1.0, 0.0, bandTransparency),
        },
        {
          height: band3Position + bandThickness * 0.5,
          color: new Cesium.Color(1.0, 0.0, 0.0, bandTransparency),
        },
      ],
    };

    layers.push(combinedBand);
  }

  const material = Cesium.createElevationBandMaterial({
    scene: viewer.scene,
    layers: layers,
  });
  viewer.scene.globe.material = material;
}

updateMaterial();