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

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

	/**
	 * element-plus字体
	 */
	import {
		ArrowDown
	} from '@element-plus/icons-vue';
	import {Store} from '@/store/index';
	store = Store()
	import {
		inject
	} from "vue";
	import html2canvas from "html2canvas";
	const getMapInstance = inject("getMapInstance");
	jt3d = getMapInstance();
</script>

<template>
	<div class="toolbars fadein-right">
		<!-- <div class="toolbar-item" @click="PolylineObject()">
			<i class="iconfont icon-winfo-icon-tucengkongzhi"></i>
			<span class="title">
				测试动态线
			</span>
		</div>
		<div class="toolbar-item" @click="showWidget('rotateCamera')">
			<i class="iconfont icon-chaxunzuobiaozhi" />
			<span class="title">
				绕点旋转
			</span>
		</div> -->
		<div class="toolbar-item" @click="showWidget('fullMap')">
			<i class="iconfont icon-chaxunzuobiaozhi" />
			<span class="title">
				全图
			</span>
		</div>
		<div class="toolbar-item" @click="showWidget('basicLayer')">
			<i class="iconfont icon-dituzuobiao" />
			<span class="title">
				底图
			</span>
		</div>
		<div class="toolbar-item" @click="showWidget('layers')">
			<i class="iconfont icon-winfo-icon-tucengkongzhi"></i>
			<span class="title">
				图层
			</span>
		</div>
		<el-dropdown class="toolbar-item" :hide-on-click="false" @command="handleCommand">
			<span class="el-dropdown-link">
				<i class="iconfont icon-xitong1" />
				<span class="title">
					工具
				</span>
				<el-icon class="el-icon--right">
					<ArrowDown />
				</el-icon>
			</span>
			<template #dropdown>
				<span slot="slot" class="text"></span>
				<el-dropdown-menu>
					<el-dropdown-item command="DialogEdit"><i class="iconfont minsize icon-dituhuizhi"></i>绘制功能</el-dropdown-item>
					<el-dropdown-item command="navigate"><i class="iconfont icon-zhijiantou"></i>地区导航</el-dropdown-item>
					<el-dropdown-item command="viewerlabel"><i class="iconfont minsize icon-fushi"></i>视角标签</el-dropdown-item>
					<el-dropdown-item v-if="store.userport=='PC'" command="printmap"><i class="iconfont maxsize icon-svgdayin"></i>打印地图</el-dropdown-item>
					<el-dropdown-item command="measure"><i class="iconfont minsize icon-icon_measureTool"></i>图上量算</el-dropdown-item>
					<el-dropdown-item command="query-graphics"><i class="iconfont icon-search"></i>图形查询</el-dropdown-item>
					<!-- <el-dropdown-item command="analysis-data"><i class="iconfont maxsize icon-svgjiexiwenjian"></i>文件解析</el-dropdown-item> -->
					<el-dropdown-item command="analysis-space"><i class="iconfont icon-duodiankeshiyu"></i>空间分析</el-dropdown-item>
					<el-dropdown-item command="analysis-terrain"><i class="iconfont icon-iconfonttubiao_dixing"></i>地形分析</el-dropdown-item>
					<el-dropdown-item command="special-effects"><i class="iconfont icon-yu"></i>特效效果</el-dropdown-item>
					<el-dropdown-item command="coordsTool"><i class="iconfont icon-zuobiao"></i>坐标定位</el-dropdown-item>
					<el-dropdown-item command="TrackRoam"><i class="iconfont maxsize icon-jurassic_jiankong"></i>路径漫游</el-dropdown-item>
					<!-- <el-dropdown-item command="ImageLayerSplit"><i class="iconfont maxsize icon-juanlian"></i>卷帘对比</el-dropdown-item>
					<el-dropdown-item command="ViewerSplitScreen"><i class="iconfont minsize icon-fenping"></i>分屏对比</el-dropdown-item> -->
				</el-dropdown-menu>
			</template>
		</el-dropdown>
	</div>
</template>

<script>
	let jt3d = undefined;
	let store = undefined
	export default {
		name: "toolbars",
		data() {
			return {}
		},
		/* 方法 */
		methods: {
			/**
			 * 测试动态线
			 */
			PolylineObject() {
				let lines = [
					[
						[107.3609526659472, 26.405330345862833],
						[107.40025603208434, 26.402244579822174]
					],
					[
						[107.3609801462563, 26.40314629662853],
						[107.3999374877451, 26.400165614674155]
					],
					[
						[107.36081944593964, 26.40080706752495],
						[107.40012685036773, 26.39813952738571],
					],
					[
						[107.36067906760677, 26.398625963837965],
						[107.40034550598207, 26.39670894997551],
					],
				];

				//定位
				jt3d._viewer.scene.camera.setView({
					duration: 1,
					destination: {
						x: -1709251.0767395466,
						y: 5461386.32337908,
						z: 2820645.238657382
					},
					orientation: {
						heading: 0.13762265446730737,
						pitch: -1.460307026543739,
						roll: 0.003401834066556475
					}
				});

				lines.forEach((item, index) => {

					if (index === 0) {
						let a1 = jt3d.PolylineObject.PolylineLinkPulseMaterialProperty(item, {
							width: 11,
							color: 'RED',
							duration: 20000,
							imgUrl: "/jt3dSDK/imgs/polylinematerial/LinkPulse.png",
							isImageAlpha: false,
						});
						a1.then(function() {

						});
					}

					if (index === 1) {
						jt3d.PolylineObject.PolylineArrowMaterialProperty(item, {
							width: 10,
							color: "YELLOW",
							duration: 1000,
							count: 5,
							direction: "horizontal",
							order: "+",
							imgUrl: "/jt3dSDK/imgs/polylinematerial/arrowopacity.png",
							isImageAlpha: false,
						});
					}

					if (index === 2) {
						jt3d.PolylineObject.PolylineArrowMaterialProperty(item, {
							width: 10,
							color: 'BLUE',
							duration: 1000,
							count: 20,
							direction: "horizontal",
							order: "+",
							imgUrl: "/jt3dSDK/imgs/polylinematerial/arrowopacity.png",
							isImageAlpha: false,
						});
					}

					if (index === 3) {
						jt3d.PolylineObject.PolylineLinkPulseMaterialProperty(item, {
							width: 10,
							color: 'GREEN',
							duration: 10000,
							imgUrl: "/jt3dSDK/imgs/polylinematerial/20201124170520929.png",
							isImageAlpha: false,
						});
					}
				});
			},

			showWidget: function(type) {
				if (type === "layers") {
					this.closePopup() 
					this.$parent.$refs.refLayer.isshow = true;
				} else if (type === "fullMap") {
					this.$parent.$refs.refMap3d.fullMap(jt3d);
				} else if (type === "rotateCamera") {
					ElMessage.warning('在地图上单击进行自旋，再次单击停止自旋')
					jt3d.SketchViewModel.sketchTools('point', {
						onComplete(cPoint, gPoint) {
							jt3d.setMapSpinByPoint(cPoint);
						},
						onError(message) {}
					});
				} else {
					this.closePopup()
					this.$parent.showbasicLayer = true
				}

			},

			//关闭所有弹框
			closePopup() {
				this.$parent.$refs.refMeasure.isshow = false;
				this.$parent.$refs.refQueryGraphics.isshow = false;
				this.$parent.$refs.refAnalysisData.isshow = false;
				this.$parent.$refs.refAnalysisSpace.isshow = false;
				this.$parent.$refs.refAnalysisTerrain.isshow = false;
				this.$parent.$refs.refSpecialEffects.isshow = false;
				this.$parent.$refs.refCoordsTool.isshow = false;
				this.$parent.$refs.refTrackRoam.isshow = false;
				this.$parent.$refs.refViewerSplitScreen.isshow = false;
				this.$parent.$refs.refImageLayerSplit.isshow = false;
				this.$parent.$refs.refmapNavigate.isshow = false;
				this.$parent.$refs.refviewerlabel.isshow = false;
				this.$parent.$refs.refprintmap.isshow = false;
				this.$parent.$refs.refDialogEdit.isshow = false;
				this.$parent.showbasicLayer = false;
				this.$parent.$refs.refLayer.isshow = false;
				if(this.$parent.$refs._refImageLayerSplit){
					this.$parent.$refs._refImageLayerSplit.removeSplitLayer(); //关闭卷帘
				}
				if(this.$parent.$refs._refViewerSplitScreen){
					this.$parent.$refs._refViewerSplitScreen.removeSplitScreen(); //关闭分屏
				}
			},
			/**
			 * dropdown下拉列表事件
			 */
			handleCommand(command) {
				//图上绘制组件
				if (command === 'DialogEdit') {
					this.closePopup()
					this.$parent.$refs.refDialogEdit.isshow = true
				}
				//区域导航
				if (command === 'navigate') {
					this.closePopup()
					this.$parent.$refs.refmapNavigate.isshow = true
				}
				//视角标签
				if (command === 'viewerlabel') {
					this.closePopup()
					this.$parent.$refs.refviewerlabel.isshow = true
				}
				//打印地图
				if (command === 'printmap') {
					this.closePopup()
					// this.$bus.emit("screenshot")
					this.$parent.$refs._refprintmap.screenshot();
					setTimeout(() => {
						this.$parent.$refs.refprintmap.isshow = true
					}, 50);
				}
				//图上量算
				if (command === 'measure') {
					this.closePopup()
					this.$parent.$refs.refMeasure.isshow = true;
				}
				//图形查询
				if (command === 'query-graphics') {
					this.closePopup()
					this.$parent.$refs.refQueryGraphics.isshow = true;
				}
				//数据分析
				if (command === 'analysis-data') {
					this.closePopup()
					this.$parent.$refs.refAnalysisData.isshow = true;
				}
				//空间分析
				if (command === 'analysis-space') {
					this.closePopup()
					this.$parent.$refs.refAnalysisSpace.isshow = true;
				}
				//地形分析
				if (command === 'analysis-terrain') {
					this.closePopup()
					this.$parent.$refs.refAnalysisTerrain.isshow = true;
				}
				//特效效果
				if (command === 'special-effects') {
					this.closePopup()
					this.$parent.$refs.refSpecialEffects.isshow = true;
				}
				//坐标定位拾取
				if (command === 'coordsTool') {
					this.closePopup()
					this.$parent.$refs.refCoordsTool.isshow = true;
				}
				//飞行漫游
				if (command === 'TrackRoam') {
					this.closePopup()
					this.$parent.$refs.refTrackRoam.isshow = true;
				}
				//卷帘对比
				if (command === 'ImageLayerSplit') {
					this.closePopup();
					this.$parent.$refs.refImageLayerSplit.isshow = true;
					this.$parent.$refs._refImageLayerSplit.initSplitLayer(); //开启卷帘
				}
				//分屏对比
				if (command === 'ViewerSplitScreen') {
					this.closePopup();
					this.$parent.$refs.refViewerSplitScreen.isshow = true;
					this.$parent.$refs.refLayer.isshow = true;
					this.$parent.$refs._refViewerSplitScreen.initSplitScreen(); //开启分屏
				}
			},
		},
		mounted() {

		}
	};
</script>

<style lang="scss" scoped>
	.text::before {
		position: absolute;
		width: 0rem;
		height: 0rem;
		left: calc(50% - 5rem);
		top: -5rem;
		content: '';
		transform: rotate(45deg);
		z-index: 10;
		box-sizing: border-box;
		border-bottom: 5rem solid transparent;
		border-right: 5rem solid transparent;
		border-top: 5rem solid rgba(255, 255, 255, 1);
		border-left: 5rem solid rgba(255, 255, 255, 1);
		// background: rgba(5, 45, 115, .8) !important;
	}

	.toolbars {
		position: absolute;
		top: 80rem;
		width: 340rem;
		// width: 580rem;
		right: 20rem;
		cursor: pointer !important;
		padding: 0rem !important;
		margin: 0rem !important;
		background-image: none !important;
		border: 1rem solid;
		border: none;
		border-radius: 2rem !important;
		background-color: rgb(0 44 126 / 65%);
		height: 40rem;
		box-sizing: border-box;
		line-height: 38rem;
		text-align: left;
		user-select: none;

		cursor: default;

		.toolbar-item {
			display: inline-block;
			padding: 0rem 12rem;
			
			margin: 0rem;
			height: calc(100% - 4rem);
			color: #fff;
			font-size: 15rem;
			vertical-align: middle;

			&:hover {
				background-color: rgba(255, 255, 255, 0.3);
			}

			.title {
				font-size: 16rem;
			}
		}
		.toolbar-item:nth-last-child(1){
			padding-right: 0rem;
		} 

		.el-icon {
			margin-right: 5rem;
			color: #fff;
		}

		.el-dropdown {
			// vertical-align: middle;
			height: 40rem;
			line-height: 38rem;
			box-sizing: border-box;
		}
	}
</style>