JT-CIM-SDK/src/jtMap3d/Widgets/Roaming/Roaming.js

/*
 * @Description: 漫游
 * @Version: 1.0
 * @Author: joy
 * @Date: 2023-04-12 21:42:26
 * @LastEditors: joy
 * @LastEditTime: 2023-04-13 16:32:25
 */
export default class Roaming {
	/**
	 * 创建一个漫游实例
	 * @param {Object} viewer 三维场景viewer对象
	 * @param {Array<Cesium.Cartesian3>/Array<[lng,lat,height]>} positions 坐标串,点集合
	 * @param {Object} options 具有以下属性:
	 * @param {Number} options.time 漫游时间
	 * @param {Number} options.speed 速度
	 * @param {Number} options.followedX 距离运动点的距离（后方） 
	 * @param {Number} options.followedZ 距离运动点的高度（上方）
	 * @param {Number} options.height 高度差
	 * @param {Number} options.role 0自由模式 1跟随模式 2第一视角 3上帝视角
	 * 第一人称摄像头放置在主角的前面
	 * 第三人称摄像头放置在主角的背后
	 * 
	 * @param {Object} [options.model] model的样式，具有以下属性:
	 * @param {Number} [options.model.url] 模型的url
	 * 
	 * @param {Object} [options.billboard] 广告牌的样式，具有以下属性:
	 * @param {Number} [options.billboard.imgUrl] 广告牌图片
	 * @param {Number} [options.billboard.scale=1] 尺寸
	 * @param {Object} [options.billboard.scaleByDistance] 距离相机的距离缩放点。
	 * @param {Number} [options.billboard.scaleByDistance.near=0] 相机范围的下界。
	 * @param {String} [options.billboard.scaleByDistance.nearValue=0] 相机范围下界的值。
	 * @param {String} [options.billboard.scaleByDistance.far=1] 相机范围的上限。
	 * @param {Number} [options.billboard.scaleByDistance.farValue=0] 该值位于摄像机范围的上界。
	 * 
	 * @param {Object} [options.point] point的样式，具有以下属性:
	 * @param {Number} [options.point.pixelSize=10] 指定点的大小，以像素为单位
	 * @param {Array} [options.point.color=[255,255,255,0]] 点位颜色,颜色数组,[0~255,0~255,0~255,0~1],[red 红色,green 绿色,blue 蓝色,alpha 透明度]
	 * @param {String} [options.point.outlineColor=[255,255,255,0]] 指定点轮廓的颜色,,颜色数组,[0~255,0~255,0~255,0~1],[red 红色,green 绿色,blue 蓝色,alpha 透明,
	 * @param {Number} [options.point.outlineWidth=0] 指定点轮廓的宽度
	 * 
	 * @param {Object} [options.label] label的样式，具有以下属性:
	 * @param {Number} [options.label.text=""] 文字
	 * @param {String} [options.label.font="24px Helvetica"] 字体样式
	 * @param {String} [options.label.fillColor=[255,255,255,0]] 字体颜色
	 * @param {String} [options.label.outlineColor=[255,255,255,0]] 字体边框颜色
	 * @param {Number} [options.label.outlineWidth=1] 边框宽度	
	 * @param {Number} [options.label.showBackground=false] 是否显示背景颜色	
	 * @param {Number} [options.label.backgroundColor=[255,255,255,0]] 背景颜色		
	 * @param {Number} [options.label.pixelOffset] 偏移像素
	 * @param {Number} [options.label.pixelOffset.x=0] 横向偏移像素
	 * @param {Number} [options.label.pixelOffset.y=0] 纵向偏移像素
	 * @param {Number} [options.label.scale=1] 尺寸
	 * @param {Number} [options.label.scaleByDistance] 相机范围
	 * @param {Number} [options.label.scaleByDistance.near=1.5e2] 相机范围的下界。
	 * @param {String} [options.label.scaleByDistance.nearValue=1] 相机范围下界的值。
	 * @param {String} [options.label.scaleByDistance.far=2400] 相机范围的上限。
	 * @param {Number} [options.label.scaleByDistance.farValue=0] 该值位于摄像机范围的上界。
	 * @memberof Roaming
	 */
	constructor(viewer, positions, options) {
		if (!viewer) throw new Cesium.DeveloperError('no viewer object!');
		if (!positions) throw new Cesium.DeveloperError('no positions Array!');

		this.viewer = viewer;
		this.entity = undefined;

		options = options || {};
		options.time = Cesium.defaultValue(options.time, 360);
		options.speed = Cesium.defaultValue(options.speed, 10);
		options.isPathShow = Cesium.defaultValue(options.isPathShow, true);
		options.height = Cesium.defaultValue(options.height, 5);
		options.role = Cesium.defaultValue(options.role, 1);
		options.followedX = Cesium.defaultValue(options.followedX, 50);
		options.followedZ = Cesium.defaultValue(options.followedZ, 10);

		this.time = options.time;
		this.speed = options.speed;
		this.isPathShow = options.isPathShow;
		this.height = options.height;
		this.role = options.role;
		this.followedX = options.followedX;
		this.followedZ = options.followedZ;

		this.model = options.model;
		this.billboard = options.billboard;
		this.point = options.point;
		this.label = options.label;

		this.property = this.ComputeRoamingLineProperty(positions, this.time);
	}

	/**
	 * @ignore
	 * @param {*} Lines 点集合
	 * @param {*} time 漫游时间
	 * @returns
	 * @memberof Roaming
	 */
	ComputeRoamingLineProperty(Lines, time) {
		let _self = this;

		let positions = [];
		if (Lines[0] instanceof Cesium.Cartesian3) {
			positions = Lines;
		} else {
			positions = Lines.map(point => {
				return Cesium.Cartesian3.fromDegrees(point[0], point[1], point[2] || 0);
			});
		}

		//总距离
		let distance = [];
		for (let i = 0; i < positions.length - 1; i++) {
			let dis = Cesium.Cartesian3.distance(positions[i], positions[i + 1])
			distance.push(dis)
		}

		//点与点之间间隔时间
		let times = [Cesium.JulianDate.fromDate(new Date())]
		times.push(Cesium.JulianDate.addSeconds(times[0], time, new Cesium.JulianDate()))
		for (let i = 1; i < positions.length - 1; i++) {
			let s = Cesium.JulianDate.addSeconds(times[i], time * (distance[i] / distance[0]), new Cesium.JulianDate())
			times.push(s)
		}

		//一种属性，其值在给定时间内从提供的样本集和指定的插值算法和插值度中插值。
		let oriSamples = new Cesium.SampledProperty(Cesium.Cartesian3);
		oriSamples.addSamples(times, positions);

		let startTime = times[0]; // 起始时间
		let stopTime = times[times.length - 1]; // 结束时间
		this.viewer.clock.startTime = startTime.clone(); // 设置始时钟始时间
		this.viewer.clock.stopTime = stopTime.clone(); // 设置始终停止时间
		this.viewer.clock.currentTime = startTime.clone(); // 设置时钟当前时间
		this.viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; //循环执行
		this.viewer.clock.multiplier = this.speed; // 时间速率，数字越大时间过的越快

		// 计算提供的实例之间的天数差。
		let timeOfResolution = 6;
		let samplesNum = Math.floor(
			Cesium.JulianDate.secondsDifference(stopTime, startTime) / timeOfResolution
		);

		let sampledPositions = [];
		let sampledTimes = [];
		for (let i = 0; i < samplesNum + 1; i++) {
			let sampleTime = Cesium.JulianDate.addSeconds(
				startTime,
				i * timeOfResolution,
				new Cesium.JulianDate()
			);
			let tmpPos = oriSamples.getValue(sampleTime);
			sampledPositions.push(Cesium.Cartographic.fromCartesian(tmpPos));
			sampledTimes.push(sampleTime);
		}

		let promise = Cesium.sampleTerrainMostDetailed(
			this.viewer.terrainProvider,
			sampledPositions
		).then(updatedPositions => {

			let carPositionProperty = new Cesium.SampledPositionProperty();

			//高度
			for (let i = 0; i < sampledPositions.length; i++) {
				sampledPositions[i].height = sampledPositions[i].height + this.height
			}

			for (let i = 0; i < samplesNum + 1; i++) {
				carPositionProperty.addSample(
					sampledTimes[i],
					Cesium.Ellipsoid.WGS84.cartographicToCartesian(sampledPositions[i])
				);
			}

			var position = carPositionProperty;
			this.InitRoaming(position, startTime, stopTime, this.isPathShow)
		});
	}

	/**
	 * @ignore
	 * @param {*} position computeRoamingLineProperty计算的属性
	 * @param {*} start 开始时间节点
	 * @param {*} stop 结束时间节点
	 * @param {*} isPathShow path路径是否显示
	 * @memberof Roaming
	 */
	InitRoaming(position, start, stop, isPathShow) {
		let _self = this;
		this.entity = this.viewer.entities.add({
			// 和时间轴关联
			availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
				start: start,
				stop: stop
			})]),
			// 位置
			position: position,
			//基于位置移动自动计算方向.
			orientation: new Cesium.VelocityOrientationProperty(position),
			//路径
			path: {
				resolution: 1,
				//设置航线样式，线条颜色，内发光粗细，航线宽度等
				material: new Cesium.PolylineGlowMaterialProperty({
					glowPower: 0.1,
					color: Cesium.Color.YELLOW
				}),
				width: 10,
				show: isPathShow
			}
		})

		if (this.model) {
			let model = this.model;

			// 加载模型,	模型数据,跨域，模型文件必须放本地
			this.entity.model = {
				// 模型路径
				uri: model.url,
				// 模型最小刻度
				minimumPixelSize: 64,
				maximumSize: 128,
				// 设置模型最大放大大小
				maximumScale: 200,
				// 模型是否可见
				show: true,
				// 模型轮廓颜色
				silhouetteColor: Cesium.Color.WHITE,
				// 模型颜色  ，这里可以设置颜色的变化
				// color: color,
				// 仅用于调试，显示魔仙绘制时的线框
				debugWireframe: false,
				// 仅用于调试。显示模型绘制时的边界球。
				debugShowBoundingVolume: false,

				scale: 20,
				runAnimations: true // 是否运行模型中的动画效果
			};
		} else if (this.billboard) {
			let billboard = this.billboard;

			billboard.imgUrl = Cesium.defaultValue(billboard.imgUrl, 'jt3dSDK/imgs/point/point3.png');

			this.entity.billboard = {
				image: billboard.imgUrl, // default: undefined
				show: true, // default
				width: 30, // default: undefined
				scale: 1,
				height: 30, // default: undefined
				pixelOffset: new Cesium.Cartesian2(0, -14), // default: (0, 0)
				// disableDepthTestDistance: 0,
			}

		} else {
			let point = {};
			if (this.point) {
				point = this.point;
			}

			//点的大小
			point.pixelSize = Cesium.defaultValue(point.pixelSize, 10);
			//点位颜色
			if (point.color) {
				if (point.color instanceof Array) {
					point.color = new Cesium.Color(point.color[0] / 255, point.color[1] / 255, point.color[2] / 255, point.color[3]);
				} else if (typeof(point.color) === 'string') {
					point.color = new Cesium.Color.fromCssColorString(point.color);
				} else {
					point.color = new Cesium.Color.fromCssColorString("#FFFF00");
				}
			}

			//点位轮廓颜色
			if (point.outlineColor) {
				if (point.outlineColor instanceof Array) {
					point.outlineColor = new Cesium.Color(point.outlineColor[0] / 255, point.outlineColor[1] / 255, point.outlineColor[2] / 255, point.outlineColor[3]);
				} else if (typeof(point.outlineColor) === 'string') {
					point.outlineColor = new Cesium.Color.fromCssColorString(point.outlineColor);
				} else {
					point.outlineColor = new Cesium.Color.fromCssColorString("#FFFF00");
				}
			}

			//点位轮廓宽度
			point.outlineWidth = Cesium.defaultValue(point.outlineWidth, 2);

			this.entity.point = point
		}

		/* 判断是否需要绘制文字 */
		if (this.label) {

			let label = this.label;

			label.text = Cesium.defaultValue(label.text, "");
			label.font = Cesium.defaultValue(label.font, "24px Helvetica"); //字体样式

			//字体颜色
			if (label.fillColor) {
				if (label.fillColor instanceof Array) {
					label.fillColor = new Cesium.Color(label.fillColor[0] / 255, label.fillColor[1] / 255, label.fillColor[2] / 255, label.fillColor[3]);
				} else if (typeof(label.fillColor) === 'string') {
					label.fillColor = new Cesium.Color.fromCssColorString(label.fillColor);
				} else {
					label.fillColor = new Cesium.Color.fromCssColorString("#FFFF00");
				}
			}

			//字体边框颜色
			if (label.outlineColor) {
				if (label.outlineColor instanceof Array) {
					label.outlineColor = new Cesium.Color(label.outlineColor[0] / 255, label.outlineColor[1] / 255, label.outlineColor[2] / 255, label.outlineColor[3]);
				} else if (typeof(label.outlineColor) === 'string') {
					label.outlineColor = new Cesium.Color.fromCssColorString(label.outlineColor);
				} else {
					label.outlineColor = new Cesium.Color.fromCssColorString("#FFFF00");
				}
			}

			//字体边框宽度
			label.outlineWidth = Cesium.defaultValue(label.outlineWidth, 1);

			//是否显示背景颜色
			label.showBackground = Cesium.defaultValue(label.showBackground, false);
			//背景颜色
			if (label.backgroundColor) {
				if (label.backgroundColor instanceof Array) {
					label.backgroundColor = new Cesium.Color(label.backgroundColor[0] / 255, label.backgroundColor[1] / 255, label.backgroundColor[2] / 255, label.backgroundColor[3]);
				} else if (typeof(label.backgroundColor) === 'string') {
					label.backgroundColor = new Cesium.Color.fromCssColorString(label.backgroundColor);
				} else {
					label.backgroundColor = new Cesium.Color.fromCssColorString("#FFFF00");
				}
			}

			label.pixelOffset = Cesium.defaultValue(label.pixelOffset, 0);
			label.scale = Cesium.defaultValue(label.scale, 1);


			this.entity.label = {
				text: label.text,
				font: label.font, //字体样式
				fillColor: label.fillColor, //字体颜色
				outlineColor: label.outlineColor, //字体边框颜色
				outlineWidth: label.outlineWidth, //边框宽度	
				style: Cesium.LabelStyle.FILL_AND_OUTLINE, //FILL不要轮廓 , OUTLINE只要轮廓,FILL_AND_OUTLINE轮廓加填充

				verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
				showBackground: label.showBackground, //是否显示背景颜色
				backgroundColor: label.backgroundColor, // 背景颜色
				backgroundPadding: new Cesium.Cartesian2(6, 6), //指定以像素为单位的水平和垂直背景填充padding
				disableDepthTestDistance: Number.POSITIVE_INFINITY,

				scale: label.scale, //尺寸

			}

			//偏移量
			if (label.pixelOffset) {
				label.pixelOffset.x = Cesium.defaultValue(label.pixelOffset.x, 0);
				label.pixelOffset.y = Cesium.defaultValue(label.pixelOffset.y, 0);
				this.entity.label.pixelOffset = new Cesium.Cartesian2(label.pixelOffset.x, label.pixelOffset.y);
			}

			if (label.scaleByDistance) {
				label.scaleByDistance.near = Cesium.defaultValue(label.scaleByDistance.near, 0);
				label.scaleByDistance.nearValue = Cesium.defaultValue(label.scaleByDistance.nearValue, 0);
				label.scaleByDistance.far = Cesium.defaultValue(label.scaleByDistance.far, 1);
				label.scaleByDistance.farValue = Cesium.defaultValue(label.scaleByDistance.farValue, 0);

				this.entity.label.scaleByDistance = new Cesium.NearFarScalar(label.scaleByDistance.near, label.scaleByDistance.nearValue, label.scaleByDistance.far, label.scaleByDistance.farValue) //按距离缩放，即距离大于180米时，图标不显示  Cesium.NearFarScalar(near, nearValue, far, farValue)相机范围的下界。相机范围下界的值。相机范围的上限。该值位于摄像机范围的上界。
			}
		}


		this.entity.position.setInterpolationOptions({ // 点插值
			interpolationDegree: 5,
			interpolationAlgorithm: Cesium.LagrangePolynomialApproximation
		})

		this.initRole(this.role);
	}

	/**
	 * @param {Object} role 0自由模式 1跟随模式 2第一视角 3 第三视角  后方、前方、俯视（上帝视角）、左侧、右侧
	 */
	initRole(role) {
		let _self = this;

		if (role == 0) { //自由模式
		
			this.viewer.trackedEntity = undefined;

			//获取被clock监听的全部事件数量
			let len = _self.viewer.clock.onTick.numberOfListeners;
			for (let i = 0; i < len; i++) {
				//将被监听的方法移除来停止方法
				_self.viewer.clock.onTick.removeEventListener(_self.viewer.clock.onTick._listeners[i]);
			}
		} else if (role == 1) { //跟随模式

			this.viewer.trackedEntity = this.entity;

			//获取被clock监听的全部事件数量
			let len = _self.viewer.clock.onTick.numberOfListeners;
			for (let i = 0; i < len; i++) {
				//将被监听的方法移除来停止方法
				_self.viewer.clock.onTick.removeEventListener(_self.viewer.clock.onTick._listeners[i]);
			}

		} else if (role == 2) { //第一视角

			this.viewer.trackedEntity = this.entity;

			let exection = function TimeExecution() {
				if (_self.viewer.clock.shouldAnimate === true) {
					//获取位置
					let center = _self.entity.position.getValue(
						_self.viewer.clock.currentTime
					);
					//获取偏向角
					let orientation = _self.entity.orientation.getValue(
						_self.viewer.clock.currentTime
					)
					let transform = Cesium.Transforms.eastNorthUpToFixedFrame(center);
					transform = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromQuaternion(orientation), center);

					var transformX = _self.followedX || -100; //距离运动点的距离（后方） 
					var transformZ = _self.followedZ || 50; //距离运动点的高度（上方）

					_self.viewer.camera.lookAtTransform(transform, new Cesium.Cartesian3(transformX, 0, transformZ))
				}
			};
			//监听时间变化 让cesium的时钟方法来监听该方法
			this.viewer.clock.onTick.addEventListener(exection);

		} else if (role == 3) { //第三视角  上帝视角

			this.viewer.trackedEntity = this.entity;

			let exection = function TimeExecution() {
				if (_self.viewer.clock.shouldAnimate === true) {
					//获取位置
					let center = _self.entity.position.getValue(
						_self.viewer.clock.currentTime
					);
					let orientation = _self.entity.orientation.getValue(
						_self.viewer.clock.currentTime
					)
					let transform = Cesium.Transforms.eastNorthUpToFixedFrame(center);
					transform = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromQuaternion(orientation), center);

					// var transformX = -50; //距离运动点的距离（后方）
					// var transformZ = 250; //距离运动点的高度（上方）
					
					var transformX = _self.followedX || -50; //距离运动点的距离（后方）
					var transformZ = _self.followedZ || 250; //距离运动点的高度（上方）

					_self.viewer.camera.lookAtTransform(transform, new Cesium.Cartesian3(transformX, 0, transformZ))
				}
			};
			//监听时间变化 让cesium的时钟方法来监听该方法
			this.viewer.clock.onTick.addEventListener(exection);
		}
	}

	/**
	 * 漫游的暂停和继续
	 * @param {Boolean} state bool类型 false为暂停，ture为继续
	 * @memberof Roaming
	 */
	PauseOrContinue(state) {
		this.viewer.clock.shouldAnimate = state;
	}

	/**
	 * 向前飞行
	 */
	forwardFly() {
		// var clockViewModel = this.viewer.clockViewModel;
		// var multiplier = clockViewModel.multiplier;
		// if (multiplier < 0) {
		// 	clockViewModel.multiplier = -multiplier;
		// }
		// clockViewModel.shouldAnimate = true;

		var multiplier = this.viewer.clock.multiplier;
		if (multiplier < 0) {
			this.viewer.clock.multiplier = -multiplier;
		}
		this.viewer.clock.shouldAnimate = true;
	}

	/**
	 * 向后飞行
	 */
	backwardsFly() {
		// var clockViewModel = this.viewer.clockViewModel;
		// var multiplier = clockViewModel.multiplier;
		// if (multiplier > 0) {
		// 	clockViewModel.multiplier = -multiplier;
		// }
		// clockViewModel.shouldAnimate = true;

		var multiplier = this.viewer.clock.multiplier;
		if (multiplier > 0) {
			this.viewer.clock.multiplier = -multiplier;
		}
		this.viewer.clock.shouldAnimate = true;
	}

	/**
	 * 改变飞行的速度
	 * @param {Number} value  整数类型
	 * @memberof Roaming
	 */
	ChangeRoamingSpeed(value) {
		this.viewer.clock.multiplier = value;
	}

	/**
	 * 取消漫游
	 * @memberof Roaming
	 */
	EndRoaming() {
		if (this.entity !== undefined) {
			this.viewer.entities.remove(this.entity);
		}
		this.viewer.trackedEntity = undefined;
		this.viewer.clock.shouldAnimate = false;

		//获取被clock监听的全部事件数量
		let len = this.viewer.clock.onTick.numberOfListeners;
		for (let i = 0; i < len; i++) {
			//将被监听的方法移除来停止方法
			this.viewer.clock.onTick.removeEventListener(this.viewer.clock.onTick._listeners[i]);
		}
	}
}