当前位置：首页 > article >正文

iClient3D for Cesium在Vue中快速实现场景卷帘

article 2024/12/25 5:13:41

作者：gaogy

1、背景

iClient3D for Cesium是由SuperMap提供的一个前端3D地图客户端，提供了丰富的功能与接口，使得开发者能够在Web应用中快速集成并展现3D地理信息。而在Vue框架中集成iClient3D，不仅可以利用Vue的响应式特性提高开发效率，还可以通过简洁的代码实现丰富的交互效果。通过结合Vue的组件化思维和iClient3D的强大功能，开发者可以快速实现复杂的3D场景效果。

在动态效果丰富的地图场景中，场景卷帘是一个常用的功能，通常用于展示不同位置例如地上地下的数据。SuperMap iClient3D for Cesium官网已有场景卷帘示例(示例地址：http://support.supermap.com.cn:8090/webgl/Cesium/examples/webgl/editor.html#rollerShutter)，但是其代码较多，且使用较老的Vue代码书写方式，故本文将详细介绍在Vue setup语法糖下如何使用iClient3D for Cesium封装的Hook快速实现一个场景卷帘效果，帮助开发者通过简单的步骤，在项目中实现场景卷帘功能。

2、卷帘效果

iClient3D for Cesium实现场景卷帘

3、Vue Hook 实现场景卷帘

具体封装iClient3D for Cesium的 hook 如下：

import { ref, onMounted, onBeforeUnmount } from 'vue'

export default function useCustomRollerShutter(s3mLayers, rollDOMID) {
  let rollDOM = null
  const _rollerShutterConfig = ref({ startX: 0.33, startY: 0.33, endX: 0.66, endY: 0.66, index: 0.66 })
  const _scratchSwipeRegion = new Cesium.BoundingRectangle()
  const updateSwipeRegion = () => {
    Cesium.BoundingRectangle.unpack([_rollerShutterConfig.value.startX, 0, 1, 1], 0, _scratchSwipeRegion)
  }
  const mouseMoveHandler = (e) => {
    e.preventDefault()
    rollDOM.style.left = `${e.clientX}px`
    _rollerShutterConfig.value.startX = e.clientX / document.body.clientWidth
    updateSwipeRegion()
    for (const layer of s3mLayers) layer.swipeRegion = _scratchSwipeRegion
  }
  const onMouseDown = () => {
    _rollerShutterConfig.value.index = 1
    document.addEventListener('mousemove', mouseMoveHandler)
  }
  const onMouseUp = () => document.removeEventListener('mousemove', mouseMoveHandler)
  const startRollerShutter = () => {
    rollDOM.style.display = 'block'
    updateSwipeRegion()
    for (const layer of s3mLayers) {
      layer.swipeEnabled = true
      layer.swipeRegion = _scratchSwipeRegion
    }
  }
  const closeRollerShutter = () => {
    rollDOM.style.display = 'none'
    for (const layer of s3mLayers) layer.swipeEnabled = false
  }
  onMounted(() => {
    rollDOM = document.getElementById(rollDOMID)
    rollDOM.addEventListener('mousedown', onMouseDown)
    document.addEventListener('mouseup', onMouseUp)
  })
  onBeforeUnmount(() => {
    rollDOM.removeEventListener('mousedown', onMouseDown)
    document.removeEventListener('mouseup', onMouseUp)
    document.removeEventListener('mousemove', mouseMoveHandler)
  })
  return { startRollerShutter, closeRollerShutter }
}

其中，s3mLayers 是需要参加卷帘的S3MTilesLayer数组，rollDOMID 是卷帘的 DOM 元素 id；hook 返回的是两个函数，其中 startRollerShutter 是开启卷帘的方法，而 closeRollerShutter 是关闭卷帘的方法。

4、Vue 页面使用 Hook

<script setup>
import useCustomRollerShutter from '@/hooks/useCustomRollerShutter'

const viewerContainer = document.getElementById('app')
window.viewer = new Cesium.Viewer(viewerContainer, { infoBox: false })
window.viewer.scene.open('http://www.supermapol.com/realspace/services/3D-CBD/rest/realspace')

const layers = window.viewer.scene.layers.layerQueue
const { startRollerShutter, closeRollerShutter } = useCustomRollerShutter(layers, 'vertical-slider-left')
</script>

<template>
  <div style="display: none" class="vertical-slider" id="vertical-slider-left" data-slider="left"></div>
  <el-card class="card">
    <el-button type="primary" @click="startRollerShutter">开启卷帘</el-button>
    <el-button type="primary" @click="closeRollerShutter">关闭卷帘</el-button>
  </el-card>
</template>