Cesium基础-（Entity）-（cylinder）

5、cylinder 椎体

CylinderGeometry 是 Cesium 中用于创建圆柱体几何形状的类。它允许你定义一个圆柱，包括它的长度、顶部和底部的半径，以及围绕圆柱周长的边缘数。这些属性让你能够创建不同形状和大小的圆柱体，用于各种可视化需求。

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

属性

方法

静态方法

代码：

// 定义一个函数addCylinder，它接受一个viewer参数，用于在Cesium中添加一个圆柱体实体
addCylinder(viewer) {
    // 在viewer中添加一个圆柱体实体
    viewer.entities.add({
        name: 'cylinder', // 实体名称
        position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 0), // 实体的位置，使用经纬度和高度（以米为单位）
        cylinder: { // 圆柱体属性
          length: 500000, // 圆柱体的高度，单位为米
          topRadius: 300000, // 圆柱体顶部的半径，单位为米
          bottomRadius: 300000, // 圆柱体底部的半径，单位为米
          material: Cesium.Color.RED, // 圆柱体的材质，这里设置为红色
          slices: 100, // 圆柱周围圆圈的分段数，用于控制圆柱体表面的平滑度
          numberOfVerticalLines: 100, // 圆柱体垂直线的分段数，也用于控制表面平滑度
        }
    });
}

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

步骤 1: 安装Cesium

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

npm install cesium

步骤 2: 创建Vue组件

创建一个新的Vue组件，比如CesiumCylinder.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: 'CesiumCylinder',
  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.addCylinder();
    },
    addCylinder() {
      this.viewer.entities.add({
        name: 'cylinder',
        position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 0),
        cylinder: {
          length: 500000, // 圆柱体高度
          topRadius: 300000, // 圆柱体顶部半径
          bottomRadius: 300000, // 圆柱体底部半径
          material: Cesium.Color.RED, // 材质
          slices: 100, // 圆柱周围圆圈分段数
          numberOfVerticalLines: 100, // 圆柱垂直线分段数
        }
      });
    },
  },
};
</script>

步骤 3: 在父组件中使用

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

<template>
  <div>
    <CesiumCylinder />
  </div>
</template>

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

export default {
  components: {
    CesiumCylinder,
  },
};
</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组件，比如CesiumCylinder.js，并在其中初始化Cesium Viewer。

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

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

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

    // 添加圆柱体
    addCylinder(viewer);

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

  const addCylinder = (viewer) => {
    viewer.entities.add({
      name: 'cylinder',
      position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 0),
      cylinder: {
        length: 500000, // 圆柱体高度
        topRadius: 300000, // 圆柱体顶部半径
        bottomRadius: 300000, // 圆柱体底部半径
        material: Cesium.Color.RED, // 材质
        slices: 100, // 圆柱周围圆圈分段数
        numberOfVerticalLines: 100, // 圆柱垂直线分段数
      }
    });
  };

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

export default CesiumCylinder;

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

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

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

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

点击蓝字  关注我们

扫码关注

我们一起学习！