Cesium教程08_camera使用

使用 Vue 和 Cesium 实现城市天际线视角切换

本文将介绍如何使用 Vue 和 Cesium 构建一个展示城市天际线的 3D 场景，并通过按钮切换不同视角，实现场景的动态交互和视角控制。

目录

1. 项目背景
2. 功能展示
3. 代码实现
   • 模板部分
   • 脚本部分
   • 样式部分
4. 代码解析
   • 动态添加建筑物
   • 视角切换功能
5. 总结与扩展方向

项目背景

在 3D 城市规划和可视化中，天际线展示和动态视角切换是重要的功能。Cesium 提供了高效的 3D 渲染能力，结合 Vue 的前端框架，可以快速构建交互性强的城市天际线视图。

功能展示

该示例实现以下功能：

• 添加一组虚拟建筑物，展示天际线效果。
• 设置初始视角，俯视建筑物的整体布局。
• 实现拉远视角以展示天际线全貌。
• 支持按方向（如朝北、朝东）调整视角。

代码实现

<script>
import { onMounted, ref } from "vue";
import {
  Viewer,
  Cartesian3,
  Math as CesiumMath,
  Color,
  Entity,
} from "cesium";

export default {
  name: "CitySkyline",
  setup() {
    const cesiumContainer = ref(null);
    let viewer = null;

    onMounted(() => {
      // 初始化 Cesium Viewer
      viewer = new Viewer(cesiumContainer.value, {
        geocoder: false,
        homeButton: false,
        sceneModePicker: false,
        baseLayerPicker: false,
        navigationHelpButton: false,
        animation: false,
        timeline: false,
        creditContainer: null, // 隐藏版权信息
      });

      // 添加城市建筑物示例（虚拟数据）
      addCityBuildings();

      // 设置初始视角
      setInitialView();
    });

    const addCityBuildings = () => {
      const buildings = [
        { lon: -74.006, lat: 40.7128, height: 300, color: Color.RED },
        { lon: -74.002, lat: 40.713, height: 200, color: Color.BLUE },
        { lon: -74.01, lat: 40.715, height: 250, color: Color.GREEN },
        { lon: -74.004, lat: 40.71, height: 400, color: Color.YELLOW },
      ];

      buildings.forEach((building) => {
        viewer.entities.add(
          new Entity({
            position: Cartesian3.fromDegrees(
              building.lon,
              building.lat,
              building.height / 2
            ),
            box: {
              dimensions: new Cartesian3(100, 100, building.height),
              material: building.color,
            },
          })
        );
      });
    };

    const setInitialView = () => {
      viewer.camera.setView({
        destination: Cartesian3.fromDegrees(-74.006, 40.7128, 1000), // 高度 1000 米，正上方
        orientation: {
          heading: CesiumMath.toRadians(0), // 朝北
          pitch: CesiumMath.toRadians(-90), // 直接俯视
          roll: 0,
        },
      });
    };

    const flyToSkyline = () => {
      viewer.camera.flyTo({
        destination: Cartesian3.fromDegrees(-74.010, 40.7128, 5000), // 拉远至 5000 米高
        orientation: {
          heading: CesiumMath.toRadians(0),
          pitch: CesiumMath.toRadians(-90), // 更低的俯视角
          roll: 0,
        },
        duration: 3, // 动画时长 3 秒
      });
    };

    const changeView = (direction) => {
      let heading = 0;
      if (direction === "north") heading = CesiumMath.toRadians(0); // 朝北
      if (direction === "east") heading = CesiumMath.toRadians(90); // 朝东

      viewer.camera.flyTo({
        destination: Cartesian3.fromDegrees(-74.018, 40.6800, 5000), // 高度 5000 米
        orientation: {
          heading: heading,
          pitch: CesiumMath.toRadians(-45), // 更低的俯视角
          roll: 0,
        },
        duration: 2,
      });
    };

    return {
      cesiumContainer,
      setInitialView,
      flyToSkyline,
      changeView,
    };
  },
};
</script>

代码解析

动态添加建筑物

通过 viewer.entities.add 方法，使用 Cartesian3 指定建筑物的位置，并通过 box 属性定义其尺寸和材质颜色。虚拟的建筑物模拟了不同高度和颜色的城市建筑群。

视角切换功能

1. 初始视角：使用 camera.setView 定义从正上方俯视建筑群的视角。

2. 拉远视角：通过 camera.flyTo 拉远镜头展示建筑群整体轮廓，动画时长可配置。

3. 方向切换：动态调整 heading 参数切换不同的观察方向（如朝北或朝东）。

总结与扩展方向

本文通过 Vue 和 Cesium 实现了一个城市天际线视图的基础应用。未来可以扩展以下功能：

1. 真实建筑物数据接入：使用实际的建筑物数据构建更加真实的场景。
2. 动态交互：允许用户通过拖拽或点击选择建筑物，查看详细信息。
3. 性能优化：使用 Tileset 数据进行大规模建筑渲染，提升性能和可扩展性。

以上改进将使该项目更适用于复杂的城市可视化和交互需求。