基于Cesium+VUE实现的空间体体积计算功能组件，完整demo和源代码，代码未加密/未压缩，可直接调用运行

<template> <div id="cesiumContainer"> <div class="volume-group"> <span class="item-group"> <div v-for="item in up" :key="item.name" class="item"> 上顶点{{ item.name }}： <el-input v-model="item.coords" size="mini" placeholder="请输入坐标值" ></el-input> </div> </span> <span class="item-group"> <div v-for="item in down" :key="item.name" class="item"> 下顶点{{ item.name }}： <el-input v-model="item.coords" size="mini" placeholder="请输入坐标值" ></el-input> </div> </span> <span class="item-layer"> <el-checkbox v-model="upPolygon">上表面</el-checkbox> <el-checkbox v-model="downPolygon">下表面</el-checkbox> </span> <div>详细信息看控制台</div> </div> </div> </template> <script> import * as turf from "@turf/turf"; const Cesium = window.Cesium; let viewer = undefined; let upPolygonObj, downPolygonObj; export default { data() { return { up: [ { name: "a1", coords: "115.308846,39.302114,140.21", }, { name: "b1", coords: "115.309067,39.302592,128.42", }, { name: "c1", coords: "115.309595,39.302221,153.68", }, ], down: [ { name: "a2", coords: "115.308846,39.302114,64.54", }, { name: "b2", coords: "115.309067,39.302592,72.47", }, { name: "c2", coords: "115.309595,39.302221,51.16", }, ], upPos: [], downPos: [], upClipPos: [], //上表面最低点集合 downClipPos: [], //下表面最高点集合 upMinHight: -Infinity, //上表面最低点高度值 downMaxHight: Infinity, //下表面最高点高度值 upPolygon: true, downPolygon: true, upVolume: 0, centerVolume: 0, downVolume: 0, }; }, watch: { upPolygon(val) { if (upPolygonObj) { upPolygonObj.show = val; } }, downPolygon(val) { if (downPolygonObj) { downPolygonObj.show = val; } }, }, mounted() { let key = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwZDhhOThhNy0zMzUzLTRiZDktYWM3Ni00NGI5MGY2N2UwZDUiLCJpZCI6MjQzMjYsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODUwMzUwNDh9.DYuDF_RPKe5_8w849_y-sutM68LM51O9o3bTt_3rF1w"; Cesium.Ion.defaultAccessToken = key; window.viewer = viewer = new Cesium.Viewer("cesiumContainer", { imageryProvider: new Cesium.ArcGisMapServerImageryProvider({ url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer", }), // terrainProvider: this.Cesium.createWorldTerrain(), geocoder: true, homeButton: true, sceneModePicker: true, baseLayerPicker: true, navigationHelpButton: true, animation: true, timeline: true, fullscreenButton: true, vrButton: true, //关闭点选出现的提示框 selectionIndicator: false, infoBox: false, }); viewer._cesiumWidget._creditContainer.style.display = "none"; // 隐藏版权 this.initPoints(); }, methods: { //创建上下节点 initPoints() { // 绘制上顶点 for (let i = 0; i < this.up.length; i++) { const upEle = this.up[i]; const coords = upEle.coords.split(","); const x = Number(coords[0]); const y = Number(coords[1]); const z = Number(coords[2]); this.upPos.push({ x, y, z, }); viewer.entities.add( new Cesium.Entity({ name: "上顶点-" + upEle.name, show: true, position: Cesium.Cartesian3.fromDegrees(x, y, z), point: { pixelSize: 10, color: Cesium.Color.YELLOW, outlineColor: Cesium.Color.RED, outlineWidth: 3, }, label: { text: upEle.name, font: "14pt Source Han Sans CN", //字体样式 fillColor: Cesium.Color.YELLOW, //字体颜色 outlineWidth: 2, verticalOrigin: Cesium.VerticalOrigin.CENTER, //垂直位置 horizontalOrigin: Cesium.HorizontalOrigin.CENTER, //水平位置 pixelOffset: new Cesium.Cartesian2(0, -22), //偏移 }, }) ); } // 绘制下顶点 for (let n = 0; n < this.down.length; n++) { const downEle = this.down[n]; const coords = downEle.coords.split(","); const x = Number(coords[0]); const y = Number(coords[1]); const z = Number(coords[2]); this.downPos.push({ x, y, z }); viewer.entities.add( new Cesium.Entity({ name: "下顶点-" + downEle.name, show: true, position: Cesium.Cartesian3.fromDegrees(x, y, z), point: { pixelSize: 10, color: Cesium.Color.GREEN, outlineColor: Cesium.Color.RED, outlineWidth: 3, }, label: { text: downEle.name, font: "14pt Source Han Sans CN", //字体样式 fillColor: Cesium.Color.GREEN, //字体颜色 outlineWidth: 2, verticalOrigin: Cesium.VerticalOrigin.CENTER, //垂直位置 horizontalOrigin: Cesium.HorizontalOrigin.CENTER, //水平位置 pixelOffset: new Cesium.Cartesian2(0, 22), //偏移 }, }) ); } viewer.flyTo(viewer.entities); this.initUpAndDownPolygon(); }, //绘制顶底面 initUpAndDownPolygon() { //绘制上表面 const upPositions = []; for (let i = 0; i < this.up.length; i++) { const upEle = this.up[i]; const coords = upEle.coords.split(","); upPositions.push( Number(coords[0]), Number(coords[1]), Number(coords[2]) ); } upPolygonObj = viewer.entities.add({ name: "上表面", polygon: { hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights(upPositions), perPositionHeight: true, material: Cesium.Color.YELLOW.withAlpha(0.5), outline: true, outlineColor: Cesium.Color.BLACK, }, }); // 绘制下表面 const downPositions = []; for (let i = 0; i < this.down.length; i++) { const downEle = this.down[i]; const coords = downEle.coords.split(","); downPositions.push( Number(coords[0]), Number(coords[1]), Number(coords[2]) ); } downPolygonObj = viewer.entities.add({ name: "下表面", polygon: { hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights(downPositions), perPositionHeight: true, material: Cesium.Color.GREEN.withAlpha(0.5), outline: true, outlineColor: Cesium.Color.BLACK, }, }); this.clipUpByPoint(); }, // 上表面水平切割 clipUpByPoint() { this.upPos.sort(this.compare("z")); this.upMinHight = this.upPos[0].z; const upClipPoints = []; for (let i = 0; i < this.upPos.length; i++) { const upEle = this.upPos[i]; const x = upEle.x; const y = upEle.y; const z = this.upMinHight; this.upClipPos.push({ x, y, z }); upClipPoints.push(x, y, z); viewer.entities.add( new Cesium.Entity({ name: "上表面水平切割点-" + i, show: true, position: Cesium.Cartesian3.fromDegrees(x, y, z), point: { pixelSize: 20, color: Cesium.Color.BLUE, outlineColor: Cesium.Color.