cesium空间距离测量,数据相对准确,动态更新画的线

参考了:https://blog.csdn.net/weixin_33774883/article/details/87495638
绘制点线面。
https://blog.csdn.net/qq_27532167/article/details/83346893
空间距离测量
主要是去掉了贴地,免得画上去的元素被地形盖住,加上线的动态更新,而不是画完了才能看见线。

			//获取俩点的距离,返回公里单位值
			getLineDis(startCartographic, endCartographic) {
				//使用cesium的对象中的方法获取距离数据,而不是根据坐标转换计算,
				var geodesic = new Cesium.EllipsoidGeodesic();
				geodesic.setEndPoints(startCartographic, endCartographic);
				var lengthInMeters = Math.round(geodesic.surfaceDistance*100)/100;//数学,四舍五入,
				return lengthInMeters;//单位米
			},
			//距离累加
			sum(arr) {
				var s = 0;
				for (var i = arr.length - 1; i >= 0; i--) {
					s =Number(s) + Number(arr[i]);
				}
				return s;
			},
			//画线
			drawLineString(callback){
				var isDraw = this.isDraw//是否是画线操作
				var disNums = []; //线路长度之和
				var _this = this;
				var polylinePath = [];  //点集合,存放当前点和上一个点
				var PolyLinePrimitive = (function () {
					function _(positions) {
						this.options = {
							id:"lineEntity",
							polyline: {
								positions: [],
								material: Cesium.Color.RED.withAlpha(0.5),
								width:3
							}
						};
						this.positions = positions;
						this._init();
					}
					_.prototype._init = function () {
						var _self = this;
						var _update = function () {
							return _self.positions;
						};
						//实时更新polyline.positions
						this.options.polyline.positions = new Cesium.CallbackProperty(_update, false);
						_this.viewer.entities.add(this.options);
					};
					return _;
				})();
				var handler = new Cesium.ScreenSpaceEventHandler(_this.viewer.scene.canvas);
				var positions = [];
				var poly = undefined;
				//鼠标左键单击画点
				handler.setInputAction(function (movement) {

					let ray=_this.viewer.camera.getPickRay(movement.position),
						cartesians=_this.viewer.scene.globe.pick(ray,_this.viewer.scene),
						cartographic=Cesium.Cartographic.fromCartesian(cartesians),
						lng=Cesium.Math.toDegrees(cartographic.longitude),//经度值
						lat=Cesium.Math.toDegrees(cartographic.latitude),//纬度值
						mapPosition={x:lng,y:lat,z:cartographic.height},//cartographic.height的值为地形高度。
						//把三维坐标转成笛卡尔坐标,供添加实体时使用
						newposition = Cesium.Cartesian3.fromDegrees(mapPosition.x,mapPosition.y,mapPosition.z);
					if (positions.length == 0) {
						positions.push(newposition.clone());
					}
					positions.push(newposition);
					var viewer = _this.viewer
					isDraw = true;
					//世界坐标转地理坐标(弧度)
					if (cartographic) {
						polylinePath.push(cartographic); //加点
						if (isDraw && polylinePath.length == 1) {
							var strartpoint = viewer.entities.add(
								{
									position: newposition,
									point: {
										color: Cesium.Color.WHITE,
										pixelSize: 3,
									},
									label: {
										text: "起点",
										font: '14pt monospace',
									}
								}
							);
						}
						if (isDraw && polylinePath.length > 1) {
							var text = 0;
							text = _this.sum(disNums) + Number(_this.getLineDis(polylinePath[0], polylinePath[1]));
							disNums.push(_this.getLineDis(polylinePath[0], polylinePath[1]));
							var temppoint;
							if(text<1000){
								temppoint = viewer.entities.add(
									{
										position: newposition,
										point: {
											color: Cesium.Color.WHITE,
											pixelSize: 3,
										},
										label: {
											text: text.toFixed(2) + '米',
											font: '14pt monospace',
										}
									}
								);
							}else if(text>=1000){
								temppoint = viewer.entities.add(
									{
										position: newposition,
										point: {
											color: Cesium.Color.WHITE,
											pixelSize: 3,
										},
										label: {
											text: ((text/1000).toFixed(2)) + '公里',
											font: '14pt monospace',
										}
									}
								);
							}
							var lastpoint = polylinePath[polylinePath.length - 1];
							polylinePath = [lastpoint];
							viewer.trackedEntity = undefined;
						}
					}
				}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
				//鼠标移动
				handler.setInputAction(function (movement) {
					let ray=_this.viewer.camera.getPickRay(movement.endPosition),
						cartesians=_this.viewer.scene.globe.pick(ray,_this.viewer.scene),
						cartographic=Cesium.Cartographic.fromCartesian(cartesians),
						lng=Cesium.Math.toDegrees(cartographic.longitude),//经度值
						lat=Cesium.Math.toDegrees(cartographic.latitude),//纬度值
						mapPosition={x:lng,y:lat,z:cartographic.height},//cartographic.height的值为地形高度。
						//把三维坐标转成笛卡尔坐标,供添加实体时使用
						newposition = Cesium.Cartesian3.fromDegrees(mapPosition.x,mapPosition.y,mapPosition.z);
					var cartesian = newposition
					if (positions.length >= 2) {
						if (!Cesium.defined(poly)) {
							poly = new PolyLinePrimitive(positions);
						} else {
							if(cartesian != undefined){
								positions.pop();
								cartesian.y += (1 + Math.random());
								positions.push(cartesian);
							}
						}
					}
				}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
				//单击鼠标右键结束画线
				handler.setInputAction(function (movement) {
					handler.destroy();
					callback(positions);
				}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
			},
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值