12、polygon 多边形
Cesium中的Polygon是用来在地球表面上绘制多边形的一种方式。下面我将用简单的语言解释Polygon的属性和方法，并以表格形式展示。
属性
| 属性名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| show | boolean | true | 是否显示多边形。 |
| hierarchy | Property|PolygonHierarchy | 多边形的层次结构，定义了多边形的外边界和任何嵌套的孔。 | |
| height | Property|number | 0 | 多边形相对于椭球体表面的高度。 |
| heightReference | Property|HeightReference | HeightReference.NONE | 高度参考类型，可以是相对于椭球体、地形或其他。 |
| extrudedHeight | Property|number | 多边形挤出面相对于椭球体表面的高度。 | |
| extrudedHeightReference | Property|HeightReference | HeightReference.NONE | 挤出高度的参考类型。 |
| stRotation | Property|number | 0.0 | 多边形纹理从北方向开始的逆时针旋转角度。 |
| granularity | Property|number | CesiumMath.RADIANS_PER_DEGREE | 经纬度点之间的夹角，用于确定采样位置的数量。 |
| fill | boolean | true | 是否用提供的材料填充多边形。 |
| material | MaterialProperty|Color | Color.WHITE | 用于填充多边形的材料。 |
| outline | boolean | false | 是否绘制多边形的轮廓线。 |
| outlineColor | Property|Color | Color.BLACK | 轮廓线的颜色。 |
| outlineWidth | Property|number | 1.0 | 轮廓线的宽度。注意：在Windows平台上的所有主流浏览器都会忽略此属性。 |
| perPositionHeight | boolean | false | 是否使用每个位置的高度。 |
| closeTop | boolean | true | 是否关闭挤出多边形的顶部。 |
| closeBottom | boolean | true | 是否关闭挤出多边形的底部。 |
| arcType | Property|ArcType | ArcType.GEODESIC | 多边形边缘必须遵循的线型。 |
| shadows | Property|ShadowMode | ShadowMode.DISABLED | 多边形是否投射或接收阴影。 |
| distanceDisplayCondition | Property|DistanceDisplayCondition | 相机距离多边形多远时显示多边形。 | |
| classificationType | Property|ClassificationType | ClassificationType.BOTH | 多边形在地面上时是分类地形、3D瓦片还是两者。 |
| zIndex | Property|number | 0 | 用于排序地面几何体的zIndex属性。只对常量多边形有效，且未指定高度或挤出高度时有效。 |
方法
| 方法名称 | 参数 | 返回类型 | 描述 |
|---|---|---|---|
| clone | result: PolygonGraphics | PolygonGraphics | 复制此实例，将结果存储到提供的对象中，或者如果未提供则创建一个新实例。 |
| merge | source: PolygonGraphics | void | 将此对象上每个未分配的属性分配给提供的源对象具有相同属性。 |
这些属性和方法可以帮助你控制多边形的外观和行为，比如是否显示多边形、多边形的颜色和轮廓、以及多边形在何时可见等。通过使用这些属性和方法，可以在Cesium中创建出各种动态的多边形效果，比如表示国家边界、湖泊或者任何其他区域。
代码：
// 定义一个名为addPolygon的函数，它接受一个参数viewer，这个参数是一个Cesium Viewer实例
addPolygon(viewer) {
// 使用viewer的entities.add方法添加一个新的实体到场景中
viewer.entities.add({
// 为实体设置一个名称，这里命名为"Blue polygon with holes"
name: "Blue polygon with holes",
// 定义一个多边形图形的属性
polygon: {
// 定义多边形及其孔的线性环的层次结构
hierarchy: {
// 定义多边形的外边界，使用Cesium.Cartesian3.fromDegreesArray方法从经纬度数组创建一个三维坐标数组
positions: Cesium.Cartesian3.fromDegreesArray([
-99.0, 30.0, // 点1: 经度-99.0，纬度30.0
-85.0, 30.0, // 点2: 经度-85.0，纬度30.0
-85.0, 40.0, // 点3: 经度-85.0，纬度40.0
-99.0, 40.0 // 点4: 经度-99.0，纬度40.0
]),
// 定义多边形的孔，每个孔也是一个多边形
holes: [
// 第一个孔
{
// 定义孔的边界
positions: Cesium.Cartesian3.fromDegreesArray([
-97.0, 31.0, // 点1: 经度-97.0，纬度31.0
-97.0, 39.0, // 点2: 经度-97.0，纬度39.0
-87.0, 39.0, // 点3: 经度-87.0，纬度39.0
-87.0, 31.0 // 点4: 经度-87.0，纬度31.0
]),
// 定义孔内部的更小的孔
holes: [
// 第一个孔内部的更小的孔
{
positions: Cesium.Cartesian3.fromDegreesArray([
-95.0, 33.0, // 点1: 经度-95.0，纬度33.0
-89.0, 33.0, // 点2: 经度-89.0，纬度33.0
-89.0, 37.0, // 点3: 经度-89.0，纬度37.0
-95.0, 37.0 // 点4: 经度-95.0，纬度37.0
]),
holes: [
// 第一个孔内部的更小的孔内部的最小孔
{
positions: Cesium.Cartesian3.fromDegreesArray([
-93.0, 34.0, // 点1: 经度-93.0，纬度34.0
-91.0, 34.0, // 点2: 经度-91.0，纬度34.0
-91.0, 36.0, // 点3: 经度-91.0，纬度36.0
-93.0, 36.0 // 点4: 经度-93.0，纬度36.0
]),
},
],
},
],
},
],
},
// 设置多边形的材质，这里使用半透明的蓝色
material: Cesium.Color.BLUE.withAlpha(0.8),
// 设置多边形的高度，这里设置为0，表示多边形在地表上
height: 0,
// 设置是否绘制多边形的轮廓，true表示绘制
outline: true,
// 设置对于拉伸的图形是否关闭顶部，true表示关闭
closeTop: true,
// 设置对于拉伸的图形是否关闭底部，true表示关闭
closeBottom: true,
// 设置拉伸多边形的高度，这里设置为1000000米
extrudedHeight: 1000000,
// 设置拉伸多边形的高度参考，Cesium.HeightReference.CLAMP_TO_EDGE表示多边形贴地
extrudedHeightReference: Cesium.HeightReference.CLAMP_TO_EDGE
},
});
// 使用viewer.zoomTo方法将视图缩放到新添加的实体，使其在视图中居中显示
viewer.zoomTo(viewer.entities);
}
要在Vue代码环境中运行上述addPolygon函数
步骤 1: 安装Cesium
首先，确保你的Vue项目中已经安装了Cesium。如果还没有安装，可以通过npm或yarn来安装：
npm install cesium
或者
yarn add cesium
步骤 2: 创建Vue组件
创建一个新的Vue组件，用于承载Cesium Viewer。例如，你可以创建一个名为CesiumPolygonViewer.vue的文件。
步骤 3: 引入Cesium
在Vue组件中引入Cesium库：
<template>
<div ref="cesiumContainer" style="width: 100%; height: 100vh;"></div>
</template>
<script>
import * as Cesium from 'cesium/Cesium';
import 'cesium/Widgets/widgets.css'; // 引入Cesium的样式文件
export default {
name: 'CesiumPolygonViewer',
mounted() {
this.initCesium();
},
methods: {
initCesium() {
// 初始化Cesium Viewer
const viewer = new Cesium.Viewer(this.$refs.cesiumContainer);
// 添加多边形实体
this.addPolygon(viewer);
},
addPolygon(viewer) {
viewer.entities.add({
name: "Blue polygon with holes",
polygon: {
hierarchy: {
positions: Cesium.Cartesian3.fromDegreesArray([
-99.0, 30.0,
-85.0, 30.0,
-85.0, 40.0,
-99.0, 40.0
]),
holes: [
{
positions: Cesium.Cartesian3.fromDegreesArray([
-97.0, 31.0,
-97.0, 39.0,
-87.0, 39.0,
-87.0, 31.0
]),
holes: [
{
positions: Cesium.Cartesian3.fromDegreesArray([
-95.0, 33.0,
-89.0, 33.0,
-89.0, 37.0,
-95.0, 37.0
]),
holes: [
{
positions: Cesium.Cartesian3.fromDegreesArray([
-93.0, 34.0,
-91.0, 34.0,
-91.0, 36.0,
-93.0, 36.0
]),
},
],
},
],
},
],
},
material: Cesium.Color.BLUE.withAlpha(0.8),
height: 0,
outline: true,
closeTop: true,
closeBottom: true,
extrudedHeight: 1000000,
extrudedHeightReference: Cesium.HeightReference.CLAMP_TO_EDGE
},
});
viewer.zoomTo(viewer.entities);
}
}
};
</script>
步骤 4: 使用CesiumPolygonViewer组件
在你的Vue应用中的任何地方引入并使用CesiumPolygonViewer组件：
<template>
<div id="app">
<CesiumPolygonViewer />
</div>
</template>
<script>
import CesiumPolygonViewer from './components/CesiumPolygonViewer.vue';
export default {
name: 'App',
components: {
CesiumPolygonViewer
}
};
</script>
步骤 5: 调试和测试
运行Vue应用，并确保Cesium Viewer正确加载，并且多边形实体正确显示。
博客：
https://blog.csdn.net/weixin_44857463/article/details/129157708
B站：
https://space.bilibili.com/610654927?spm_id_from=..0.0
