使用 Vue3 和 Cesium 构建三维地球场景并实现高度调整功能
引言
在现代 Web GIS（地理信息系统）开发中，Cesium 是一款功能强大的三维地球可视化工具。本文展示了如何使用 Vue3 与 Cesium 集成，实现一个支持调整高度功能的三维地球场景。
本文将通过以下几个步骤完成：
- 初始化 Cesium 场景。
- 加载 3D Tiles 模型。
- 实现高度动态调整功能。
功能演示
在完成本示例后，用户可以通过一个滑块实时调整 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 数据库