Terrain Exaggeration【译】

原文链接及内容

原文链接：https://sandcastle.cesium.com/?src=Terrain%20Exaggeration.html&label=All

示例介绍：

• 地形夸张：通过 verticalExaggeration 和 verticalExaggerationRelativeHeight 调整地形高度。
• 高度带材质：使用 ElevationBandMaterial 显示不同高度范围的颜色，突出相对高度。
• 标记点：在地面添加红色球体，贴合地形，作为视觉参考点，突出地形夸张效果。

效果如下视频所示：

示例代码如下：

<style>
  @import url(../templates/bucket.css);

  #toolbar {
    background: rgba(42, 42, 42, 0.8);
    padding: 4px;
    border-radius: 4px;
  }

  #toolbar input {
    vertical-align: middle;
    padding-top: 2px;
    padding-bottom: 2px;
  }

  #toolbar .header {
    font-weight: bold;
  }
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay">
  <h1>加载中...</h1>
</div>
<div id="toolbar">
  <table>
    <tbody>
      <tr>
        <td>夸张比例</td>
        <td>
          <input type="range" min="0" max="10" step="0.01" data-bind="value: exaggeration, valueUpdate: 'input'">
          <input type="text" size="5" data-bind="value: exaggeration">
        </td>
      </tr>
      <tr>
        <td>相对高度</td>
        <td>
          <input type="range" min="-1000" max="9000" step="1" data-bind="value: relativeHeight, valueUpdate: 'input'">
          <input type="text" size="5" data-bind="value: relativeHeight">
        </td>
      </tr>
    </tbody>
  </table>
</div>

const viewer = new Cesium.Viewer("cesiumContainer", {
  geocoder: false,
  homeButton: false,
  navigationHelpButton: false,
  navigationInstructionsInitiallyVisible: false,
  animation: false,
  timeline: false,
  fullscreenButton: false,
  skyBox: false,
  sceneModePicker: false,
  baseLayerPicker: false,
  selectionIndicator: false,
  
  terrain: Cesium.Terrain.fromWorldTerrain(),
});
viewer.cesiumWidget.creditContainer.style.display = "none";

const scene = viewer.scene;
const globe = scene.globe;
scene.verticalExaggeration = 2.0;//地形高度放大 2 倍，突出地形起伏。
// verticalExaggerationRelativeHeight:夸张的基准高度为 2400 米，地形高度相对于此高度缩放。
scene.verticalExaggerationRelativeHeight = 2400.0;

scene.camera.setView({
  destination: new Cesium.Cartesian3(
    336567.0354790703,
    5664688.047602498,
    2923204.3566963132,
  ),
  orientation: new Cesium.HeadingPitchRoll(
    1.2273281382639265,
    -0.32239612370237514,
    0.0027207329018610338,
  ),
});

// 在地面添加一个红色球体，贴合地形。
viewer.entities.add({
  position: new Cesium.Cartesian3(
    314557.3531714575,
    5659723.771882165,
    2923538.5417330978,
  ),
  ellipsoid: {
    radii: new Cesium.Cartesian3(400.0, 400.0, 400.0),
    material: Cesium.Color.RED,
    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
  },
});

let visualizeRelativeHeight = true;

/**
 * 根据 visualizeRelativeHeight 设置地形的高度带材质，突出相对高度范围。
 */
function updateMaterial() {
  if (visualizeRelativeHeight) {
    // 1.获取基准高度和夸张比例
    const height = scene.verticalExaggerationRelativeHeight;
    const exaggeration = scene.verticalExaggeration;
    //计算透明度，随夸张比例变化。
    const alpha = Math.min(1.0, exaggeration * 0.25);
    const layer = {
      // 3.定义高度带
      entries: [
        {
          // height + 100：绿色，透明度 alpha * 0.25
          height: height + 100.0,
          color: new Cesium.Color(0.0, 1.0, 0.0, alpha * 0.25),
        },
        {
          // height + 50：白色，透明度 alpha * 0.5
          height: height + 50.0,
          color: new Cesium.Color(1.0, 1.0, 1.0, alpha * 0.5),
        },
        {
          // 白色，透明度 alpha
          height: height,
          color: new Cesium.Color(1.0, 1.0, 1.0, alpha),
        },
        {
          // height - 50：白色，透明度 alpha * 0.5
          height: height - 50.0,
          color: new Cesium.Color(1.0, 1.0, 1.0, alpha * 0.5),
        },
        {
          // height - 100：红色，透明度 alpha * 0.25
          height: height - 100.0,
          color: new Cesium.Color(1.0, 0.0, 0.0, alpha * 0.25),
        },
      ],
      // 4.extendUpwards 和 extendDownwards：颜色带向上和向下无限延伸
      extendUpwards: true,
      extendDownwards: true,
    };
    // 5.使用 Cesium.createElevationBandMaterial 创建材质，应用到 globe.material
    scene.globe.material = Cesium.createElevationBandMaterial({
      scene: scene,
      layers: [layer],
    });
  } else {
    scene.globe.material = undefined;
  }
}
updateMaterial();

const viewModel = {
  exaggeration: scene.verticalExaggeration,
  relativeHeight: scene.verticalExaggerationRelativeHeight,
};

function updateExaggeration() {
  scene.verticalExaggeration = Number(viewModel.exaggeration);
  scene.verticalExaggerationRelativeHeight = Number(viewModel.relativeHeight);
  updateMaterial();
}

Cesium.knockout.track(viewModel);
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(updateExaggeration);
  }
}

Sandcastle.addToggleButton(
  "可视化相对高度",
  visualizeRelativeHeight,
  function (checked) {
    visualizeRelativeHeight = checked;
    updateMaterial();
  },
);

Sandcastle.addToolbarButton("移除地形夸张效果", function () {
  viewModel.exaggeration = 1.0;
  viewModel.relativeHeight = 0.0;
});