以下是
CorridorGeometry 类的属性、方法和静态方法，以表格形式展示：
属性
| 属性名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| positions | Array. | 定义走廊中心的坐标点数组。 | |
| width | number | 走廊边缘之间的距离，单位为米。 | |
| ellipsoid | Ellipsoid | Ellipsoid.default | 用作参考的椭球体。 |
| granularity | number | CesiumMath.RADIANS_PER_DEGREE | 每个经纬度之间的距离，单位为弧度。 |
| height | number | 0 | 走廊与椭球体表面之间的距离，单位为米。 |
| extrudedHeight | number | 走廊拉伸面与椭球体表面之间的距离，单位为米。 | |
| vertexFormat | VertexFormat | VertexFormat.DEFAULT | 要计算的顶点属性。 |
| cornerType | CornerType | CornerType.ROUNDED | 走廊角落的风格。 |
方法
| 方法名 | 返回类型 | 描述 |
|---|---|---|
| createGeometry | Geometry | undefined | 计算走廊的几何表示，包括顶点、索引和边界球。 |
静态方法
| 静态方法名 | 返回类型 | 描述 |
|---|---|---|
| computeRectangle | Rectangle | 计算给定选项的边界矩形。 |
| pack | Array. | 将提供的实例存储到提供的数组中。 |
| unpack | CorridorGeometry | 从打包的数组中检索实例。 |
示例代码：
// 定义一个函数addCorridor，它接受一个viewer参数，用于在Cesium中添加走廊实体
addCorridor(viewer) {
// 在viewer中添加第一个走廊实体
viewer.entities.add({
name: 'corridor', // 实体名称
corridor: { // 走廊属性
positions: Cesium.Cartesian3.fromDegreesArray([
// 定义走廊的路径点，使用经纬度数组
73.66, 3.86, // 第一个点的经纬度
73.66, 18.21,
97.03, 18.21,
97.03, 4.17,
103.51, 4.17,
103.51, 22.15,
108.22, 22.15,
108.22, 4.81,
124.74, 4.81,
124.74, 22.15,
130.59, 22.15,
130.59, 48.13,
98.58, 48.13,
98.58, 33.44,
91.11, 33.44,
91.11, 38.16,
75.14, 38.16,
75.14, 18.21,
73.66, 18.21 // 返回起点闭合走廊
]),
width: 100000, // 走廊的宽度，单位为米
height: 200000,// 走廊的高度，单位为米
extrudedHeight: 2000,// 走廊的拉伸高度，单位为米
material: Cesium.Color.RED, // 走廊的颜色，这里设置为红色
cornerType: Cesium.CornerType.BEVELED,// 走廊拐角的样式，这里设置为斜角
granularity: Cesium.Math.RADIANS_PER_DEGREE,// 指定每个纬度和经度之间的距离，这里设置为每度的弧度数
zIndex: 0// 层级，当未定义height和extrudedHeight且道路为静态时才有效
}
});
// 在viewer中添加第二个走廊实体
viewer.entities.add({
name: 'corridor', // 实体名称
corridor: { // 走廊属性
positions: Cesium.Cartesian3.fromDegreesArray([
// 定义走廊的路径点，使用经纬度数组
-100.0, 40.0,
-105.0, 40.0,
-105.0, 35.0,
-110.0, 35.0,
-110.0, 40.0,
-115.0, 40.0,
]),
width: 100000, // 走廊的宽度，单位为米
height: 200000,// 走廊的高度，单位为米
extrudedHeight: 2000,// 走廊的拉伸高度，单位为米
material: Cesium.Color.BLUE, // 走廊的颜色，这里设置为蓝色
cornerType: Cesium.CornerType.BEVELED,// 走廊拐角的样式，这里设置为斜角
granularity: Cesium.Math.RADIANS_PER_DEGREE,// 指定每个纬度和经度之间的距离，这里设置为每度的弧度数
zIndex: 1// 层级，当未定义height和extrudedHeight且道路为静态时才有效
}
});
}
1、要在Vue代码环境下运行上述代码，你需要遵循以下步骤：
步骤 1: 安装Cesium
如果你还没有安装Cesium，可以通过npm来安装：
npm install cesium
步骤 2: 创建Vue组件
创建一个新的Vue组件，比如CesiumCorridor.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: 'CesiumCorridor',
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.addCorridor();
},
addCorridor() {
this.viewer.entities.add({
name: 'corridor',
corridor: {
positions: Cesium.Cartesian3.fromDegreesArray([
73.66, 3.86,
73.66, 18.21,
97.03, 18.21,
97.03, 4.17,
103.51, 4.17,
103.51, 22.15,
108.22, 22.15,
108.22, 4.81,
124.74, 4.81,
124.74, 22.15,
130.59, 22.15,
130.59, 48.13,
98.58, 48.13,
98.58, 33.44,
91.11, 33.44,
91.11, 38.16,
75.14, 38.16,
75.14, 18.21,
73.66, 18.21 // 返回起点闭合走廊
]),
width: 100000, // 宽度必须设置
height: 200000, // 高度
extrudedHeight: 2000, // 拉伸高度
material: Cesium.Color.RED,
cornerType: Cesium.CornerType.BEVELED, // 拐角样式
granularity: Cesium.Math.RADIANS_PER_DEGREE, // 指定每个纬度和经度之间的距离
zIndex: 0 // 层级，当未定义height和extrudedHeight且道路为静态时才有效
}
});
this.viewer.entities.add({
name: 'corridor',
corridor: {
positions: Cesium.Cartesian3.fromDegreesArray([
-100.0, 40.0,
-105.0, 40.0,
-105.0, 35.0,
-110.0, 35.0,
-110.0, 40.0,
-115.0, 40.0,
]),
width: 100000, // 宽度必须设置
height: 200000, // 高度
extrudedHeight: 2000, // 拉伸高度
material: Cesium.Color.BLUE,
cornerType: Cesium.CornerType.BEVELED, // 拐角样式
granularity: Cesium.Math.RADIANS_PER_DEGREE, // 指定每个纬度和经度之间的距离
zIndex: 1 // 层级，当未定义height和extrudedHeight且道路为静态时才有效
}
});
},
},
};
</script>
步骤 3: 在父组件中使用
在你的父组件中引入并使用CesiumCorridor组件。
<template>
<div>
<CesiumCorridor />
</div>
</template>
<script>
import CesiumCorridor from './CesiumCorridor.vue';
export default {
components: {
CesiumCorridor,
},
};
</script>
步骤 4: 确保样式和资源加载
确保Cesium的样式文件widgets.css被正确加载，这通常在index.html或者通过npm安装时自动处理。
步骤 5: 运行你的Vue应用
确保你的Vue应用能够正确运行，并且Cesium Viewer和走廊的添加功能能够正常工作。
npm run serve
注意事项
Cesium版本：确保你使用的Cesium版本与代码兼容。不同版本的Cesium可能有不同的API。
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组件，比如CesiumCorridor.js，并在其中初始化Cesium Viewer。
import React, { useRef, useEffect } from 'react';
import Cesium from 'cesium/Cesium';
import 'cesium/Widgets/widgets.css';
const CesiumCorridor = () => {
const cesiumContainerRef = useRef(null);
useEffect(() => {
// 初始化Cesium Viewer
const viewer = new Cesium.Viewer(cesiumContainerRef.current, {
imageryProvider: new Cesium.IonImageryProvider({ assetId: 1 }),
});
// 添加走廊
addCorridor(viewer);
// 清理资源，销毁viewer实例
return () => {
viewer.destroy();
};
}, []);
const addCorridor = (viewer) => {
viewer.entities.add({
name: 'corridor',
corridor: {
positions: Cesium.Cartesian3.fromDegreesArray([
73.66, 3.86,
73.66, 18.21,
97.03, 18.21,
97.03, 4.17,
103.51, 4.17,
103.51, 22.15,
108.22, 22.15,
108.22, 4.81,
124.74, 4.81,
124.74, 22.15,
130.59, 22.15,
130.59, 48.13,
98.58, 48.13,
98.58, 33.44,
91.11, 33.44,
91.11, 38.16,
75.14, 38.16,
75.14, 18.21,
73.66, 18.21 // 返回起点闭合走廊
]),
width: 100000, // 宽度必须设置
height: 200000, // 高度
extrudedHeight: 2000, // 拉伸高度
material: Cesium.Color.RED,
cornerType: Cesium.CornerType.BEVELED, // 拐角样式
granularity: Cesium.Math.RADIANS_PER_DEGREE, // 指定每个纬度和经度之间的距离
zIndex: 0 // 层级，当未定义height和extrudedHeight且道路为静态时才有效
}
});
viewer.entities.add({
name: 'corridor',
corridor: {
positions: Cesium.Cartesian3.fromDegreesArray([
-100.0, 40.0,
-105.0, 40.0,
-105.0, 35.0,
-110.0, 35.0,
-110.0, 40.0,
-115.0, 40.0,
]),
width: 100000, // 宽度必须设置
height: 200000, // 高度
extrudedHeight: 2000, // 拉伸高度
material: Cesium.Color.BLUE,
cornerType: Cesium.CornerType.BEVELED, // 拐角样式
granularity: Cesium.Math.RADIANS_PER_DEGREE, // 指定每个纬度和经度之间的距离
zIndex: 1 // 层级，当未定义height和extrudedHeight且道路为静态时才有效
}
});
};
return (
<div ref={cesiumContainerRef} style={{ width: '100%', height: '100vh' }} />
);
};
export default CesiumCorridor;
步骤 4: 在App组件中使用CesiumCorridor组件
在你的App.js中引入并使用CesiumCorridor组件。
import React from 'react';
import CesiumCorridor from './CesiumCorridor';
function App() {
return (
<div className="App">
<CesiumCorridor />
</div>
);
}
export default App;
步骤 5: 确保样式和资源加载
确保Cesium的样式文件widgets.css被正确加载，这通常在index.html或者通过npm安装时自动处理。
步骤 6: 运行你的React应用
确保你的React应用能够正确运行，并且Cesium Viewer和走廊的添加功能能够正常工作。
npm start
注意事项
清理资源：在
useEffect的返回函数中，我们调用了viewer.destroy()来清理资源，这是为了防止内存泄漏。CORS问题：如果你从不同的源加载数据，可能会遇到跨源资源共享（CORS）问题。确保服务器配置了正确的CORS策略。
Cesium版本：确保你使用的Cesium版本与代码兼容。不同版本的Cesium可能有不同的API。
通过以上步骤，你就可以在React环境中运行上述代码，实现在Cesium地图上添加3D走廊的功能。
博客：
https://blog.csdn.net/weixin_44857463/article/details/129157708
B站：
https://space.bilibili.com/610654927?spm_id_from=..0.0
