Cesium基础-（Entity）-（ellipse）

6、ellipse 圆与椭圆

EllipseGeometry（椭圆几何体）是 Cesium 中用于在三维空间中创建椭圆形状的类。这种椭圆形状可以位于地球表面（或其他椭球体）上，也可以在地球表面上方或下方的一定高度。EllipseGeometry 允许你定义椭圆的中心点、长半轴和短半轴的长度，以及椭圆的旋转角度等属性。

属性

以下是 EllipseGeometry 的主要属性，以表格形式展示：

方法

静态方法

代码示例

// 定义一个函数addEllipse，用于在Cesium Viewer中添加椭圆形状
 addEllipse(viewer) {
    // 使用viewer.entities.add方法添加一个椭圆形状实体
    viewer.entities.add({
        // 定义椭圆的地理位置，使用Cesium.Cartesian3.fromDegrees方法将经纬度转换为笛卡尔坐标
        position: Cesium.Cartesian3.fromDegrees(-139.0, 70.0, 100000.0),
        // 给实体命名为"ellipse"
        name: "ellipse",
        // 定义椭圆的属性
        ellipse: {
            // 短半轴的长度，单位为米
            semiMinorAxis: 300000.0,
            // 长半轴的长度，单位为米。如果长半轴和短半轴相等，则形状为圆形
            semiMajorAxis: 300000.0,
            // 椭圆的高度，单位为米
            height: 200000.0,
            // 设置椭圆的材质为蓝色
            material: Cesium.Color.BLUE,
            // 设置椭圆的旋转角度，这里是45度（PI/4弧度）
            rotation: Cesium.Math.PI_OVER_FOUR
        },
    });

    // 再次使用viewer.entities.add方法添加另一个椭圆形状实体
    viewer.entities.add({
        // 定义椭圆的地理位置，使用Cesium.Cartesian3.fromDegrees方法将经纬度转换为笛卡尔坐标
        position: Cesium.Cartesian3.fromDegrees(-129.0, 60.0, 140000.0),
        // 给实体命名为"ellipse"
        name: "ellipse",
        // 定义椭圆的属性
        ellipse: {
            // 短半轴的长度，单位为米
            semiMinorAxis: 200000.0,
            // 长半轴的长度，单位为米。如果长半轴比短半轴短，Cesium将无法渲染椭圆
            semiMajorAxis: 300000.0,
            // 椭圆的高度，单位为米
            height: 200000.0,
            // 设置椭圆的材质为一个图片URL，这里使用的是本地服务器的图片地址
            // 注意：图片地址需要是有效的，否则椭圆将不会显示纹理
            material: 'http://localhost:8888/images/ellipse66.jpg',
            // 设置椭圆的旋转角度，这里是90度（转换为弧度）
            rotation: Cesium.Math.toRadians(90),
            // 设置椭圆纹理的旋转角度，这里是90度（转换为弧度）。纹理旋转通常与实体旋转保持一致
            stRotation: Cesium.Math.toRadians(90)
        },
    });
}

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

步骤 1: 安装Cesium

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

npm install cesium

步骤 2: 创建Vue组件

创建一个新的Vue组件，比如CesiumEllipse.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: 'CesiumEllipse',
  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.addEllipse();
    },
    addEllipse() {
      this.viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(-139.0, 70.0, 100000.0),
        name: "ellipse",
        ellipse: {
          semiMinorAxis: 300000.0,
          semiMajorAxis: 300000.0,
          height: 200000.0,
          material: Cesium.Color.BLUE,
          rotation: Cesium.Math.PI_OVER_FOUR,
        },
      });

      this.viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(-129.0, 60.0, 140000.0),
        name: "ellipse",
        ellipse: {
          semiMinorAxis: 200000.0,
          semiMajorAxis: 300000.0,
          height: 200000.0,
          material: 'http://localhost:8888/images/ellipse66.jpg',
          rotation: Cesium.Math.toRadians(90),
          stRotation: Cesium.Math.toRadians(90),
        },
      });
    },
  },
};
</script>

步骤 3: 在父组件中使用

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

<template>
  <div>
    <CesiumEllipse />
  </div>
</template>

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

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

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

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

步骤 5: 运行你的Vue应用

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

npm run serve

注意事项

1. 图片路径：material属性中的路径http://localhost:8888/images/ellipse66.jpg需要确保是正确的，并且服务器正在运行，否则椭圆将无法显示纹理。如果你在本地开发环境中遇到问题，确保你的本地服务器正在运行，并且图片路径是正确的。如果图片加载失败，可能是因为CORS策略或者图片路径错误。

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

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

通过以上步骤，你就可以在Vue环境中运行上述代码，实现在Cesium地图上添加椭圆形状的功能。如果图片路径有问题，你可能需要检查图片的URL是否正确，或者尝试使用其他图片URL。

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

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

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

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

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

    // 添加椭圆形状
    addEllipse(viewer);

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

  const addEllipse = (viewer) => {
    viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(-139.0, 70.0, 100000.0),
      name: "ellipse",
      ellipse: {
        semiMinorAxis: 300000.0,
        semiMajorAxis: 300000.0,
        height: 200000.0,
        material: Cesium.Color.BLUE,
        rotation: Cesium.Math.PI_OVER_FOUR,
      },
    });

    viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(-129.0, 60.0, 140000.0),
      name: "ellipse",
      ellipse: {
        semiMinorAxis: 200000.0,
        semiMajorAxis: 300000.0,
        height: 200000.0,
        material: 'http://localhost:8888/images/ellipse66.jpg', // 确保图片路径正确
        rotation: Cesium.Math.toRadians(90),
        stRotation: Cesium.Math.toRadians(90),
      },
    });
  };

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

export default CesiumEllipse;

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

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

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

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

export default App;

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

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

步骤 6: 运行你的React应用

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

npm start

注意事项

1. 图片路径：material属性中的路径http://localhost:8888/images/ellipse66.jpg需要确保是正确的，并且服务器正在运行，否则椭圆将无法显示纹理。如果你在本地开发环境中遇到问题，确保你的本地服务器正在运行，并且图片路径是正确的。如果图片加载失败，可能是因为CORS策略或者图片路径错误。

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

点击蓝字  关注我们

扫码关注

我们一起学习！