cesium-水平测距

cesium测量两点间的距离




DrawStraightLineDistance.js
/* 绘制直线  水平距离 */
class DrawStraightLineDistance {
	constructor(arg) {
		this.viewer = arg.viewer;
		this.Cesium = arg.Cesium;
		this.callback = arg.callback;
		this._polyline = null; //活动线
		this._polylineLast = null; //最后一条线
		this._positions = [];  //活动点
		this._entities_point = [];  //脏数据
		this._entities_md_point = [];  //脏数据
		this._entities_md1_point = [];  //脏数据
		this._entities_line = [];  //脏数据
		this._polylineData = null; //用于构造线数据
	}

	//返回最后活动线
	get line() {
		return this._polylineLast;
	}

	//返回线数据用于加载线
	getData() {
		return this._polylineData;
	}

	//加载线
	loadPolyline(data) {
		let that = this;
		let polyline = that.viewer.entities.add({
			polyline: {
				positions: data,
				show: true,
				material: that.Cesium.Color.RED,
				width: 3,
				clampToGround: true
			}
		});
		return polyline;
	}

	//开始创建
	startCreate() {
		let that = this;
		that.handler = new that.Cesium.ScreenSpaceEventHandler(that.viewer.scene.canvas);
		that.handler.setInputAction(function (evt) { //单击开始绘制
			//屏幕坐标转地形上坐标
			let cartesian = that.getCatesian3FromPX(evt.position);
			if (that._positions.length === 0) {
				that._positions.push(cartesian.clone());
			}
			that._positions.push(cartesian);
			that.createPoint(cartesian);// 绘制点
			if (that._positions.length > 2) {
				if (!that._polyline) {
					return;
				}
				that._positions.pop();
				// that._positions.push(cartesian);
				that.createPoint(cartesian);// 绘制点
				that._polylineData = that._positions.concat();
				that.viewer.entities.remove(that._polyline); //移除
				that._polyline = null;
				that._positions = [];
				let line = that.loadPolyline(that._polylineData); //加载线
				that._entities_line.push(line);
				that._polylineLast = line;
				if (typeof that.callback == "function") {
					that.callback(that._polylineData);
				}
				for (let i = 0; i < that._entities_md1_point.length; i++) {
					that.viewer.entities.remove(that._entities_md1_point[i]);
				}
				let distance = that.Cesium.Cartesian3.distance(that._polylineData[0], that._polylineData[1]).toFixed(2);

				// let midPoint = that.Cesium.Cartesian3.midpoint(that._polylineData[0], that._polylineData[1]);
				let midPoint = that.Cesium.BoundingSphere.fromPoints(that._polylineData).center
				that.createMdPoint(midPoint, distance);
				that.handler.destroy();
				that.handler = null;
			}
		}, that.Cesium.ScreenSpaceEventType.LEFT_CLICK);
		this.handler.setInputAction(function (evt) { //移动时绘制线
			if (that._positions.length < 1) return;
			let cartesian = that.getCatesian3FromPX(evt.endPosition);
			if (!that.Cesium.defined(that._polyline)) {
				that._polyline = that.createPolyline();
			}
			if (that._polyline) {
				that._positions.pop();
				that._positions.push(cartesian);
			}
			let distance = that.Cesium.Cartesian3.distance(that._positions[0], that._positions[1]).toFixed(2);

			// let midPoint = that.Cesium.Cartesian3.midpoint(that._polylineData[0], that._polylineData[1]);
			let midPoint = that.Cesium.BoundingSphere.fromPoints(that._positions).center
			that.createMdPoint11(midPoint, distance);
		}, that.Cesium.ScreenSpaceEventType.MOUSE_MOVE);
	}

	//创建点
	createPoint(cartesian) {
		let that = this;
		let point = this.viewer.entities.add({
			position: cartesian,
			point: {
				pixelSize: 10,
				color: that.Cesium.Color.YELLOW,
			}
		});
		that._entities_point.push(point);
		return point;
	}

	//创建点
	createMdPoint(cartesian, distance) {
		let that = this;
		let point = this.viewer.entities.add({
			position: cartesian,
			point: {
				pixelSize: 1,
				color: that.Cesium.Color.YELLOW,
			},
			label: {
				text: '水平距离:' + distance + '米',    //描述内容
				font: '14px Sans-Serif',   //字体大小 类型
				fillColor: that.Cesium.Color.fromCssColorString('#ffffff'),  //颜色
				outlineColor: that.Cesium.Color.GOLD,
				//设置背景颜色透明
				backgroundColor: new that.Cesium.Color(0, 0, 0, 0.7),
				//打开背景  打开背景 (不会被线段覆盖)
				showBackground: true,
				// scaleByDistance: new that.Cesium.NearFarScalar(1000, 1.0, 2000, 0.01),
				// disableDepthTestDistance: Number.POSITIVE_INFINITY
			}
		});
		that._entities_md_point.push(point);
		return point;
	}

	//创建点
	createMdPoint11(cartesian, distance) {
		let that = this;
		for (let i = 0; i < that._entities_md1_point.length; i++) {
			that.viewer.entities.remove(that._entities_md1_point[i]);
		}
		let point = this.viewer.entities.add({
			position: cartesian,
			point: {
				pixelSize: 1,
				color: that.Cesium.Color.YELLOW,
			},
			label: {
				text: '水平距离:' + distance + '米',    //描述内容
				font: '14px Sans-Serif',   //字体大小 类型
				fillColor: that.Cesium.Color.fromCssColorString('#ffffff'),  //颜色
				outlineColor: that.Cesium.Color.GOLD,
				//设置背景颜色透明
				backgroundColor: new that.Cesium.Color(0, 0, 0, 0.7),
				//打开背景  打开背景 (不会被线段覆盖)
				showBackground: true,
				// scaleByDistance: new that.Cesium.NearFarScalar(1000, 1.0, 2000, 0.01),
				// disableDepthTestDistance: Number.POSITIVE_INFINITY
			}
		});
		that._entities_md1_point.push(point);
		return point;
	}

	//创建线
	createPolyline() {
		let that = this;
		let polyline = this.viewer.entities.add({
			polyline: {
				//使用cesium的peoperty
				positions: new that.Cesium.CallbackProperty(function () {
					return that._positions
				}, false),
				show: true,
				material: that.Cesium.Color.RED,
				width: 3,
				clampToGround: true
			}
		});
		that._entities_line.push(polyline);
		return polyline;
	}

	//销毁
	destroy() {
		if (this.handler) {
			this.handler.destroy();
			this.handler = null;
		}
	}

	//清空实体对象
	clear() {
		for (let i = 0; i < this._entities_point.length; i++) {
			this.viewer.entities.remove(this._entities_point[i]);
		}
		for (let i = 0; i < this._entities_md_point.length; i++) {
			this.viewer.entities.remove(this._entities_md_point[i]);
		}
		for (let i = 0; i < this._entities_md1_point.length; i++) {
			this.viewer.entities.remove(this._entities_md1_point[i]);
		}
		for (let i = 0; i < this._entities_line.length; i++) {
			this.viewer.entities.remove(this._entities_line[i]);
		}
		this._polyline = null;
		this._positions = [];
		this._entities_point = [];  //脏数据
		this._entities_md_point = [];  //脏数据
		this._entities_md1_point = [];  //脏数据
		this._entities_line = [];  //脏数据
		this._polylineData = null; //用于构造线数据
		this._polylineLast = null;
		this.destroy();
	}

	getCatesian3FromPX(px) {
		let cartesian;
		let ray = this.viewer.camera.getPickRay(px);
		if (!ray) return null;
		cartesian = this.viewer.scene.globe.pick(ray, this.viewer.scene);
		return cartesian;
	}
}

export default DrawStraightLineDistance

效果图 

InitCesiumHide.js

import * as Cesium from "cesium";

class InitCesiumHide {

	constructor(cesiumContainer, options) {
		this.cesiumContainer = cesiumContainer;
	}

	initViewer(options) {
		Cesium.Ion.defaultAccessToken = 'token';
		// 西南东北,默认显示中国
		Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(90, -20, 110, 90);
		return new Cesium.Viewer(this.cesiumContainer, {
			animation: false, // 隐藏动画控件
			baseLayerPicker: false, // 隐藏图层选择控件
			fullscreenButton: false, // 隐藏全屏按钮
			vrButton: false, // 隐藏VR按钮,默认false
			geocoder: false, // 隐藏地名查找控件  地理编码
			homeButton: false, // 隐藏Home按钮
			infoBox: false, // 隐藏点击要素之后显示的信息窗口
			sceneModePicker: false, // 隐藏场景模式选择控件
			selectionIndicator: false, // 显示实体对象选择框,默认true
			timeline: false, // 隐藏时间线控件
			navigationHelpButton: false, // 隐藏帮助按钮
			scene3DOnly: true, // 每个几何实例将只在3D中呈现,以节省GPU内存
			shouldAnimate: true, // 开启动画自动播放
			sceneMode: 3, // 初始场景模式 1:2D 2:2D循环 3:3D,默认3
			requestRenderMode: true, // 减少Cesium渲染新帧总时间并减少Cesium在应用程序中总体CPU使用率
			...options
		});
	}
}

export default InitCesiumHide

 

你可能感兴趣的:(cesium,vue,js,vue.js,javascript,elementui,cesium)