原文链接及内容

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

实现效果如下视频所示：

示例代码如下：

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
123
124
125
126
127
128
<template>
  <CesiumMap @viewerCreated="viewerCreated" />
  <!-- 参数调整面板 -->
  <div class="panel">
    <el-form label-suffix=":" label-width="auto">
      <el-form-item label="模型高度">
        <el-slider
          v-model="height"
          show-input
          :min="-20"
          :max="100"
          :show-input-controls="false"
          @change="handleHeightChange" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
//#region --------------------- 定义变量----------------
let viewer, tileset;

const height = ref(0);

//#endregion

function viewerCreated(v) {
  viewer = v;
  //启用阴影
  viewer.shadows = true;
  //开启深度测试
  viewer.scene.globe.depthTestAgainstTerrain = true;
  add3DTilesData();
}

onBeforeUnmount(() => {
  viewer.scene.primitives.remove(tileset);
  viewer.destroy();
});

//#region --------------------- 方法区域----------------
async function add3DTilesData() {
  try {
    tileset = await Cesium.Cesium3DTileset.fromUrl(
      "./SampleData/Cesium3DTiles/Tilesets/Tileset/tileset.json"
    );
    viewer.scene.primitives.add(tileset);
    await nextTick();
    viewer.zoomTo(
      tileset,
      new Cesium.HeadingPitchRange(
        0.0,
        -0.5,
        /**
         * BoundingSphere:具有中心和半径的边界球体。
         */
        tileset.boundingSphere.radius * 2.0
      )
    );
  } catch (err) {
    ElMessage.error(`tileset数据加载出错: ${err}`);
  }
}

function handleHeightChange(val) {
  if (isNaN(Number(val)) || !Cesium.defined(tileset)) {
    return;
  }

  //获取模型的中心点坐标
  const cartographic = Cesium.Cartographic.fromCartesian(
    tileset.boundingSphere.center
  );
  //地表面的点三维笛卡尔坐标
  const surface = Cesium.Cartesian3.fromRadians(
    cartographic.longitude,
    cartographic.latitude,
    0.0
  );

  //当前模型在初始高度下的三维笛卡尔坐标
  const offset = Cesium.Cartesian3.fromRadians(
    cartographic.longitude,
    cartographic.latitude,
    Number(val)
  );
  //当前坐标减去地表坐标得到平移的向量
  const translation = Cesium.Cartesian3.subtract(
    offset,
    surface,
    new Cesium.Cartesian3()
  );
  //平移模型
  tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
}
//#endregion
</script>

<style lang="scss" scoped>
.panel {
  position: absolute;
  width: 360px;
  top: 10px;
  right: 10px;
  background-color: white;
  border-radius: 4px;
  z-index: 2;
  padding: 10px;
  opacity: 0.96;
  box-shadow: rgba(195, 191, 188, 0.7) 0px 1px 2px 0px,
    rgba(195, 191, 188, 0.85) 0px 2px 4px 2px;

  .el-form-item {
    margin-bottom: 0;
  }
}

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

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