Cesium基础-（Entity）-（ellipsoid）

7、ellipsoid 球体与椭球体

Ellipsoid（椭球体）是 Cesium 中用来表示地球或其他天体形状的几何对象。在三维空间中，椭球体是一个被拉伸或压缩的球体，它由三个半径定义：沿着 x、y 和 z 轴的半径。这些半径确定了椭球体的形状和大小。

椭球体通常用于地理信息系统中，用来模拟地球的形状，因为地球并非完美的球体，而是在赤道处略微膨胀的椭球体。在 Cesium 中，Ellipsoid 被用来定义实体的位置、计算距离、确定视线等。

以下是 Ellipsoid 的主要属性和方法的表格表示：

属性

方法

静态方法

代码示例：

 addEllipsoid(viewer) {
            // 定义一个共同的位置，这里以地球的某个点为例
            // 这个位置是椭球体在地球上的经纬度和高度
            const commonPosition = Cesium.Cartesian3.fromDegrees(-110.0, 40.0, 300000.0);

            // 添加一个蓝色的椭球体实体
            viewer.entities.add({
                name: "Blue sphere",  // 实体的名称
                position: Cesium.Cartesian3.fromDegrees(-110.0, 40.0, 0),  // 实体的位置，相对于共同位置的偏移
                ellipsoid: {  // 定义椭球体的属性
                    radii: new Cesium.Cartesian3(200000.0, 200000.0, 300000.0),  // 椭球体的半径
                    material: Cesium.Color.BLUE,  // 椭球体的颜色
                },
                // parent: commonPosition  // 将实体的位置设置为相对于共同位置
            });

            // 添加一个红色的椭球体实体，包含内半径，形成中空的效果
            viewer.entities.add({
                name: "Red sphere",
                position: Cesium.Cartesian3.fromDegrees(-110.0, 40.0, 0),
                ellipsoid: {
                    radii: new Cesium.Cartesian3(300000.0, 300000.0, 300000.0),
                    material: Cesium.Color.RED.withAlpha(0.5),  // 半透明红色材质
                    innerRadii: new Cesium.Cartesian3(100000.0, 100000.0, 100000.0),  // 内半径，形成中空效果
                },
                // parent: commonPosition
            });

            // 添加一个黄色的椭球体实体，不填充，仅绘制轮廓
            viewer.entities.add({
                name: "Yellow ellipsoid",
                position: Cesium.Cartesian3.fromDegrees(-110.0, 40.0, 0),
                ellipsoid: {
                    radii: new Cesium.Cartesian3(200000.0, 200000.0, 300000.0),
                    fill: false,  // 不填充椭球体
                    outline: true,  // 绘制轮廓
                    outlineColor: Cesium.Color.YELLOW,  // 轮廓颜色
                    slicePartitions: 64,  // 径向切片数量，影响椭球体的平滑度
                    stackPartitions: 64,  // 堆栈数，影响椭球体的平滑度
                    subdivisions: 256,  // 每个轮廓环的样本数，影响椭球体的平滑度
                },
                // parent: commonPosition
            });
        }

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

步骤 1: 安装Cesium

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

npm install cesium

步骤 2: 创建Vue组件

创建一个新的Vue组件，比如CesiumEllipsoid.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: 'CesiumEllipsoid',
  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.addEllipsoid();
    },
    addEllipsoid() {
      // 定义一个共同的位置，这里以地球的某个点为例
      const commonPosition = Cesium.Cartesian3.fromDegrees(-110.0, 40.0, 300000.0);

      // 添加一个蓝色的椭球体实体
      this.viewer.entities.add({
        name: "Blue sphere",
        position: Cesium.Cartesian3.fromDegrees(-110.0, 40.0, 0),
        ellipsoid: {
          radii: new Cesium.Cartesian3(200000.0, 200000.0, 300000.0),
          material: Cesium.Color.BLUE,
        },
        parent: commonPosition,
      });

      // 添加一个红色的椭球体实体，包含内半径，形成中空的效果
      this.viewer.entities.add({
        name: "Red sphere",
        position: Cesium.Cartesian3.fromDegrees(-110.0, 40.0, 0),
        ellipsoid: {
          radii: new Cesium.Cartesian3(300000.0, 300000.0, 300000.0),
          material: Cesium.Color.RED.withAlpha(0.5),
          innerRadii: new Cesium.Cartesian3(100000.0, 100000.0, 100000.0),
        },
        parent: commonPosition,
      });

      // 添加一个黄色的椭球体实体，不填充，仅绘制轮廓
      this.viewer.entities.add({
        name: "Yellow ellipsoid",
        position: Cesium.Cartesian3.fromDegrees(-110.0, 40.0, 0),
        ellipsoid: {
          radii: new Cesium.Cartesian3(200000.0, 200000.0, 300000.0),
          fill: false,
          outline: true,
          outlineColor: Cesium.Color.YELLOW,
          slicePartitions: 64,
          stackPartitions: 64,
          subdivisions: 256,
        },
        parent: commonPosition,
      });
    },
  },
};
</script>

步骤 3: 在父组件中使用

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

<template>
  <div>
    <CesiumEllipsoid />
  </div>
</template>

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

export default {
  components: {
    CesiumEllipsoid,
  },
};
</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策略。

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

步骤 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组件，比如CesiumEllipsoid.js，并在其中初始化Cesium Viewer。

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

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

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

    // 添加椭球体
    addEllipsoid(viewer);

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

  const addEllipsoid = (viewer) => {
    // 定义一个共同的位置，这里以地球的某个点为例
    const commonPosition = Cesium.Cartesian3.fromDegrees(-110.0, 40.0, 300000.0);

    // 添加一个蓝色的椭球体实体
    viewer.entities.add({
      name: "Blue sphere",
      position: Cesium.Cartesian3.fromDegrees(-110.0, 40.0, 0),
      ellipsoid: {
        radii: new Cesium.Cartesian3(200000.0, 200000.0, 300000.0),
        material: Cesium.Color.BLUE,
      },
      parent: commonPosition,
    });

    // 添加一个红色的椭球体实体，包含内半径，形成中空的效果
    viewer.entities.add({
      name: "Red sphere",
      position: Cesium.Cartesian3.fromDegrees(-110.0, 40.0, 0),
      ellipsoid: {
        radii: new Cesium.Cartesian3(300000.0, 300000.0, 300000.0),
        material: Cesium.Color.RED.withAlpha(0.5),
        innerRadii: new Cesium.Cartesian3(100000.0, 100000.0, 100000.0),
      },
      parent: commonPosition,
    });

    // 添加一个黄色的椭球体实体，不填充，仅绘制轮廓
    viewer.entities.add({
      name: "Yellow ellipsoid",
      position: Cesium.Cartesian3.fromDegrees(-110.0, 40.0, 0),
      ellipsoid: {
        radii: new Cesium.Cartesian3(200000.0, 200000.0, 300000.0),
        fill: false,
        outline: true,
        outlineColor: Cesium.Color.YELLOW,
        slicePartitions: 64,
        stackPartitions: 64,
        subdivisions: 256,
      },
      parent: commonPosition,
    });
  };

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

export default CesiumEllipsoid;

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

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

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

function App() {
  return (
    <div className="App">
      <CesiumEllipsoid />
    </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。  

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

博客：

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

B站：

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

点击蓝字  关注我们

扫码关注

我们一起学习！