原文链接及内容

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

注： 由于加载示例中的数据，因此这里我们通过加载 Cesium World Terrain一样可以实现示例中的效果。

实现效果如下所示：

实现代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<template>
  <CesiumMap @viewerCreated="viewerCreated" />
  <!-- 参数调整面板 -->
  <div class="panel">
    <el-form :model="form" label-suffix=":" label-width="auto">
      <el-form-item label="垂直拉伸倍数">
        <el-slider
          v-model="form.exaggeration"
          show-input
          :min="1"
          :max="5"
          :step="0.01"
          :show-input-controls="false"
          @input="handleExaggerationChange" />
      </el-form-item>
      <el-form-item label="垂直拉伸参考高度">
        <el-slider
          v-model="form.relativeHeight"
          show-input
          :min="-1000"
          :max="9000"
          :show-input-controls="false"
          @input="handleRelativeHeightChange" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { addWorldTerrain } from "@/utils/utils.js";

//#region --------------------- 定义变量----------------
let viewer, scene, camera;

const form = reactive({
  exaggeration: 3,
  relativeHeight: 0,
});
//#endregion

//#region --------------------- 方法区域----------------
function viewerCreated(v) {
  viewer = v;
  initConfig();
  //官方提供的方法无法个人项目无法加载，这里用Cesium World Terrain数据替代
  // addGooglePhotorealistic3DTileset();
  addWorldTerrain(viewer);
}

function initConfig() {
  scene = viewer.scene;
  scene.verticalExaggeration = 3.0; //场景的垂直拉伸，默认值为1.0，表示不拉伸。
  // 启用渲染天空
  scene.skyAtmosphere.show = true;

  camera = viewer.camera;
  camera.setView({
    destination: new Cesium.Cartesian3(
      -2710292.813384663,
      -4360657.061518585,
      3793571.786860543
    ),
    orientation: new Cesium.HeadingPitchRoll(
      5.794062761901799,
      -0.30293409742984756,
      0.0009187098191985044
    ),
  });
}

async function addWorldTerrain(viewer) {
  try {
    //添加WorldTerrain
    const terrainProviderPromise =
      await Cesium.CesiumTerrainProvider.fromIonAssetId(1, {
        requestVertexNormals: true,
      });
    viewer.terrainProvider = terrainProviderPromise;
  } catch (err) {
    ElMessage.error(`世界地形数据加载出错: ${err}`);
  }
}

function handleExaggerationChange(exaggeration) {
  scene.verticalExaggeration = Number(exaggeration);
}

function handleRelativeHeightChange(height) {
  scene.verticalExaggerationRelativeHeight = Number(height);
}
//#endregion
</script>

<style lang="scss" scoped>
.panel {
  width: 450px;
  padding: 10px;
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: white;
  border-radius: 4px;
  z-index: 2;
  opacity: 0.96;
  overflow: hidden auto;
}

:deep(.el-form-item:last-child) {
  margin-bottom: 0;
}

//滑块右侧的输入框的长度
:deep(.el-input-number) {
  width: 75px;
}

//滑块右侧输入框
:deep(.el-slider__runway.show-input) {
  margin-right: 13px;
  margin-left: 5px;
}
</style>