Cesium基础-（Entity）-（Box）

3、Box 盒子

以下是 BoxGeometry 类的属性、方法和静态方法，以表格形式展示：

属性

方法

静态方法

示例代码：

     // 定义一个函数addBox，它接受一个viewer参数，用于在Cesium中添加一个盒子实体
addBox(viewer) {
    // 定义盒子的中心位置，使用经纬度和高度（以米为单位）
    // 这里的位置是经度-115.0度，纬度37.0度，高度1000米
    const position = Cesium.Cartesian3.fromDegrees(-115.0, 37.0, 1000);

    // 定义盒子的最小坐标点，这里设置了一个非常小的值，表示盒子的起始边界
    const minimum = new Cesium.Cartesian3(-1000000.0, -1000000.0, -1000000.0);
    // 定义盒子的最大坐标点，这里设置了一个非常大的值，表示盒子的结束边界
    const maximum = new Cesium.Cartesian3(1000000.0, 1000000.0, 1000000.0);

    // 使用Cesium.BoxGeometry创建一个盒子几何体，指定顶点格式为仅位置
    // 并设置最小和最大坐标点来定义盒子的大小和位置
    const boxGeometry = new Cesium.BoxGeometry({
        vertexFormat: Cesium.VertexFormat.POSITION_ONLY,
        minimum: minimum,
        maximum: maximum
    });

    // 根据上面定义的几何体创建实际的几何数据
    const geometry = Cesium.BoxGeometry.createGeometry(boxGeometry);

    // 在viewer中添加一个新的实体，这个实体代表一个盒子
    // 设置盒子的位置、尺寸和材质
    const entity = viewer.entities.add({
        position: position, // 盒子的中心位置
        box: {
            dimensions: new Cesium.Cartesian3(2000000.0, 2000000.0, 2000000.0), // 盒子的尺寸
            material: Cesium.Color.RED.withAlpha(0.5) // 盒子的材质，半透明红色
        }
    });

    // 使用viewer的zoomTo方法将视图聚焦到新添加的实体上
    // 这样用户就可以看到刚刚添加的盒子
    viewer.zoomTo(entity);
}

1、要在Vue代码环境下运行上述代码，你需要遵循以下步骤：

步骤 1: 安装Cesium

如果你还没有安装Cesium，可以通过npm来安装：

npm install cesium

步骤 2: 创建Vue组件

创建一个新的Vue组件，比如CesiumBox.vue，并在其中初始化Cesium Viewer。

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

<script>
import Cesium from 'cesium/Cesium';
import 'cesium/Widgets/widgets.css';

export default {
  name: 'CesiumBox',
  data() {
    return {
      viewer: null,
    };
  },
  mounted() {
    this.initCesium();
  },
  methods: {
    initCesium() {
      // 初始化Cesium Viewer
      this.viewer = new Cesium.Viewer(this.$refs.cesiumContainer, {
        imageryProvider: new Cesium.IonImageryProvider({ assetId: 1 }),
      });

      // 添加盒子
      this.addBox();
    },
    addBox() {
      // 定义盒子的中心位置
      const position = Cesium.Cartesian3.fromDegrees(-115.0, 37.0, 1000);

      // 定义盒子的最小和最大坐标
      const minimum = new Cesium.Cartesian3(-1000000.0, -1000000.0, -1000000.0);
      const maximum = new Cesium.Cartesian3(1000000.0, 1000000.0, 1000000.0);

      // 创建盒子几何体
      const boxGeometry = new Cesium.BoxGeometry({
        vertexFormat: Cesium.VertexFormat.POSITION_ONLY,
        minimum: minimum,
        maximum: maximum
      });

      // 创建几何体
      const geometry = Cesium.BoxGeometry.createGeometry(boxGeometry);

      // 创建实体
      const entity = this.viewer.entities.add({
        position: position,
        box: {
          dimensions: new Cesium.Cartesian3(2000000.0, 2000000.0, 2000000.0),
          material: Cesium.Color.RED.withAlpha(0.5)
        }
      });

      // 将视图聚焦到新添加的实体
      this.viewer.zoomTo(entity);
    },
  },
};
</script>

步骤 3: 在父组件中使用

在你的父组件中引入并使用CesiumBox组件。

<template>
  <div>
    <CesiumBox />
  </div>
</template>

<script>
import CesiumBox from './CesiumBox.vue';

export default {
  components: {
    CesiumBox,
  },
};
</script>

步骤 4: 确保样式和资源加载

确保Cesium的样式文件widgets.css被正确加载，这通常在index.html或者通过npm安装时自动处理。

步骤 5: 运行你的Vue应用

确保你的Vue应用能够正确运行，并且Cesium Viewer和盒子的添加功能能够正常工作。

npm run serve

注意事项

1. Cesium版本：确保你使用的Cesium版本与代码兼容。不同版本的Cesium可能有不同的API。

2. CORS问题：如果你从不同的源加载数据，可能会遇到跨源资源共享（CORS）问题。确保服务器配置了正确的CORS策略。

通过以上步骤，你就可以在Vue环境中运行上述代码，实现在Cesium地图上添加3D盒子的功能。

2、要在React代码环境下运行上述代码，你需要遵循以下步骤：

步骤 1: 创建React项目

如果你还没有创建一个React项目，可以使用Create React App来快速开始：

npx create-react-app cesium-react-app
cd cesium-react-app

步骤 2: 安装Cesium

通过npm安装Cesium：

npm install cesium

步骤 3: 创建Cesium组件

创建一个新的React组件，比如CesiumBox.js，并在其中初始化Cesium Viewer。

import React, { useRef, useEffect } from 'react';
import Cesium from 'cesium/Cesium';
import 'cesium/Widgets/widgets.css';

const CesiumBox = () => {
  const cesiumContainerRef = useRef(null);

  useEffect(() => {
    // 初始化Cesium Viewer
    const viewer = new Cesium.Viewer(cesiumContainerRef.current, {
      imageryProvider: new Cesium.IonImageryProvider({ assetId: 1 }),
    });

    // 添加盒子
    addBox(viewer);

    // 清理资源，销毁viewer实例
    return () => {
      viewer.destroy();
    };
  }, []);

  const addBox = (viewer) => {
    // 定义盒子的中心位置
    const position = Cesium.Cartesian3.fromDegrees(-115.0, 37.0, 1000);

    // 定义盒子的最小和最大坐标
    const minimum = new Cesium.Cartesian3(-1000000.0, -1000000.0, -1000000.0);
    const maximum = new Cesium.Cartesian3(1000000.0, 1000000.0, 1000000.0);

    // 创建盒子几何体
    const boxGeometry = new Cesium.BoxGeometry({
      vertexFormat: Cesium.VertexFormat.POSITION_ONLY,
      minimum: minimum,
      maximum: maximum,
    });

    // 创建几何体
    const geometry = Cesium.BoxGeometry.createGeometry(boxGeometry);

    // 创建实体
    const entity = viewer.entities.add({
      position: position,
      box: {
        dimensions: new Cesium.Cartesian3(2000000.0, 2000000.0, 2000000.0),
        material: Cesium.Color.RED.withAlpha(0.5),
      },
    });

    // 将视图聚焦到新添加的实体
    viewer.zoomTo(entity);
  };

  return (
    <div ref={cesiumContainerRef} style={{ width: '100%', height: '100vh' }} />
  );
};

export default CesiumBox;

步骤 4: 在App组件中使用CesiumBox组件

在你的App.js中引入并使用CesiumBox组件。

import React from 'react';
import CesiumBox from './CesiumBox';

function App() {
  return (
    <div className="App">
      <CesiumBox />
    </div>
  );
}

export default App;

步骤 5: 确保样式和资源加载

确保Cesium的样式文件widgets.css被正确加载，这通常在index.html或者通过npm安装时自动处理。

步骤 6: 运行你的React应用

确保你的React应用能够正确运行，并且Cesium Viewer和盒子的添加功能能够正常工作。

npm start

注意事项

1. 清理资源：在useEffect的返回函数中，我们调用了viewer.destroy()来清理资源，这是为了防止内存泄漏。

2. CORS问题：如果你从不同的源加载数据，可能会遇到跨源资源共享（CORS）问题。确保服务器配置了正确的CORS策略。

3. Cesium版本：确保你使用的Cesium版本与代码兼容。不同版本的Cesium可能有不同的API。

通过以上步骤，你就可以在React环境中运行上述代码，实现在Cesium地图上添加3D盒子的功能。

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

博客：

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

B站：

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

点击蓝字  关注我们

扫码关注

我们一起学习！