JT-CIM/src/views/Map3d-自测/components/map-split.vue

<script setup>
	import {
		Store
	} from '@/store/index'
	store = Store();

	import {
		deepTree
	} from "@/utils/deepTree.js";
</script>

<template>
	<jt-popup title="卷帘对比" :showfooter="isshowfooter" height="120rem" width="620rem" :isEmit="true" @closeJTPopup="closeJTPopup">
		<div class="jt-map-split">
			<div class="_left">
				<div style="line-height: 30rem;float: left;">左侧图层：</div>
				<el-tree-select v-model="leftModel" :data="leftData" :render-after-expand="true" @change="handleClickLeft" style="width: 200rem; float: left;" />
			</div>
			<div class="_right">
				<div style="line-height: 30rem;float: left;">右侧图层：</div>
				<el-tree-select v-model="rightModel" :data="rightData" :render-after-expand="true" @change="handleClickRight" style="width: 200rem; float: left;" />
			</div>
		</div>
	</jt-popup>
</template>

<script>
	let store = undefined;

	let earthAtLeft = undefined;
	let earthAtRight = undefined;

	import * as mapWork from "../map"

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

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

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

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

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

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

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

				//移除
				if (earthAtLeft) {
					mapWork.setLayersControl(window.viewer, _self.leftValue, false);
				}

				//添加
				mapWork.setLayersControl(window.viewer, item, true).then(res => {
					//定位
					mapWork.setLayersLocation(window.viewer, {
						serviceId: item.serviceId,
						parameterset: item.parameterset,
						loadtype: item.loadtype,
						isinit: '1',
					});

					_self.leftValue = item;

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

				//移除
				if (earthAtRight) {
					mapWork.setLayersControl(window.viewer, _self.rightValue, false);
				}

				//添加
				mapWork.setLayersControl(window.viewer, item, true).then(res => {
					//定位
					mapWork.setLayersLocation(window.viewer, {
						serviceId: item.serviceId,
						parameterset: item.parameterset,
						loadtype: item.loadtype,
						isinit: '1',
					});

					_self.rightValue = item;

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

			},

			/**
			 * 卷帘对比初始化
			 */
			initSplitLayer() {
				let _self = this;
				this.viewer = window.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);
				}

				// 设置图像拆分位置
				this.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.leftModel);
				_self.handleClickRight(_self.rightModel);
			},

			/**
			 * 初始化图层控制树
			 */
			initLayerTree() {
				let _self = this;

				mapWork.getLayers().then(layers => {
					layers.map((item) => {
						let num = Number(item.layerorder)
						if (num < 10) {
							item.layerorder = '0' + item.layerorder
						}

						//图层ID
						let serviceId = "service_" + item.layercode + item.layerorder;
						item.serviceId = serviceId;

						//透明度
						let opacity = 1;
						if (item.opacity == null) {
							opacity = 1;
						} else {
							opacity = Number(item.opacity);
						}
						item.opacity = opacity;

						item.value = item;
						item.label = item.layername;

						if (item.layername === "二调") {
							_self.leftModel = item;
						}
						if (item.layername === "三调") {
							_self.rightModel = item;
						}
					})

					_self.leftData = _self.rightData = deepTree(layers)
					_self.initSplitLayer();

				});

			},

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

				if (earthAtLeft) {
					mapWork.setLayersControl(window.viewer, this.leftValue, false);
					earthAtLeft.splitDirection = Cesium.SplitDirection.NONE;
				}

				if (earthAtRight) {
					mapWork.setLayersControl(window.viewer, this.rightValue, false);
					earthAtRight.splitDirection = Cesium.SplitDirection.NONE;
				}
			},

			closeJTPopup() {
				if (window.viewerLeft) {
					mapWork.removeSplitScreen(window.viewerLeft);
				}
				// mapWork.removeSplitLayer(window.viewer, earthAtLeft, earthAtRight,_self.leftValue,_self.rightValue);
				this.removeSplitLayer();
			}
		},

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

		//生命周期 - 挂载完成（可以访问DOM元素）
		mounted() {
			this.initLayerTree();
		},

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

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

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

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

		.el-tree {
			width: 300rem !important;
		}
	}
</style>