JT-CIM/src/views/Map3d - 副本 (2)/备份/toolbars - 副本 (2).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";

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

<template>
	<div class="jt-toolbars fadein-right">
		<template v-for="(item, i) in toolDatas" :key="i">
			<div v-if="item.widget && !item.children" class="toolbar-item" @click="showWidget(item.widget)">
				<i :class="item.icon" />
				<span class="title">{{ item.name }}</span>
			</div>
			<el-dropdown v-if="item.children && !item.widget" class="toolbar-item" :hide-on-click="false" @command="handleCommand">
				<span class="el-dropdown-link">
					<i :class="item.icon" />
					<span class="title">{{ item.name }}</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 v-for="child in item.children" :key="child.widget" :title="child.name" @click="showWidget(child.widget)">
							<i :class="child.icon" />
							<span>{{ child.name }}</span>
						</el-dropdown-item>
					</el-dropdown-menu>
				</template>
			</el-dropdown>
		</template>
	</div>
</template>

<script>
	let jt3d = undefined;
	let store = undefined
	export default {
		name: "jt-toolbars",
		data() {
			return {
				toolDatas: [
					// {
					// 	name: "绕点自旋",
					// 	icon: "iconfont icon-chaxunzuobiaozhi",
					// 	widget: "rotateCamera"
					// },
					// {
					// 	name: "全图",
					// 	icon: "iconfont icon-chaxunzuobiaozhi",
					// 	widget: "fullMap"
					// },
					{
						name: "底图",
						icon: "iconfont icon-dituzuobiao",
						widget: "basicLayer"
					},
					{
						name: "图层",
						icon: "iconfont icon-winfo-icon-tucengkongzhi",
						widget: "layers"
					},
					{
						name: "工具",
						icon: "iconfont icon-xitong1",
						children: [{
								name: "图上标绘",
								icon: "iconfont icon-dituhuizhi",
								widget: "DialogEdit"
							},
							{
								name: "地区导航",
								icon: "iconfont icon-zhijiantou",
								widget: "navigate"
							},
							{
								name: "视角标签",
								icon: "iconfont icon-fushi",
								widget: "viewerlabel"
							},
						]
					},
					{
						name: "清除",
						icon: "iconfont icon-shanchu",
						widget: "clearAll"
					},
				]
			}
		},
		/* 方法 */
		methods: {
			showWidget: function(type) {
				//全图
				if (type === "fullMap") {
					this.$parent.$refs.refMap3d.fullMap(jt3d);
				}
				//绕点自旋
				if (type === "rotateCamera") {
					ElMessage.warning('在地图上单击进行自旋，再次单击停止自旋')
					jt3d.SketchViewModel.sketchTools('point', {
						onComplete(cPoint, gPoint) {
							jt3d.setMapSpinByPoint(cPoint);
						},
						onError(message) {}
					});
				}
				//清除所有
				if (type == "clearAll") {
					jt3d.DrawToolsEdit.Clear();
					jt3d.DrawMilitaryPlot.clearAll();

					//清除测量
					jt3d.CommonTools.clear();
					this.$parent.$refs._refMeasure.currentIndex = -1;
					if (this.$parent.$refs._refMeasure.popup) {
						this.$parent.$refs._refMeasure.popup.close();
					}

					//移除光照分析
					if (!jt3d.statusBar.show) {
						jt3d.statusBar.show = true;
					}
					jt3d.SpatialAnalysis.SunshineShadow.remove();

					//移除剖面分析结果
					this.$parent.closeDrawerSectionAnalysis();

					//清除坐标定位
					this.$parent.$refs._refCoordsTool.empty();

					//清除空间分析
					this.$parent.$refs._refAnalysisSpace.init();

					//清除地形分析
					this.$parent.$refs._refAnalysisTerrain.init();

					//还原左键单击事件
					this.$parent.$refs.refMap3d.clickEntity(jt3d);

					/* 开启地形检测 必须开启 否则会导致获取地形高度时异常 导致鼠标移动时位置哆嗦 */
					jt3d._viewer.scene.globe.depthTestAgainstTerrain = true;
				}
				
				//图层控制
				if (type === "layers") {
					// this.closePopup()
					// this.$parent.$refs.refLayerPopup.isshow = true;
					
						this.$myPop('layer',{isShow:true})
				}
				//底图切换
				if (type === "basicLayer") {
					this.closePopup()
					this.$parent.showbasicLayer = true
				}

				//视角标签
				if (type == "viewerlabel") {
					this.closePopup()
					this.$parent.$refs.refviewerlabel.isshow = true
				}

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

			//关闭所有弹框
			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.refLayerPopup.isshow = false;
				if (this.$parent.$refs._refImageLayerSplit) {
					this.$parent.$refs._refImageLayerSplit.removeSplitLayer(); //关闭卷帘
				}
				if (this.$parent.$refs._refViewerSplitScreen) {
					this.$parent.$refs._refViewerSplitScreen.removeSplitScreen(); //关闭分屏
				}
			},
		},
		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;
	}

	.jt-toolbars {
		position: absolute;
		top: 80rem;
		width: auto;
		right: 20rem;
		cursor: pointer !important;
		padding: 0rem 10rem !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 10rem;

			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>