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

作者: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 如下:

js 复制代码
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

html 复制代码
<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>

5、总结

本文介绍了一个基于iClient3D for Cesium封装的 vue hook,并演示了其具体用法。旨在帮助开发者快速在Vue项目中,通过简单的步骤实现场景卷帘功能。

相关推荐
木头没有瓜34 分钟前
vscode离线安装插件
ide·vue.js·vscode
伍哥的传说1 小时前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙
yugi9878381 小时前
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
前端
浪裡遊2 小时前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
哈市雪花2 小时前
相机:Camera原理讲解(使用OpenGL+QT开发三维CAD)
qt·3d·交互·相机·图形学·opengl·视角
zhongqu_3dnest2 小时前
3D建模公司的能力与技术
数码相机·3d·虚拟现实·vr制作公司·3d建模公司
旧曲重听12 小时前
最快实现的前端灰度方案
前端·程序人生·状态模式
默默coding的程序猿2 小时前
3.前端和后端参数不一致,后端接不到数据的解决方案
java·前端·spring·ssm·springboot·idea·springcloud
夏梦春蝉3 小时前
ES6从入门到精通:常用知识点
前端·javascript·es6
归于尽3 小时前
useEffect玩转React Hooks生命周期
前端·react.js