需求

测量两个点之间的高度

分析

直线,水平,垂直测量我们也叫高度的测量,大概原理就是空间两点垂直与地面画一个直角三角形,分别标出每条线的长度

//  添加标签
addLabel(centerPosition, text) {return this.viewer.entities.add(new Cesium.Entity({position: centerPosition,label: {text: text,font: '14px sans-serif',style: Cesium.LabelStyle.FILL_AND_OUTLINE, //FILL  FILL_AND_OUTLINE OUTLINEfillColor: Cesium.Color.YELLOW,showBackground: true, //指定标签后面背景的可见性backgroundColor: new Cesium.Color(0.165, 0.165, 0.165, 0.8), // 背景颜色backgroundPadding: new Cesium.Cartesian2(6, 6), //指定以像素为单位的水平和垂直背景填充paddingpixelOffset: new Cesium.Cartesian2(0, -25),disableDepthTestDistance: Number.POSITIVE_INFINITY}}));
},
// 添加点
addPoint(position) {return this.viewer.entities.add({position: position,point:{pixelSize: 10,color: Cesium.Color.YELLOW}});
},
// 添加线
addLine(position) {console.log(position);const lonlat = [];for (let index = 0; index < position.length; index++) {const longitude =  Cesium.Math.toDegrees(Cesium.Cartographic.fromCartesian(position[index]).longitude);const latitude =  Cesium.Math.toDegrees(Cesium.Cartographic.fromCartesian(position[index]).latitude);lonlat.push(longitude,latitude);}return this.viewer.entities.add({name: 'distance-line',polyline: {positions: Cesium.Cartesian3.fromDegreesArray(lonlat),width: 2,material: Cesium.Color.RED,// clampToGround: true}});
},
//逻辑代码如下
getLengthText(firstPoint, secondPoint) {// 计算距离var length = Cesium.Cartesian3.distance(firstPoint, secondPoint);if (length > 1000) {length = (length / 1000).toFixed(2) + " 公里";} else {length = length.toFixed(2) + " 米";}return length;
},
measureHeight() {let positions = [];var labelEntity_1 = null; // 标签实体var labelEntity_2 = null; // 标签实体var labelEntity_3 = null; // 标签实体// 注册鼠标左击事件this.viewer.screenSpaceEventHandler.setInputAction((clickEvent) => {var cartesian = this.viewer.scene.pickPosition(clickEvent.position); // 坐标// 存储第一个点if (positions.length == 0) {if(!cartesian){return false}positions.push(cartesian.clone());this.addPoint(cartesian);// 注册鼠标移动事件this.viewer.screenSpaceEventHandler.setInputAction((moveEvent) => {var movePosition = this.viewer.scene.pickPosition(moveEvent.endPosition); // 鼠标移动的点if(!movePosition){return false}if (positions.length >= 2) {positions.pop();positions.pop();positions.pop();var cartographic = Cesium.Cartographic.fromCartesian(movePosition);var height = Cesium.Cartographic.fromCartesian(positions[0]).height;var verticalPoint = Cesium.Cartesian3.fromDegrees(Cesium.Math.toDegrees(cartographic.longitude), Cesium.Math.toDegrees(cartographic.latitude), height);positions.push(verticalPoint);positions.push(movePosition);positions.push(positions[0]);// 绘制labelif (labelEntity_1) {this.viewer.entities.remove(labelEntity_1);this.entityCollection.splice(this.entityCollection.indexOf(labelEntity_1), 1);this.viewer.entities.remove(labelEntity_2);this.entityCollection.splice(this.entityCollection.indexOf(labelEntity_2), 1);this.viewer.entities.remove(labelEntity_3);this.entityCollection.splice(this.entityCollection.indexOf(labelEntity_3), 1);}// 计算中点var centerPoint_1 = Cesium.Cartesian3.midpoint(positions[0], positions[1], new Cesium.Cartesian3());// 计算距离var lengthText_1 = "水平距离：" + this.getLengthText(positions[0], positions[1]);labelEntity_1 = this.addLabel(centerPoint_1, lengthText_1);this.entityCollection.push(labelEntity_1);// 计算中点var centerPoint_2 = Cesium.Cartesian3.midpoint(positions[1], positions[2], new Cesium.Cartesian3());// 计算距离var lengthText_2 = "垂直距离：" + this.getLengthText(positions[1], positions[2]);labelEntity_2 = this.addLabel(centerPoint_2, lengthText_2);this.entityCollection.push(labelEntity_2);// 计算中点// var centerPoint_3 = Cesium.Cartesian3.midpoint(positions[2], positions[3], new Cesium.Cartesian3());// // 计算距离// var lengthText_3 = "直线距离：" + this.getLengthText(positions[2], positions[3]);// labelEntity_3 = this.addLabel(centerPoint_3, lengthText_3);// this.entityCollection.push(labelEntity_3);} else {var verticalPoint = new Cesium.Cartesian3(movePosition.x, movePosition.y, positions[0].z);positions.push(verticalPoint);positions.push(movePosition);positions.push(positions[0]);// 绘制线this.addLine(positions);}}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);} else {// 存储第二个点positions.pop();positions.pop();positions.pop();var cartographic = Cesium.Cartographic.fromCartesian(cartesian);var height = Cesium.Cartographic.fromCartesian(positions[0]).height;var verticalPoint = Cesium.Cartesian3.fromDegrees(Cesium.Math.toDegrees(cartographic.longitude), Cesium.Math.toDegrees(cartographic.latitude), height);positions.push(verticalPoint);positions.push(cartesian);positions.push(positions[0]);this.addPoint(cartesian);// 绘制线this.addLine(positions);this.viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);this.viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);}}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
},