Cesium【卷帘】、图层对比。

运用API .splitDirection

// 添加图层
const { Viewer } = window
const viewer:Cesium.Viewer = Viewer
const layer1 = new Cesium.UrlTemplateImageryProvider({
	url: "http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
	minimumLevel: 1,
	maximumLevel: 18,
});
const layer2 = new Cesium.UrlTemplateImageryProvider({
	url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
	minimumLevel: 1,
	maximumLevel: 18,
 });

• 两个影像均来自高德地图

const layers = viewer.imageryLayers;
const earthAtRight = layers.addImageryProvider(layer1);
const earthAtLeft = layers.addImageryProvider(layer2);

• 将影像添加到cesium图层中

earthAtLeft.splitDirection = Cesium.SplitDirection.LEFT;
earthAtRight.splitDirection = Cesium.SplitDirection.RIGHT;

• 设置影像位于左边 或者右边

const init = (viewer: Cesium.Viewer) => {
  if(handler){
    handler.destroy()
    handler = null
  }
  const slider = document.getElementById("slider");
  if (slider) {
    const dom: HTMLCanvasElement = <HTMLCanvasElement>slider;
    if (dom.parentElement) {
      handler = new Cesium.ScreenSpaceEventHandler(dom);
      viewer.scene.splitPosition =
        dom.offsetLeft / dom.parentElement.offsetWidth;
      let moveActive = false;
      function move(movement: any) {
        if (!moveActive) {
          return;
        }
        const relativeOffset = movement.endPosition.x;
        if (dom.parentElement) {
          const splitPosition =
            (dom.offsetLeft + relativeOffset) / dom.parentElement?.offsetWidth;
          dom.style.left = `${100.0 * splitPosition}%`;
          viewer.scene.splitPosition = splitPosition; // 设置卷帘左右分区范围(0-1)之间
        }
      }
      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);
    }
  }
};

• 3Dtileset卷帘

const { Viewer } = window
  const viewer:Cesium.Viewer = Viewer
 const  tileset = viewer.scene.primitives.add(
    new Cesium.Cesium3DTileset({
      // url: './titles/tileset.json'
      url: "./titles/dyt/tileset.json",
      maximumScreenSpaceError: 0.8, //空间误差
      maximumMemoryUsage: 100, //最大内容
    })
  ) as Cesium.Cesium3DTileset;
  viewer.zoomTo(tileset);
  tileset.readyPromise.then((tile)=> {
     viewer.scene.camera.flyToBoundingSphere(tile.boundingSphere);
  })
  tileset.splitDirection = Cesium.SplitDirection.RIGHT;

• 初始化 在HTML中添加个dom元素id值为slider样式为

#slider {
  position: absolute;
  left: 50%;
  top: 0px;
  background-color: #d3d3d3;
  width: 5px;
  height: 100%;
  z-index: 9999;
}

#slider:hover {
  cursor: ew-resize;
}