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

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

	import {
		inject
	} from "vue";
	import {
		Store
	} from '@/store/index'
	store = Store()
	import {
		deepTree
	} from "@/utils/deepTree.js";

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

<template>
	<div class="jt-ImageLayerSplit">
		<div class="_left">
			<div style="line-height: 30rem;float: left;">左侧图层：</div>
			<el-tree-select v-model="leftValue" :data="leftData" :render-after-expand="true" @change="handleClickLeft" style="width: 160rem; float: left;" />
		</div>
		<div class="_right">
			<div style="line-height: 30rem;float: left;">右侧图层：</div>
			<el-tree-select v-model="rightValue" :data="rightData" :render-after-expand="true" @change="handleClickRight" style="width: 160rem; float: left;" />
		</div>
	</div>
</template>

<script>
	let jt3d = undefined;
	let store = undefined;

	let earthAtLeft = undefined;
	let earthAtRight = undefined;

	//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
	//例如：import 《组件名称》 from '《组件路径》';

	export default {
		//import引入的组件需要注入到对象中才能使用
		components: {},

		//这里存放数据
		data() {

			return {
				leftValue: {},
				leftData: [],
				rightValue: {},
				rightData: [],
			};
		},

		//监听属性 类似于data概念
		computed: {},

		//监控data中的数据变化
		watch: {},

		//方法集合
		methods: {
			/**
			 * 左侧图层控制
			 * @param {Object} item
			 */
			handleClickLeft(item) {
				let _self = this;

				this.$parent.$parent.$refs.refLayer.mark = "service";

				let _serviceId = this.$parent.$parent.$refs.refLayer.mark + "_" + item.layercode + item.layerorder;

				//移除
				this.removeSplitLayerLeft();
				//添加
				this.$parent.$parent.$refs.refLayer.setLayersControl(jt3d, item, true).then(res => {
					//定位
					_self.$parent.$parent.$refs.refLayer.setLayersLocation(jt3d, item);

					earthAtLeft = window[_serviceId];
					earthAtLeft.splitDirection = Cesium.SplitDirection.LEFT;
				});
			},
			/**
			 * 
			 * 
			 * 右侧图层控制
			 * @param {Object} item
			 */
			handleClickRight(item) {
				let _self = this;

				this.$parent.$parent.$refs.refLayer.mark = "service";

				let _serviceId = this.$parent.$parent.$refs.refLayer.mark + "_" + item.layercode + item.layerorder;

				//移除
				this.removeSplitLayerRight();
				//添加
				this.$parent.$parent.$refs.refLayer.setLayersControl(jt3d, item, true).then(res => {
					//定位
					_self.$parent.$parent.$refs.refLayer.setLayersLocation(jt3d, item);

					earthAtRight = window[_serviceId];
					earthAtRight.splitDirection = Cesium.SplitDirection.RIGHT;
				});

			},

			/**
			 * 卷帘对比初始化
			 */
			initSplitLayer() {
				let _self = this;
				this.viewer = jt3d._viewer;

				let sliderDiv = document.getElementById("image_slider");
				if (sliderDiv == null) {
					//创建画布
					sliderDiv = document.createElement('div');
					sliderDiv.id = "image_slider";
					sliderDiv.style.position = "absolute";
					sliderDiv.style.left = "50%";
					sliderDiv.style.top = "70rem";
					sliderDiv.style.backgroundColor = "#d3d3d3";
					sliderDiv.style.width = "5rem";
					sliderDiv.style.height = "calc(100% - 70rem)";
					sliderDiv.style.zIndex = "9999";

					sliderDiv.onmouseover = function() {
						//设置其背景颜色为黄色
						this.style.cursor = "ew-resize";
					};

					/* 加入到页面 */
					document.body.appendChild(sliderDiv);
				}

				// 设置图像拆分位置
				viewer.scene.splitPosition = sliderDiv.offsetLeft / sliderDiv.parentElement.offsetWidth; //确定分割点位置,占据父级容器的比例

				if (this.handler) {
					this.handler.destroy();
					this.handler = null;
				}
				//处理用户输入事件。可以添加自定义功能以在用户输入时执行；参数为任意
				this.handler = new Cesium.ScreenSpaceEventHandler(sliderDiv);
				var moveActive = false;

				// 计算拆分
				function move(movement) {
					if (!moveActive) {
						return;
					}

					//捕获滑动停止的位置
					var relativeOffset = movement.endPosition.x;
					var splitPosition = (sliderDiv.offsetLeft + relativeOffset) / sliderDiv.parentElement.offsetWidth;
					sliderDiv.style.left = `${100.0 * splitPosition}%`;
					viewer.scene.splitPosition = splitPosition;
				}

				//对分割条的操作
				this.handler.setInputAction(function() {
					moveActive = true;
				}, Cesium.ScreenSpaceEventType.LEFT_DOWN);
				this.handler.setInputAction(function() {
					moveActive = true;
				}, Cesium.ScreenSpaceEventType.PINCH_START);

				this.handler.setInputAction(move, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
				this.handler.setInputAction(move, Cesium.ScreenSpaceEventType.PINCH_MOVE);

				this.handler.setInputAction(function() {
					moveActive = false;
				}, Cesium.ScreenSpaceEventType.LEFT_UP);
				this.handler.setInputAction(function() {
					moveActive = false;
				}, Cesium.ScreenSpaceEventType.PINCH_END);

				_self.handleClickLeft(_self.leftValue);
				_self.handleClickRight(_self.rightValue);
			},

			/**
			 * 移除卷帘
			 */
			removeSplitLayer() {
				let sliderDiv = document.getElementById("image_slider");
				if (sliderDiv) {
					document.body.removeChild(sliderDiv);
				}
				this.removeSplitLayerLeft();
				this.removeSplitLayerRight();

				if (earthAtLeft) {
					earthAtLeft.splitDirection = Cesium.SplitDirection.NONE;
				}

				if (earthAtRight) {
					earthAtRight.splitDirection = Cesium.SplitDirection.NONE;
				}
			},
			/**
			 * 移除左侧图层
			 */
			removeSplitLayerLeft() {
				if (earthAtLeft) {
					if (earthAtLeft instanceof Cesium.ImageryLayer) {
						jt3d._viewer.imageryLayers.remove(earthAtLeft);
					}

					if (earthAtLeft instanceof Cesium.Cesium3DTileset) {
						jt3d._viewer.scene.primitives.remove(earthAtLeft);
					}

					if (earthAtLeft instanceof Array) {
						earthAtLeft.forEach((res, index) => {
							jt3d._viewer.scene.primitives.remove(res);
						})
					}
				}
			},
			/**
			 * 移除右侧图层
			 */
			removeSplitLayerRight() {
				if (earthAtRight) {
					if (earthAtRight instanceof Cesium.ImageryLayer) {
						jt3d._viewer.imageryLayers.remove(earthAtRight);
					}

					if (earthAtRight instanceof Cesium.Cesium3DTileset) {
						jt3d._viewer.scene.primitives.remove(earthAtRight);
					}

					if (earthAtRight instanceof Array) {
						earthAtRight.forEach((res, index) => {
							jt3d._viewer.scene.primitives.remove(res);
						})
					}
				}
			},
		},

		//生命周期 - 创建完成（可以访问当前this实例）
		created() {},

		//生命周期 - 挂载完成（可以访问DOM元素）
		mounted() {
			//在这获取图层列表
			let _self = this;
			//权限查询条件语句
			let atlasLayersSqlWhere = undefined;

			//获取地图图集id
			let roleId = store.roleId
			atlasLayersSqlWhere = '"roleId"' + " = " + roleId + " and " + '"atlasType"' + "='图层'"

			//Promise回调
			function init() {
				return new Promise((resolve, reject) => {
					_self.initData.forEach((res, index) => {
						let num = Number(res.layerorder)
						if (num < 10) {
							res.layerorder = '0' + res.layerorder
						}

						res.value = res;
						res.label = res.layername;

						if (res.layername === "牟平中心城") {
							_self.leftValue = res;
						}
						if (res.layername === "牟平区") {
							_self.rightValue = res;
						}

					})
					_self.leftData = _self.rightData = deepTree(_self.initData)
					console.log('图层控制树列表+++', _self.leftData)
					resolve(true)
				})
			}

			//获取图集
			this.$http.get('/getTableList', {
				tableName: 'sys_map_atlas_layers', //表名
				sqlWhere: atlasLayersSqlWhere, //查询条件  国土调查
				orderByField: '' //排序
			}).then(res => {
				//初始图层列表
				this.initData = res.data
				init().then(item => {})
			})
		},

		beforeCreate() {}, //生命周期 - 创建之前
		beforeMount() {}, //生命周期 - 挂载之前
		beforeUpdate() {}, //生命周期 - 更新之前
		updated() {}, //生命周期 - 更新之后
		beforeDestroy() {}, //生命周期 - 销毁之前
		destroyed() {}, //生命周期 - 销毁完成
		activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
	};
</script>

<style lang="scss" scoped>
	//整体样式
	.jt-ImageLayerSplit {
		padding: 10rem;

		//左侧
		._left {
			width: 240rem;
			float: left;
		}

		//右侧
		._right {
			width: 240rem;
			float: left;
			margin-left: 10rem;
		}

		.el-tree {
			width: 300rem !important;
		}

		// .el-popper.is-light,
		// .el-dropdown__popper.el-popper {
		// 	background: rgb(255 255 255) !important;
		// 	border: 0 !important;
		// }

		// .el-select-dropdown {
		// 	background: rgb(255 255 255) !important;
		// }
	}
</style>