JT-CIM-SDK/packages/Widgets/SceneControl/ImageLayerSplit.js

/* 引入Cesium */
// import * as Cesium from 'Cesium';

/**
 * 卷帘对
 * Cesium 影像卷帘对，就是把上层影像卷起来，和下面一层影像做对比。
 * 可左卷也可右卷
 */
class ImageLayerSplit {
	/**
	 * 默认初始化
	 * @param {Object} viewer 三维场景
	 */
	constructor(viewer) {
		if (!viewer) throw new Cesium.DeveloperError('no viewer object!');
		this._viewer = viewer;
	}
}

/**
 * 通用对外公开函数 
 */
Object.assign(ImageLayerSplit.prototype, /** @lends ImageLayerSplit.prototype */ {

	/**
	 * 卷帘对比初始化
	 */
	initSplit() {
		let _self = this;
		this.viewer = this._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 = "0px";
			sliderDiv.style.backgroundColor = "#d3d3d3";
			sliderDiv.style.width = "5px";
			sliderDiv.style.height = "100%";
			sliderDiv.style.zIndex = "9999";

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

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

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

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

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

			//捕获滑动停止的位置
			var relativeOffset = movement.endPosition.x;
			var splitPosition = (_self.slider.offsetLeft + relativeOffset) / _self.slider.parentElement.offsetWidth;
			_self.slider.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);
	},

	/**
	 * 卷帘对比
	 * @param {Object} earthAtLeft 左侧图层
	 * @param {Object} earthAtRight 右侧图层
	 */
	addSplitLayer(earthAtLeft, earthAtRight) {
		let _self = this;

		if (this.earthAtLeft) {
			this._viewer.imageryLayers.remove(this.earthAtLeft); //移除图层
		}
		if (this.earthAtRight) {
			this._viewer.imageryLayers.remove(this.earthAtRight); //移除图层
		}

		this.earthAtLeft = earthAtLeft;
		this.earthAtRight = earthAtRight;

		this.earthAtLeft.splitDirection = Cesium.SplitDirection.LEFT;
		this.earthAtRight.splitDirection = Cesium.SplitDirection.RIGHT;
	},

	/**
	 * 移除卷帘
	 */
	removeSplitLayer() {
		document.body.removeChild(this.slider);
		if (this.earthAtLeft) {
			this._viewer.imageryLayers.remove(this.earthAtLeft); //移除图层
		}
		if (this.earthAtRight) {
			this._viewer.imageryLayers.remove(this.earthAtRight); //移除图层
		}
	},
});

export default ImageLayerSplit;