JT-CIM/src/views/Map3d/components/TrackRoam.vue

<script setup>
	/**
	 * element-plus组件
	 */
	import {
		ElMessage
	} from 'element-plus';

	import {
		inject
	} from "vue";

	const getMapInstance = inject("getMapInstance");
	jt3d = getMapInstance();
</script>

<template>
	<div class="jt-TrackRoam">

		<el-row style="margin-bottom: 5px;">
			<el-button type="danger" v-if="isNew" @click="drawLine()">
				<el-icon>
					<Plus />
				</el-icon>新增漫游
			</el-button>
			<el-button type="danger" v-if="!isNew" @click="flightRoaming('remove')">
				<el-icon>
					<Delete />
				</el-icon>
				退出漫游
			</el-button>
		</el-row>

		<el-row style="margin-bottom: 5px;" v-if="!isNew">

			<el-button type="danger" v-if="isBackward" @click="flightRoaming('playReverse')">
				<el-icon>
					<Back />
				</el-icon>向后飞行
			</el-button>
			<el-button type="danger" v-if="!isBackward" @click="flightRoaming('playForward')">
				<el-icon>
					<Right />
				</el-icon>向前飞行
			</el-button>

			<el-button type="danger" v-if="isPause" @click="flightRoaming('pause')">
				<el-icon>
					<VideoPause />
				</el-icon>暂停漫游
			</el-button>
			<el-button type="danger" v-if="!isPause" @click="flightRoaming('pause')">
				<el-icon>
					<VideoPlay />
				</el-icon>继续漫游
			</el-button>
		</el-row>

		<el-row style="margin-bottom: 5px;" v-if="!isNew">
			<el-button type="danger" @click="flightRoaming(0)">
				自由漫游
			</el-button>
			<el-button type="danger" @click="flightRoaming(1)">
				相机跟随
			</el-button>
		</el-row>
		<el-row style="margin-bottom: 5px;" v-if="!isNew">
			<el-button type="danger" @click="flightRoaming(2)">
				第一视角
			</el-button>
			<el-button type="danger" @click="flightRoaming(3)">
				上帝视角
			</el-button>
		</el-row>

		<el-form label-width="130rem">
			<el-form-item label="飞行速度:" v-if="!isNew">
				<el-slider v-model="roam.speed" @input="handleSpeedChange" :max="100" :min="1" :step="1" />
			</el-form-item>
			<el-form-item label="距离运动点的距离（后方）:" v-if="roam.role===2">
				<el-slider v-model="roam.followedX" @input="handleFollowedXChange" :max="10000" :min="1" :step="1" />
			</el-form-item>
			<el-form-item label="距离运动点的距离（上方）:" v-if="roam.role===2">
				<el-slider v-model="roam.followedZ" @input="handleFollowedZChange" :max="10000" :min="1" :step="1" />
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	let jt3d = undefined;

	export default {
		data() {
			return {
				isNew: true,
				isPause: true,
				isBackward: true,
				Roaming: undefined,

				roam: {
					role: 0,
					speed: 10,
					followedX: 50,
					followedZ: 10
				}
			}
		},

		/* 方法 */
		methods: {

			handleFollowedXChange(followedX) {
				this.Roaming.followedX = followedX;
			},
			handleFollowedZChange(followedZ) {
				this.Roaming.followedZ = followedZ;
			},

			handleSpeedChange(speed) {
				this.Roaming.ChangeRoamingSpeed(speed);
			},

			/**
			 * 绘制飞行路线
			 */
			drawLine() {
				let _self = this;

				jt3d.DrawTools.draw('polyline', {
					isEdit: false,
					onComplete(cartesian3d, points) {
						//清除绘制
						jt3d.DrawTools.Clear();

						_self.Roaming = new _self.jt3dSDK.Roaming(jt3d._viewer, cartesian3d, {
							time: 360,
							role: 2,
							// label: {
							// 	text: "lineName",
							// }
						});
						_self.isPause = true;
						_self.isNew = false;
						_self.roam.role = 2;
						_self.Roaming.PauseOrContinue(_self.isPause);
					}
				});

			},

			/**
			 * 飞行漫游
			 * @param {Object} type
			 */
			flightRoaming(type) {

				let _self = this;

				switch (type) {
					case "pause": //暂停飞行
						this.isPause = !this.isPause;
						this.Roaming.PauseOrContinue(this.isPause);
						break;
					case "playForward": //向前飞行
						this.isPause = true;
						this.isBackward = !this.isBackward;
						this.Roaming.forwardFly();
						break;
					case "playReverse": //向后飞行
						this.isPause = true;
						this.isBackward = !this.isBackward;
						this.Roaming.backwardsFly();
						break;
					case "remove": //向后飞行
						this.isNew = true;
						this.roam.role = Number(type);
						this.Roaming.EndRoaming();
						// //获取被clock监听的全部事件数量
						// let len = jt3d._viewer.clock.onTick.numberOfListeners;
						// for (let i = 0; i < len; i++) {
						// 	//将被监听的方法移除来停止方法
						// 	jt3d._viewer.clock.onTick.removeEventListener(jt3d._viewer.clock.onTick._listeners[i]);
						// }
						break;
					case 0:
						this.roam.role = Number(type);
						this.Roaming.initRole(0);
						break;
					case 1:
						this.roam.role = Number(type);
						this.Roaming.initRole(1);
						break;
					case 2:
						this.roam.role = Number(type);
						this.Roaming.followedX = -100;
						this.Roaming.followedZ = 50;
						this.Roaming.initRole(2);
						break;
					case 3:
						this.roam.role = Number(type);
						this.Roaming.followedX = -50;
						this.Roaming.followedZ = 250;
						this.Roaming.initRole(3);
						break;
				}
			},
		},

		mounted() {

		}
	};
</script>

<style lang="scss" scoped>
	::v-deep .el-table .cell {
		line-height: 23rem !important;
		padding: 0 12rem !important;
		font-size: 14rem;
	}

	//整体样式
	.jt-TrackRoam {
		width: 90%;
		margin-top: 16rem;
		margin-left: 5%;
		text-align: left;

		--el-bg-color: rgb(0 44 126 / 60%);
		--el-fill-color-blank: rgb(0 44 126 / 60%);
		--el-text-color-secondary: rgb(216 240 255); //title
		--el-text-color-regular: rgb(216 240 255); //内容
		--el-fill-color-light: rgb(30 130 255);

		.el-icon {
			margin-right: 5rem;
			color: #fff;
		}
	}
</style>