【Cesium】【vue】空间查询——量距(测量距离)、量面(测量面积)

目录

• • 一.量距
  • 二.量面
  • 三.清除测量
  • 四.页面结构
  • 注意
  • 参考

一.量距

// 距离测量measureLineSpace() {this.removeMeasure();let _this = this;let viewer = this.viewer;// 取消双击事件-追踪该位置viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);this.distancehandler = new Cesium.ScreenSpaceEventHandler(viewer.scene._imageryLayerCollection);let positions = [];let poly = null;var distance = 0;var cartesian = null, floatingPointArray = [];this.distancehandler.setInputAction(function (movement) {let ray = viewer.camera.getPickRay(movement.endPosition);cartesian = viewer.scene.globe.pick(ray, viewer.scene);if (positions.length >= 2) {if (!Cesium.defined(poly)) {poly = new PolyLinePrimitive(positions);} else {positions.pop();// cartesian.y += (1 + Math.random());positions.push(cartesian);}distance = getSpaceDistance(positions);}}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);this.distancehandler.setInputAction(function (movement) {let ray = viewer.camera.getPickRay(movement.position);cartesian = viewer.scene.globe.pick(ray, viewer.scene);if (positions.length == 0) {positions.push(cartesian.clone());}positions.push(cartesian);//在三维场景中添加Labelvar textDisance = distance + "米";// console.log(textDisance + ",lng:" + cartographic.longitude/Math.PI*180.0);_this.floatingPoint = viewer.entities.add({name: '空间直线距离',position: positions[positions.length - 1],point: {pixelSize: 4,color: Cesium.Color.RED,outlineColor: Cesium.Color.WHITE,outlineWidth: 2,},label: {text: textDisance,font: '18px sans-serif',fillColor: Cesium.Color.GOLD,style: Cesium.LabelStyle.FILL_AND_OUTLINE,outlineWidth: 2,verticalOrigin: Cesium.VerticalOrigin.BOTTOM,pixelOffset: new Cesium.Cartesian2(20, -20),}});floatingPointArray.push(_this.floatingPoint);_this.distancepointArray = floatingPointArray;}, Cesium.ScreenSpaceEventType.LEFT_CLICK);this.distancehandler.setInputAction(function (movement) {_this.distancehandler.destroy(); //关闭事件句柄positions.pop(); //最后一个点无效}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);var PolyLinePrimitive = (function () {function _(positions) {this.options = {id: 'distancePolyline',name: '直线',polyline: {show: true,positions: [],material: Cesium.Color.CHARTREUSE,width: 2,clampToGround: true}};this.positions = positions;this._init();}_.prototype._init = function () {var _self = this;var _update = function () {return _self.positions;};//实时更新polyline.positionsthis.options.polyline.positions = new Cesium.CallbackProperty(_update, false);viewer.entities.add(this.options);};return _;})();//空间两点距离计算函数function getSpaceDistance(positions) {var distance = 0;for (var i = 0; i < positions.length - 1; i++) {var point1cartographic = Cesium.Cartographic.fromCartesian(positions[i]);var point2cartographic = Cesium.Cartographic.fromCartesian(positions[i + 1]);/**根据经纬度计算出距离**/var geodesic = new Cesium.EllipsoidGeodesic();geodesic.setEndPoints(point1cartographic, point2cartographic);var s = geodesic.surfaceDistance;//返回两点之间的距离s = Math.sqrt(Math.pow(s, 2) + Math.pow(point2cartographic.height - point1cartographic.height, 2));distance = distance + s;}return distance.toFixed(2);}},

二.量面

//测量空间面积measureAreaSpace() {this.removeMeasure();let _this = this;let viewer = this.viewer;// 取消双击事件-追踪该位置viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);// 鼠标事件this.handler = new Cesium.ScreenSpaceEventHandler(viewer.scene._imageryLayerCollection);var positions = [];var tempPoints = [];var polygon = null, areaText = null;var cartesian = null, areaArray = [];var floatingPoint;//浮动点this.handler.setInputAction(function (movement) {let ray = viewer.camera.getPickRay(movement.endPosition);cartesian = viewer.scene.globe.pick(ray, viewer.scene);if (positions.length >= 2) {if (!Cesium.defined(polygon)) {polygon = new PolygonPrimitive(positions);} else {positions.pop();positions.push(cartesian);}}}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);this.handler.setInputAction(function (movement) {let ray = viewer.camera.getPickRay(movement.position);cartesian = viewer.scene.globe.pick(ray, viewer.scene);if (positions.length == 0) {positions.push(cartesian.clone());}positions.push(cartesian);//在三维场景中添加点var cartographic = Cesium.Cartographic.fromCartesian(positions[positions.length - 1]);var longitudeString = Cesium.Math.toDegrees(cartographic.longitude);var latitudeString = Cesium.Math.toDegrees(cartographic.latitude);var heightString = cartographic.height;tempPoints.push({lon: longitudeString, lat: latitudeString, hei: heightString});floatingPoint = viewer.entities.add({name: '多边形面积',position: positions[positions.length - 1],point: {pixelSize: 5,color: Cesium.Color.RED,outlineColor: Cesium.Color.WHITE,outlineWidth: 2,heightReference: Cesium.HeightReference.CLAMP_TO_GROUND}});areaArray.push(floatingPoint);_this.areapointArray = areaArray;}, Cesium.ScreenSpaceEventType.LEFT_CLICK);this.handler.setInputAction(function (movement) {_this.handler.destroy();positions.pop();var textArea = getArea(tempPoints) + "平方公里";areaText = viewer.entities.add({name: '多边形面积',position: positions[positions.length - 1],point : {pixelSize : 5,color : Cesium.Color.RED,outlineColor : Cesium.Color.WHITE,outlineWidth : 2,heightReference:Cesium.HeightReference.CLAMP_TO_GROUND},label: {text: textArea,font: '18px sans-serif',fillColor: Cesium.Color.BLUE,style: Cesium.LabelStyle.FILL_AND_OUTLINE,outlineWidth: 2,verticalOrigin: Cesium.VerticalOrigin.BOTTOM,pixelOffset: new Cesium.Cartesian2(20, -40),heightReference: Cesium.HeightReference.CLAMP_TO_GROUND}});areaArray.push(areaText);_this.areapointArray = areaArray;}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);var radiansPerDegree = Math.PI / 180.0;//角度转化为弧度(rad)var degreesPerRadian = 180.0 / Math.PI;//弧度转化为角度//计算多边形面积function getArea(points) {var res = 0;//拆分三角曲面for (var i = 0; i < points.length - 2; i++) {var j = (i + 1) % points.length;var k = (i + 2) % points.length;var totalAngle = Angle(points[i], points[j], points[k]);var dis_temp1 = distance(positions[i], positions[j]);var dis_temp2 = distance(positions[j], positions[k]);res += dis_temp1 * dis_temp2 * Math.abs(Math.sin(totalAngle));// console.log(res);}return (res / 1000000.0).toFixed(4);}//角度function Angle(p1, p2, p3) {var bearing21 = Bearing(p2, p1);var bearing23 = Bearing(p2, p3);var angle = bearing21 - bearing23;if (angle < 0) {angle += 360;}return angle;}//方向function Bearing(from, to) {var lat1 = from.lat * radiansPerDegree;var lon1 = from.lon * radiansPerDegree;var lat2 = to.lat * radiansPerDegree;var lon2 = to.lon * radiansPerDegree;var angle = -Math.atan2(Math.sin(lon1 - lon2) * Math.cos(lat2), Math.cos(lat1) * Math.sin(lat2) - Math.sin(lat1) * Math.cos(lat2) * Math.cos(lon1 - lon2));if (angle < 0) {angle += Math.PI * 2.0;}angle = angle * degreesPerRadian;//角度return angle;}var PolygonPrimitive = (function () {function _(positions) {this.options = {id: 'areaPolygon',name: '多边形',polygon: {hierarchy: [],material: Cesium.Color.GREEN.withAlpha(0.5),heightReference:20000}};this.hierarchy = {positions};this._init();}_.prototype._init = function () {var _self = this;var _update = function () {return _self.hierarchy;};//实时更新polygon.hierarchythis.options.polygon.hierarchy = new Cesium.CallbackProperty(_update, false);viewer.entities.add(this.options);};return _;})();function distance(point1, point2) {var point1cartographic = Cesium.Cartographic.fromCartesian(point1);var point2cartographic = Cesium.Cartographic.fromCartesian(point2);//根据经纬度计算出距离var geodesic = new Cesium.EllipsoidGeodesic();geodesic.setEndPoints(point1cartographic, point2cartographic);var s = geodesic.surfaceDistance;//返回两点之间的距离s = Math.sqrt(Math.pow(s, 2) + Math.pow(point2cartographic.height - point1cartographic.height, 2));return s;}},

三.清除测量

// 清除测量数据removeMeasure() {let viewer = this.viewer;// 删除距离测量if (this.distancehandler) {this.distancehandler.destroy();}let entitys = this.distancepointArray;if (this.distancepointArray) {if (entitys.length > 0) {for (var i = 0; i < entitys.length; i++) {viewer.entities.remove(entitys[i]);}}}if (viewer.entities.getById("distancePolyline"))viewer.entities.removeById("distancePolyline");// 删除面积测量if (this.areahandler) {this.areahandler.destroy();}let areaentitys = this.areapointArray;if (this.areapointArray) {if (areaentitys.length > 0) {for (var i = 0; i < areaentitys.length; i++) {viewer.entities.remove(areaentitys[i]);}}}if (viewer.entities.getById("areaPolygon"))viewer.entities.removeById("areaPolygon");if (viewer.entities.getById("measurePoint"))viewer.entities.removeById("measurePoint");}

四.页面结构

<!-- 空间量算 --><div id="toolbar" class="param-container tool-bar" ><button type="button" id="distance" class="button black" @click="measureLineSpace" >测量距离</button><button id="area" class="button black" @click="measureAreaSpace">测量面积</button><!--<button type="button" id="height" class="button black">测高</button>--><button type="button" id="clear" class="button black" @click="removeMeasure">清除</button> </div>

注意

• 可能会出现类似viewer is not define等错误，要注意this指向的问题。
• 如果遇到问题可以打断点调试

参考

• https://blog.csdn.net/weixin_40187450/article/details/110304674

总结

以上是生活随笔为你收集整理的【Cesium】【vue】空间查询——量距(测量距离)、量面(测量面积)的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。