思路之模型卷帘和影像卷帘对比

自己还没有试过感觉这个思路没问题

1 模型卷帘

1. 2个viewer组成的每个宽 50%
2. 设置左边宽

.left{
    
    
	width:100%;
}

3. 然后右边覆盖在上面就行了

参考文章

2 影像卷帘

这个参考官网即可，理论上也可以使用上面的方法来实现，后续有空再具体操作一下。
https://sandcastle.cesium.com/?src=Imagery%20Layers%20Split.html&label=All

var viewer = new Cesium.Viewer("cesiumContainer", {
    
    
  imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
    
    
    url:
      "https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer",
  }),
  baseLayerPicker: false,
  infoBox: false,
});

var layers = viewer.imageryLayers;
var earthAtNight = layers.addImageryProvider(
  new Cesium.IonImageryProvider({
    
     assetId: 3812 })
);
earthAtNight.splitDirection = Cesium.ImagerySplitDirection.LEFT; // Only show to the left of the slider.

// Sync the position of the slider with the split position
var slider = document.getElementById("slider");
viewer.scene.imagerySplitPosition =
  slider.offsetLeft / slider.parentElement.offsetWidth;

var handler = new Cesium.ScreenSpaceEventHandler(slider);

var moveActive = false;

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;
}

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);