Cesium中实现模型卷帘对比

一、实现效果

二、实现步骤

1.创建对比分割线

代码如下：

  <div id="slider" v-show="isslider" ></div>

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

2.绑定滑块移动事件

代码如下

// 获取滑块元素
      slider = document.getElementById("slider");
      // 设置分隔线位置与滑块位置同步
      viewer.scene.splitPosition = slider.offsetLeft / slider.parentElement.offsetWidth;
      // 创建一个新的屏幕空间事件处理对象
      const handler = new Cesium.ScreenSpaceEventHandler(slider);
      // 设置鼠标按下事件处理函数
      handler.setInputAction(function () {
        moveActive = true; // 设置移动激活标志为true
      }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
      handler.setInputAction(function () {
        moveActive = true; // 设置移动激活标志为true
      }, Cesium.ScreenSpaceEventType.PINCH_START);
      // 设置鼠标移动事件处理函数
      handler.setInputAction(move, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
      handler.setInputAction(move, Cesium.ScreenSpaceEventType.PINCH_MOVE);
      // 设置鼠标抬起事件处理函数
      handler.setInputAction(function () {
        moveActive = false; // 设置移动激活标志为false
      }, Cesium.ScreenSpaceEventType.LEFT_UP);
      handler.setInputAction(function () {
        moveActive = false; // 设置移动激活标志为false
      }, Cesium.ScreenSpaceEventType.PINCH_END);
   let moveActive = false;
  // 定义滑块移动事件的处理函数
  const move = (movement) => {
    if (!moveActive) {
      return; // 如果不在移动状态，则返回不执行任何操作
    }
    const relativeOffset = movement.endPosition.x; // 获取滑块移动的相对偏移量
    const splitPosition = (slider.offsetLeft + relativeOffset) / slider.parentElement.offsetWidth; // 计算新的分割位置
    slider.style.left = `${100.0 * splitPosition}%`; // 更新滑块的CSS位置
    viewer.scene.splitPosition = splitPosition; // 更新viewer的分隔线位置
  }

---

总结

本博客也是对自己学习过程的一个记录，代码大多也是学习借鉴网上的。