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

Cesium教程06_材质设置

article 2024/11/29 1:06:07

使用 Vue 和 Cesium 实现城市规划场景渲染

本文将介绍如何通过 Vue 和 Cesium 构建一个简易的城市规划场景，并展示多种材质的应用，包括纯色、图像贴图、棋盘格、条纹、网格等。此外，还将实现场景的动态镜头飞行操作，提升用户的交互体验。

项目背景

在现代城市规划中，数字孪生技术和 3D 可视化成为了重要工具。Cesium 作为一个高效的 3D 地图库，提供了强大的可视化功能。通过集成 Vue，可以快速实现交互式城市规划应用。

功能演示

本文中的示例场景包括以下功能：

显示不同材质（纯色、贴图、棋盘格等）的区域和线条；
动态调整镜头并聚焦到指定区域；
在 Cesium 场景中隐藏不必要的 UI 元素，提升体验。

代码实现

模板部分

import {onMounted, ref} from "vue";
import {
  Viewer,
  Color,
  Cartesian3,
  Rectangle,
  ImageMaterialProperty,
  CheckerboardMaterialProperty,
  StripeMaterialProperty,
  GridMaterialProperty,
  PolylineGlowMaterialProperty,
  PolylineOutlineMaterialProperty,
  Math as CesiumMath,
} from "cesium";

export default {
  name: "CesiumMapView",
  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,
        fullScreenButton: false,
        vrButton: false,
        creditContainer: "credit",
      });

      // 启用帧速显示
      viewer.scene.debugShowFramesPerSecond = true;

      // 添加城市规划案例中的材质应用
      const commercialArea = addCityPlanningEntities(viewer);

      // 镜头推进并聚焦到贴图材质区域
      flyToCommercialArea(viewer, commercialArea);
    });

    const addCityPlanningEntities = (viewer) => {
      // 1. 纯色区域
      viewer.entities.add({
        name: "Residential Area",
        polygon: {
          hierarchy: Cartesian3.fromDegreesArray([
            -75.1, 39.9, -75.0, 39.9, -75.0, 40.0, -75.1, 40.0,
          ]),
          material: Color.BLUE.withAlpha(0.5),
        },
      });

      // 2. 图像材质
      const commercialArea = viewer.entities.add({
        name: "Commercial Area",
        polygon: {
          hierarchy: Cartesian3.fromDegreesArray([
            -75.0, 39.9, -74.9, 39.9, -74.9, 40.0, -75.0, 40.0,
          ]),
          material: new ImageMaterialProperty({
            image: "/path/to/image.png", // 替换为实际图像路径
          }),
        },
      });

      // 添加更多材质...
      return commercialArea;
    };

    const flyToCommercialArea = (viewer, commercialArea) => {
      const rectangle = Rectangle.fromCartesianArray(
        commercialArea.polygon.hierarchy.getValue().positions
      );

      viewer.camera.flyTo({
        destination: rectangle,
        orientation: {
          heading: CesiumMath.toRadians(0),
          pitch: CesiumMath.toRadians(-90),
          roll: 0.0,
        },
        duration: 2.0,
      });
    };

    return { cesiumContainer };
  },
};
</script>