项目地址

https://github.com/zhengjie9510/webgis-demo

实现效果

实现方法

参考官方分屏示例：传送门
具体代码

/**
* @param {Cesium.Viewer} viewer 控制点
*/
split: function (viewer) {
  const earthAtNight = viewer.imageryLayers.addImageryProvider(
    new Cesium.OpenStreetMapImageryProvider({
      url: 'https://a.tile.openstreetmap.org/'
    })
  );
  earthAtNight.splitDirection = Cesium.SplitDirection.RIGHT; // Only show to the left of the slider.

  // Sync the position of the slider with the split position
  const slider = document.getElementById("slider");
  viewer.scene.splitPosition = slider.offsetLeft / slider.parentElement.offsetWidth;
  const handler = new Cesium.ScreenSpaceEventHandler(slider);
  let moveActive = false;
  function move(movement) {
    if (!moveActive) {
      return;
    }
    const relativeOffset = movement.endPosition.x;
    const splitPosition = (slider.offsetLeft + relativeOffset) / slider.parentElement.offsetWidth;
    slider.style.left = `${100.0 * splitPosition}%`;
    viewer.scene.splitPosition = splitPosition;
  }
  handler.setInputAction(function () {
    moveActive = true;
  }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
  handler.setInputAction(function () {
    moveActive = true;
  }, Cesium.ScreenSpaceEventType.PINCH_START);
  
  handler.setInputAction(move, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
  handler.setInputAction(move, Cesium.ScreenSpaceEventType.PINCH_MOVE);
  
  handler.setInputAction(function () {
    moveActive = false;
  }, Cesium.ScreenSpaceEventType.LEFT_UP);
  handler.setInputAction(function () {
    moveActive = false;
  }, Cesium.ScreenSpaceEventType.PINCH_END);
}