Cesium基础-（Entity）-（plane）

11、plane 平面

Cesium中的Plane是一种用于定义平面的图形，它可以由一个法向量和一个距离来确定。这个平面可以用于各种应用，比如裁剪模型或者作为模型的参考平面。下面是Plane的属性、方法及描述的表格表示，以及一些简单的解释，希望能让小白也容易理解。

属性

方法

简单解释

• show：这个属性就像一个开关，打开（true）时平面会显示出来，关闭（false）时平面就不会显示。
• plane：定义了平面的朝向和位置，由一个法向量和一个距离确定。法向量决定了平面的朝向，距离决定了平面离原点有多远。
• dimensions：设置平面的大小，宽度和高度。
• fill：决定平面是否被填充颜色。
• material：定义填充平面的颜色或者材质。
• outline：决定是否在平面的边缘画一条线，让平面更显眼。
• outlineColor和outlineWidth：设置轮廓线的颜色和宽度。
• shadows：决定平面是否显示阴影，这对于模拟真实世界中的光影效果很有用。
• distanceDisplayCondition：设置平面在摄像机多远的距离内显示，这样可以优化性能，避免渲染太远的物体。

通过这些属性和方法，可以在Cesium中创建和控制平面，实现各种视觉效果。

详细代码：

// 定义一个名为addPlane的函数，它接受一个参数viewer，这个参数是一个Cesium Viewer实例
addPlane(viewer) {
    // 使用viewer的entities.add方法添加一个新的实体到场景中
    viewer.entities.add({
        // 为实体设置一个名称，这里命名为"plane"
        name: "plane",
        // 设置实体的位置，使用Cesium.Cartesian3.fromDegrees方法从经纬度和高度创建一个三维坐标
        // 这里的坐标是西经107度，北纬40度，高度300000米
        position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
        // 定义一个平面图形的属性
        plane: {
            // 创建一个Cesium.Plane对象，定义平面的法线和距离原点的距离
            // Cesium.Cartesian3.UNIT_Z是一个指向Z轴的单位向量，表示平面的法线方向垂直于地面
            // 100000.0是平面到原点的距离，这里表示平面在地面上方100000单位距离
            plane: new Cesium.Plane(Cesium.Cartesian3.UNIT_Z, 100000.0),
            // 指定平面的宽度和高度，使用Cesium.Cartesian2对象
            // 这里宽度为400000单位，高度为300000单位
            dimensions: new Cesium.Cartesian2(400000.0, 300000.0),
            // 设置平面的材质，这里使用半透明的红色
            material: Cesium.Color.RED.withAlpha(0.5),
            // 设置是否填充平面，true表示填充平面
            fill: true,
            // 设置是否绘制平面的轮廓，true表示绘制轮廓
            outline: true,
            // 设置平面轮廓的颜色，这里使用黄绿色
            outlineColor: Cesium.Color.YELLOWGREEN,
        },
    });
    // 使用viewer.zoomTo方法将视图缩放到新添加的实体，使其在视图中居中显示
    viewer.zoomTo(viewer.entities);
}

要在Vue代码环境中运行上述addPlane函数

步骤 1: 安装Cesium

首先，确保你的Vue项目中已经安装了Cesium。如果还没有安装，可以通过npm或yarn来安装：

npm install cesium

或者

yarn add cesium

步骤 2: 创建Vue组件

创建一个新的Vue组件，用于承载Cesium Viewer。例如，你可以创建一个名为CesiumPlaneViewer.vue的文件。

步骤 3: 引入Cesium

在Vue组件中引入Cesium库：

<template>
  <div ref="cesiumContainer" style="width: 100%; height: 100vh;"></div>
</template>

<script>
import * as Cesium from 'cesium/Cesium';
import 'cesium/Widgets/widgets.css'; // 引入Cesium的样式文件

export default {
  name: 'CesiumPlaneViewer',
  mounted() {
    this.initCesium();
  },
  methods: {
    initCesium() {
      // 初始化Cesium Viewer
      const viewer = new Cesium.Viewer(this.$refs.cesiumContainer);

      // 添加平面图形
      this.addPlane(viewer);
    },
    addPlane(viewer) {
      viewer.entities.add({
        name: "plane",
        position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
        plane: {
          plane: new Cesium.Plane(Cesium.Cartesian3.UNIT_Z, 100000.0),
          dimensions: new Cesium.Cartesian2(400000.0, 300000.0),
          material: Cesium.Color.RED.withAlpha(0.5),
          fill: true,
          outline: true,
          outlineColor: Cesium.Color.YELLOWGREEN,
        },
      });
      viewer.zoomTo(viewer.entities);
    }
  }
};
</script>

步骤 4: 使用CesiumPlaneViewer组件

在你的Vue应用中的任何地方引入并使用CesiumPlaneViewer组件：

<template>
  <div id="app">
    <CesiumPlaneViewer />
  </div>
</template>

<script>
import CesiumPlaneViewer from './components/CesiumPlaneViewer.vue';

export default {
  name: 'App',
  components: {
    CesiumPlaneViewer
  }
};
</script>

步骤 5: 确保Cesium资源加载

Cesium需要加载大量的资源文件，确保你的项目配置了正确的路径或者使用了Cesium的CDN服务。

步骤 6: 调试和测试

运行你的Vue应用，并确保Cesium Viewer正确加载，并且平面图形实体正确显示。

注意

• 确保你的Vue项目已经正确配置了对Cesium的支持，包括样式文件的引入。
• 如果你在加载Cesium Viewer或平面图形时遇到问题，检查控制台输出，查看是否有任何错误信息。
• 如果Cesium Viewer没有正确显示平面图形，可能需要调整平面的位置、尺寸或材质属性，确保它们在视图范围内并且可见。

通过以上步骤，能够在Vue环境中成功运行addPlane函数，并在Cesium Viewer中添加一个平面图形。

欢迎关注我的博客及B站：

博客：

https://blog.csdn.net/weixin_44857463/article/details/129157708

B站：

https://space.bilibili.com/610654927?spm_id_from=..0.0

点击蓝字  关注我们

扫码关注

我们一起学习！