Cesium教程06_材质设置

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

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

目录

1. 项目背景
2. 功能演示
3. 代码实现
   • 模板部分
   • 脚本部分
   • 样式部分
4. 代码解析
   • 材质应用
   • 镜头飞行功能
5. 总结与扩展方向

项目背景

在现代城市规划中，数字孪生技术和 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>

代码解析

材质应用

Cesium 提供多种材质类型，常见的有以下几种：

1. 纯色材质（ColorMaterialProperty）：适用于简单填充区域。
2. 图像材质（ImageMaterialProperty）：可以在区域内加载自定义纹理。
3. 棋盘格材质（CheckerboardMaterialProperty）：为区域填充规则的棋盘格图案。
4. 条纹材质（StripeMaterialProperty）：绘制具有交替颜色的条纹图案。
5. 网格材质（GridMaterialProperty）：用于生成规则的网格图案。
6. 发光线条（PolylineGlowMaterialProperty）：为线条添加发光效果。
7. 轮廓线条（PolylineOutlineMaterialProperty）：为线条添加轮廓。

镜头飞行功能

通过 Cesium 的 flyTo 方法，可以动态调整相机视角，带来流畅的视角切换效果。核心参数包括目标区域、朝向（heading）、俯仰角度（pitch）和飞行时间（duration）。

总结与扩展方向

本文通过 Vue 和 Cesium 实现了一个功能齐全的城市规划场景。未来可以扩展以下功能：

1. 动态数据加载：结合后端 API，实现动态添加和更新实体。
2. 交互增强：添加点击事件以显示区域详情。
3. 材质优化：支持更多复杂的材质效果，例如渐变或动画纹理。

通过上述改进，可以进一步提升应用的实用性和用户体验。

原文地址：https://blog.csdn.net/w131552/article/details/144005559

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！