arcgis卷帘对比

.content {
    width: 100%;
    height: 100%;
    position: relative;

    .map {
        position: absolute;
        width: 100%;
        height: 100%;
        &:nth-child(2){
            z-index: -1;
        }
    }

    /* 垂直分割线 */
    .vertical_line {
      position: absolute;
      top: 0%;
      left: 48%;
      bottom: 0%;
      z-index: 1;
      float: left;
      width: 10px;
      background-color: rgba(50, 50, 50, 0.75);
      user-select: none;
    }

    /* 圆按钮 */
    .circle {
      width: 30px;
      height: 30px;
      background-color: rgba(50, 50, 50, 0.75);
      border-radius: 50%;
      position: absolute;
      top: 40%;
      left: 40%;
      bottom: 4.2%;
      z-index: 2;
      margin-left: -10px;
      user-select: none;
    }

    /* 左箭头 */
    .triangle-left {
      width: 0;
      height: 0;
      border-top: 4px solid transparent;
      border-right: 7px solid white;
      border-bottom: 4px solid transparent;
      position: absolute;
      top: 40%;
      margin-left: -8px;
      margin-top: 12px;
      z-index: 3;
      user-select: none;
    }

    /* 右箭头 */
    .triangle-right {
      width: 0;
      height: 0;
      border-top: 4px solid transparent;
      border-left: 7px solid white;
      border-bottom: 4px solid transparent;
      position: absolute;
      top: 40%;
      margin-left: 10px;
      margin-top: 12px;
      z-index: 3;
      user-select: none;
    }


  }

<div class="content ">
      <div id="view1" class="map"></div>
      <div id='view2' class="map"></div>

      <!-- 垂直分割线 -->
      <div id="swipe_split_box">
        <div id="vertical_line" class="vertical_line"></div>
        <div id="swipe_circle" class="circle"></div>
        <div id="swipe_triangle_left" class="triangle-left"></div>
        <div id="swipe_triangle_right" class="triangle-right"></div>
      </div>
    </div>

//mapList = {}
//ArcGISApi = let modules = ["esri/Map",  ...]  export { modules }
	


rollerLoad() {
      let that = this;
      let ArcGISApi = that.ArcGISApi;
      var esriContainerDiv = 'view1'
      var esriSwipeContainerDiv = 'view2'
      loadModules(modules, )
        .then(that.TDTinstance)
        .then(() => {
          // 原始地图
          mapList['view1'] = new ArcGISApi.SceneView({
            container: esriContainerDiv,
            spatialReference: {
              wkid: 4490
            },
            map: mapView,
            zoom: 12,
            camera: {
              position: [117.012375, 36.62, 9000],
              tilt: 30,
            },
          });

          // 新生地图
          mapList['view2'] = new ArcGISApi.SceneView({
            container: esriSwipeContainerDiv,
            spatialReference: {
              wkid: 4490
            },
            map: mapSecond,
            zoom: 12,
            camera: {
              position: [117.012375, 36.62, 9000],
              tilt: 30,
            },
          });

          mapList['view1'].ui.components = [];
          mapList['view2'].ui.components = [];


          // 分割线移动状态
          var isSlitLineDragging = false;
          document.getElementById('swipe_split_box').onmousedown = function () {
            isSlitLineDragging = true
          }
          document.getElementById('swipe_split_box').onmouseup = function () {
            isSlitLineDragging = false
          }

          /**
           * 分割线移动事件
           * @param {Object} e 分割线移动事件对象
           */
          function pointMove(e) {
            e.stopPropagation()
            updateMapSwipeLocation(e.x)
          };

          /**
           * 更新卷帘地图容器展开位置
           * @param {Number} location 当前的位置
           * @param {Boolean} isInit 是否是初始化
           */
          function updateMapSwipeLocation(location, isInit) {
            const swipeMap = document.getElementById(esriSwipeContainerDiv).getBoundingClientRect()
            const offsetX = location;
            if (isSlitLineDragging || isInit) {
              document.getElementById(esriSwipeContainerDiv).style.cssText = 'clip:rect(0px,' + offsetX + 'px, ' + swipeMap.height + 'px,0px)';
              document.getElementById(esriSwipeContainerDiv).style.zIndex = '1';
              document.getElementById('vertical_line').style.left = (offsetX - 50 + (swipeMap.width * 0.024)) + 'px ';
              document.getElementById('swipe_circle').style.left = (offsetX - 50 + (swipeMap.width * 0.024)) + 'px ';
              document.getElementById('swipe_triangle_left').style.left = (offsetX - 50 + (swipeMap.width * 0.024)) + 'px ';
              document.getElementById('swipe_triangle_right').style.left = (offsetX - 50 + (swipeMap.width * 0.024)) + 'px ';
            }
          };

          /**
           * 同步两个视图容器
           * @param {Object} view 视图容器
           * @param {Object} others 其它的视图容器
           * @return {Object} 监听事件
           */

          function synchronizeView(view, others) {
            others = Array.isArray(others) ? others : [others]

            let viewpointWatchHandle
            let viewStationaryHandle
            let otherInteractHandlers
            let scheduleId

            const clear = function () {
              if (otherInteractHandlers) {
                otherInteractHandlers.forEach(function (handle) {
                  handle.remove()
                })
              }
              viewpointWatchHandle && viewpointWatchHandle.remove()
              viewStationaryHandle && viewStationaryHandle.remove()
              scheduleId && clearTimeout(scheduleId)
              otherInteractHandlers = viewpointWatchHandle = viewStationaryHandle = scheduleId = null
            }

            const interactWatcher = view.watch('interacting, animation', (newValue) => {
              if (!newValue) {
                return
              }
              if (viewpointWatchHandle || scheduleId) {
                return
              }

              // start updating the other views at the next frame
              scheduleId = setTimeout(function () {
                scheduleId = null
                viewpointWatchHandle = view.watch('viewpoint', (newValue) => {
                  others.forEach(function (otherView) {
                    otherView.viewpoint = newValue
                  })
                })
              }, 0)

              // stop as soon as another view starts interacting, like if the user starts panning
              otherInteractHandlers = others.map(otherView => {
                return ArcGISApi.WatchUtils.watch(otherView, 'interacting,animation',
                  (value) => {
                    if (value) {
                      clear()
                    }
                  }
                )
              })

              // or stop when the view is stationary again
              viewStationaryHandle = new ArcGISApi.WatchUtils.whenTrue(view, 'stationary', clear)
            })

            return {
              remove: function () {
                this.remove = function () {}
                clear()
                interactWatcher.remove()
              },
            }
          };


          /**
           * 同步两个视图容器入口函数
           * @param {Object} views 多个视图容器
           * @return {Object} 移除事件
           */
          function synchronizeViews(views) {
            let handles = views.map(function (view, idx, views) {
              const others = views.concat()
              others.splice(idx, 1)
              return synchronizeView(view, others)
            })
            return {
              remove: function () {
                this.remove = function () {}
                handles.forEach(function (h) {
                  h.remove()
                })
                handles = null
              },
            }
          };

          mapList['view1'].on('pointer-move', (e) => {
            pointMove(e)
          })
          mapList['view2'].on('pointer-move', (e) => {
            pointMove(e)
          })

          // 设置初始位置
          const swipeMap = document.getElementById(esriSwipeContainerDiv).getBoundingClientRect();

          updateMapSwipeLocation(swipeMap.width * 0.5, true);
          // 同步视图
          synchronizeViews([mapList['view1'], mapList['view2']])

        })
    },