当前位置：首页 > article >正文

Cesium教程03_加载b3dm高度

article 2024/11/28 3:43:29

使用 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>
      <input
          id="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>