cesium 实战系列之卷帘、图像对比功能

1、创建地图容器的时候同时创建卷帘的容器div idcesiumContainer div idslider/div//卷帘容器 /div2、给卷帘添加样式#slider { position: absolute; left: 50%; top: 0px; background-color: #d3d3d3; width: 5px; height: 100%; z-index: 998; display: none; } #slider:hover { cursor: ew-resize; }3、添加卷帘卷帘的原理很简单无非就是左边加载一个影像右边加载一个影像切换的时候各自替换各自的影像。在页面初始化的时候调用下面的方法图层替换成你自己的图层。let url1 new layerMapUrl(layerName).getURL(); let layer1 layerControl.addMiddleLayer( imageLayer1, new Cesium.WebMapTileServiceImageryProvider({ url: url1, }) ); let url2 new layerMapUrl(Base_ this.rightValue).getURL(); let layer2 layerControl.addMiddleLayer( imageLayer2, new Cesium.WebMapTileServiceImageryProvider({ url: url2, }) ); layer1.splitDirection Cesium.ImagerySplitDirection.LEFT; //图层只在卷帘左边显示 对应NONE\LEFT\RIGHT\TOP\BOTTOM layer2.splitDirection Cesium.ImagerySplitDirection.RIGHT; //图层只在卷帘右边显示 initSplitSlider(); showSplit(); //开启卷帘 关闭卷帘hideSplit()4、卷帘的相关方法//初始化卷帘 function initSplitSlider() { if (viewer) { var slider document.getElementById(slider) viewer.scene.imagerySplitPosition 0.5//Number(slider.style.left) / 100 if (slider.style.left) { // viewer.scene.imagerySplitPosition slider.parentElement.offsetLeft / slider.parentElement.offsetWidth viewer.scene.imagerySplitPosition parseFloat(slider.style.left) / 100 console.log(imagerySplitPosition, parseFloat(slider.style.left)) } else { viewer.scene.imagerySplitPosition 0.5 } var moveActive false function getLeft(obj) { var offset obj.offsetLeft; // if (obj.offsetParent ! null) offset getLeft(obj.offsetParent); while (obj ! window.document.body obj ! null) { offset obj.offsetLeft obj obj.offsetParent } return offset; } function move(movement) { if (!moveActive) { return } var relativeOffset movement.endPosition.x var splitPosition (slider.offsetLeft relativeOffset) / slider.parentElement.offsetWidth slider.style.left 100.0 * splitPosition % viewer.scene.imagerySplitPosition splitPosition } var handler_slider new Cesium.ScreenSpaceEventHandler(slider) handler_slider.setInputAction(function () { moveActive true }, Cesium.ScreenSpaceEventType.LEFT_DOWN) handler_slider.setInputAction(function () { moveActive true }, Cesium.ScreenSpaceEventType.PINCH_START) handler_slider.setInputAction(move, Cesium.ScreenSpaceEventType.MOUSE_MOVE) handler_slider.setInputAction(move, Cesium.ScreenSpaceEventType.PINCH_MOVE) handler_slider.setInputAction(function () { moveActive false }, Cesium.ScreenSpaceEventType.LEFT_UP) handler_slider.setInputAction(function () { moveActive false }, Cesium.ScreenSpaceEventType.PINCH_END) } } //显示卷帘 function showSplit() { $(#slider).show() } //隐藏卷帘 function hideSplit() { $(#slider).hide() }效果如图