使用 Vue3 和 Cesium 构建三维地球场景并实现高度调整功能

引言

在现代 Web GIS（地理信息系统）开发中，Cesium 是一款功能强大的三维地球可视化工具。本文展示了如何使用 Vue3 与 Cesium 集成，实现一个支持调整高度功能的三维地球场景。

本文将通过以下几个步骤完成：

1. 初始化 Cesium 场景。
2. 加载 3D Tiles 模型。
3. 实现高度动态调整功能。

功能演示

在完成本示例后，用户可以通过一个滑块实时调整 3D Tiles 模型的高度，观察模型在三维场景中的动态变化效果。

代码实现

以下是完整的代码实现，包括 template、script 和样式部分。

1.关键代码

<template><div><!-- Cesium 容器 --><div ref="cesiumContainer" class="cesium-container"></div><!-- 工具栏 --><div class="toolbar"><!-- 高度调节滑块 --><label for="heightSlider">Adjust Height:</label><inputid="heightSlider"type="range"min="0"max="100"v-model="height"/><span>{{ height }} meters</span></div></div>
</template>
<script>
import { defineComponent, ref, onMounted, watch } from "vue";
import { Viewer, Cartesian3, Cartographic, Matrix4, Cesium3DTileset, Math as CesiumMath, Matrix3, Terrain } from "cesium";
import "cesium/Build/Cesium/Widgets/widgets.css";export default defineComponent({name: "CesiumViewer",setup() {const cesiumContainer = ref(null);const viewer = ref(null);const tileset = ref(null);const height = ref(0);let rootTransform = null;const initCesium = async () => {if (!cesiumContainer.value) {console.error("Cesium container not found!");return;}try {viewer.value = new Viewer(cesiumContainer.value, {terrain: Terrain.fromWorldTerrain(),});tileset.value = await Cesium3DTileset.fromIonAssetId(40866);viewer.value.scene.primitives.add(tileset.value);viewer.value.zoomTo(tileset.value);rootTransform = Matrix4.clone(tileset.value.root.transform);tileset.value.modelMatrix = Matrix4.clone(rootTransform);tileset.value.root.transform = Matrix4.clone(Matrix4.IDENTITY);} catch (error) {console.error("Error initializing Cesium:", error);}};const updateHeight = (newHeight) => {if (!tileset.value) return;const numericHeight = Number(newHeight);if (isNaN(numericHeight)) {console.error("Invalid height value:", newHeight);return;}const boundingSphere = tileset.value.boundingSphere;const cartographic = Cartographic.fromCartesian(boundingSphere.center);const surface = Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);const offset = Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, numericHeight);const translation = Cartesian3.subtract(offset, surface, new Cartesian3());const newModelMatrix = Matrix4.fromTranslation(translation);tileset.value.modelMatrix = Matrix4.multiply(rootTransform, newModelMatrix, new Matrix4());};watch(height, (newHeight) => {updateHeight(newHeight);});onMounted(() => {initCesium();});return {cesiumContainer,height,};},
});
</script>

代码解析

1. 初始化 Cesium 场景

initCesium 方法初始化 Cesium Viewer，并加载全球地形数据。

2. 加载 3D Tiles 模型

通过 Cesium3DTileset.fromIonAssetId 方法加载指定的 3D Tiles 数据，并添加到场景中。

3. 高度调整逻辑

在 updateHeight 方法中，计算模型的新高度并动态更新其变换矩阵（modelMatrix）。

4. 数据绑定

通过 Vue 的 watch 方法监听高度滑块的值，调用 updateHeight 更新模型。

总结

本文介绍了如何使用 Vue3 与 Cesium 构建一个动态调整模型高度的三维场景。通过 Vue 的响应式机制和 Cesium 强大的三维渲染能力，可以轻松实现复杂的交互功能。

可扩展方向

添加旋转功能：可以扩展滑块，实现对模型的旋转控制。
多模型支持：通过动态加载不同的模型，构建丰富的场景。
高程匹配：集成高程数据，使模型与地形完美匹配。

参考资源

Cesium 官方文档
Vue3 官方文档
Cesium ion 数据库