目錄

• • 一.量距
  • 二.量面
  • 三.清除測量
  • 四.頁面結構
  • 注意
  • 參考

一.量距

// 距離測量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】空间查询——量距(测量距离)、量面(测量面积)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。