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项目中,通过简单的步骤实现场景卷帘功能。

相关推荐
ObjectX前端实验室10 分钟前
从零到一:系统化掌握大模型应用开发【目录】
前端·llm·agent
guoyp212617 分钟前
前端实验(二)模板语法
前端·vue.js
葡萄城技术团队23 分钟前
Excel 转在线协作难题破解:SpreadJS 纯前端表格控件的技术方案与实践
前端·excel
我的xiaodoujiao23 分钟前
Windows系统Web UI自动化测试学习系列3--浏览器驱动下载使用
前端·windows·测试工具·ui
一只小风华~25 分钟前
学习笔记:Vue Router 中的嵌套路由详解[特殊字符]概述
前端·javascript·vue.js
泻水置平地26 分钟前
若依前后端分离版实现前端国际化步骤
前端
Villiam_AY28 分钟前
从后端到react框架
前端·react.js·前端框架
CodeCraft Studio31 分钟前
全球知名的Java Web开发平台Vaadin上线慧都网
java·开发语言·前端·vaadin·java开发框架·java全栈开发·java ui 框架
一只小风华~38 分钟前
Vue Router 命名路由学习笔记
前端·javascript·vue.js·笔记·学习·ecmascript
我是华为OD~HR~栗栗呀42 分钟前
前端面经-高级开发(华为od)
java·前端·后端·python·华为od·华为·面试