cesium 放大、缩小组件

实现效果：

 点击 “+”，放大；长按 “+”，持续放大。

点击 “-”，缩小；长按 “-”，持续缩小。

组件代码如下：

<template>

  <div class="flex-column-even right-bottom-container">
    <div @click="zoomIn" @mousedown="zoomInMouseDown" @mouseup="myMouseUp">
      <el-icon>
        <Plus/>
      </el-icon>
    </div>
    <div @click="zoomOut" @mousedown="zoomOutMouseDown" @mouseup="myMouseUp">
      <el-icon>
        <Minus/>
      </el-icon>
    </div>
  </div>

</template>

<script setup lang="ts">

import {ref} from "vue";
import {Minus, Plus} from "@element-plus/icons-vue";

const isPressing = ref<boolean>(false)

let interval: any = null

function myMouseUp() {
  isPressing.value = false
  clearInterval(interval)
}

/* 放大 */
function zoomIn() { // 单击放大
  let position = window.viewer.camera.position;
  let cameraHeight = window.viewer.scene.globe.ellipsoid.cartesianToCartographic(position).height;
  // 每次缩小 20 倍，参数可改
  let moveRate = cameraHeight / 20.0;
  window.viewer.camera.moveForward(moveRate);
}

function zoomInMouseDown() { // 长按放大
  isPressing.value = true
  if (isPressing.value) {
    interval = setInterval(() => {
      zoomIn()
    }, 10) // 设置间隔时间以控制放大和缩小的速度
  }
}

/* 缩小 */
function zoomOut() { // 单击缩小
  let position = window.viewer.camera.position;
  let cameraHeight = window.viewer.scene.globe.ellipsoid.cartesianToCartographic(position).height;
  // 每次缩小 20 倍，参数可改s
  let moveRate = cameraHeight / 20.0;
  window.viewer.camera.moveBackward(moveRate);
}

function zoomOutMouseDown() { // 长按缩小
  isPressing.value = true
  if (isPressing.value) {
    interval = setInterval(() => {
      zoomOut()
    }, 10) // 设置间隔时间以控制放大和缩小的速度
  }
}

</script>

<style scoped lang="scss">

.flex-column-even {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

.right-bottom-container {
  background: rgba(20, 29, 36, 0.9);
  border-radius: 20px;
  width: 30px;
  height: 90px;
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 1;
  border: 1px solid rgba(126, 132, 136, 0.5);

  div {
    color: #FFFFFF;
    font-size: 14px;
  }

  :deep(.el-icon) {
    font-size: 18px;
  }
}

</style>