vue3 + openlayers---实现卷帘效果

<div id="ol-map" @mouseup="Mouseup" @mousemove="MouseMove" class="map_cotainer">
  <div
     class="swiper"
     :style="{ left: swiperValue + '%' }"
     @mousedown="Mousedown"
     ref="swiperControlDom"
   ></div>
 </div>
 <button @click="removeSwiper">取消卷帘</button>

const swiperControlDom = ref(null)
let swiperValue = ref(50)
let startX = 0
let currentX = 0
let swipeLayer

onMounted(() => {
  // 卷帘图层
  swipeLayer = new Tile({
    source: new XYZ({
      url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}'
    })
  })
  window.olMap.addLayer(swipeLayer)
  setSwipeLayer(swipeLayer)
  window.olMap.addControl(
    new Control({
      element: swiperControlDom.value
    })
  )
})

let isMoving = ref(false)
const Mousedown = (event) => {
  isMoving.value = true
  startX = event.clientX || event.touches[0].clientX
  currentX = startX
}
const Mouseup = () => {
  isMoving.value = false
}
const MouseMove = (event) => {
  if (isMoving.value) {
    const deltaX = (event.clientX || event.touches[0].clientX) - currentX
    currentX = event.clientX || event.touches[0].clientX
    swiperValue.value += (deltaX / window.innerWidth) * 100
  }
}

function setSwipeLayer(swipeLayer) {
  if (swipeLayer) {
    swipeLayer.on('prerender', prerender)
    swipeLayer.on('postrender', postrender)
  }
}
function prerender(e) {
  const ctx = e.context
  const hOrw = ctx.canvas.width
  const nVal = (hOrw * swiperValue.value) / 100 //根据分割线显示
  ctx.save()
  ctx.beginPath()
  ctx.rect(0, 0, nVal, ctx.canvas.height)
  ctx.clip() // 裁剪
  window.olMap.render()
}
function postrender(e) {
  const ctx = e.context
  ctx.restore()
}

// 取消卷帘
function removeSwiper() {
  if (swipeLayer) {
    swipeLayer.un('prerender', prerender)
    swipeLayer.un('postrender', postrender)
    swipeLayer = null
    document.querySelector('.swiper').style.display = 'none'
  }
}


<style lang="scss" scoped>
button {
  position: fixed;
  top: 10px;
  left: 10px;
}
#ol-map {
  height: 100%;
}
.map_cotainer {
  width: 100%;
  height: 95vh;
  position: relative;
}
.swiper {
  width: 10px;
  height: 95vh;
  position: absolute;
  z-index: 9999;
  transform: translate(-50%);
  background-color: yellowgreen;
  cursor: pointer;
}
</style>