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

import { ref, onMounted, onBeforeUnmount } from 'vue'export default function useCustomRollerShutter(s3mLayers, rollDOMID) {let rollDOM = nullconst _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.clientWidthupdateSwipeRegion()for (const layer of s3mLayers) layer.swipeRegion = _scratchSwipeRegion}const onMouseDown = () => {_rollerShutterConfig.value.index = 1document.addEventListener('mousemove', mouseMoveHandler)}const onMouseUp = () => document.removeEventListener('mousemove', mouseMoveHandler)const startRollerShutter = () => {rollDOM.style.display = 'block'updateSwipeRegion()for (const layer of s3mLayers) {layer.swipeEnabled = truelayer.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>

5、总结

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/65503.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

postgresql ERROR: cannot drop the currently open database

postgresql ERROR: cannot drop the currently open database 解释&#xff1a; 这个错误表明你正在尝试删除或者切换当前正在使用的数据库。在PostgreSQL中&#xff0c;一个数据库对应着一个进程&#xff0c;当一个数据库处于打开状态时&#xff0c;你不能直接删除或者切换它…

KaiOS 4.0 | DataCall and setupData implemention

相关文档 1、KaiOS 3.1 系统介绍 KaiOS 系统框架和应用结构(APP界面逻辑)文章浏览阅读842次,点赞17次,收藏5次。对于Java开发者而言,理解JS的逻辑调用是有点困难的。而KaiOS webapp开发又不同于现代的web开发,更像chrome浏览器内嵌模式。在这里梳理一下kaios平台web应用…

【星海随笔】删除ceph

cephadm shell ceph osd set noout ceph osd set norecover ceph osd set norebalance ceph osd set nobackfill ceph osd set nodown ceph osd set pause参考文献&#xff1a; https://blog.csdn.net/lyf0327/article/details/90294011 systemctl stop ceph-osd.targetyum re…

MySQL敏感数据进行加密的几种方法

使用MySQL内置的加密函数 AES_ENCRYPT和AES_DECRYPT函数 方法介绍&#xff1a; AES&#xff08;Advanced Encryption Standard&#xff09;是一种对称加密算法。在MySQL中&#xff0c;可以使用AES_ENCRYPT函数对数据进行加密&#xff0c;使用AES_DECRYPT函数进行解密。这种加密…

「Mac畅玩鸿蒙与硬件48」UI互动应用篇25 - 简易购物车功能实现

本篇教程将带你实现一个简易购物车功能。通过使用接口定义商品结构&#xff0c;我们将创建一个动态购物车&#xff0c;支持商品的添加、移除以及实时总价计算。 关键词 UI互动应用接口定义购物车功能动态计算商品管理列表操作 一、功能说明 简易购物车功能包含以下交互&#…

json的作用?

JSON&#xff08;JavaScript Object Notation&#xff09;是一种轻量级的数据交换格式&#xff0c;具有简洁、易读、易于解析和生成等特点&#xff0c;在前后端数据交互、配置文件、数据存储等多个领域发挥着重要作用&#xff0c;以下是具体介绍&#xff1a; JSON 的作用 数据…

PlantUML 入门使用指南

PlantUML 入门使用指南 一、PlantUML介绍二、PlantUML的用途三、PlantUML的语法及示例3.1 用例图&#xff08;Use Case Diagram&#xff09;3.2 类图&#xff08;Class Diagram&#xff09;3.3 对象图&#xff08;Object Diagram&#xff09;3.4 序列图&#xff08;Sequence Di…

springboot maven 构建 建议使用 --release 21 而不是 -source 21 -target 21,因为它会自动设置系统模块的位置

使用 --release 选项代替 -source 和 -target 是一种更安全、更兼容的方式,特别是在构建使用较新版本 JDK 的项目时。以下是详细解释和建议: 1. 为什么推荐使用 --release 问题点: 使用 -source 和 -target 标志时,仅设置了代码的语言级别和字节码目标版本,但编译器仍可…

快速下载pytorch_geometric

注意&#xff1a;千万不要一上去就使用pip去安装&#xff01;&#xff01;&#xff01; 1.找到GitHub手动下载所需依赖: https://github.com/pyg-team/pytorch_geometric 进入网址后点击此处&#xff1a; 2.点击here进去后寻找自己的torch版本&#xff08;我的是torch2.1.2的…

微服务-1 认识微服务

目录​​​​​​​ 1 认识微服务 1.1 单体架构 1.2 微服务 1.3 SpringCloud 2 服务拆分原则 2.1 什么时候拆 2.2 怎么拆 2.3 服务调用 3. 服务注册与发现 3.1 注册中心原理 3.2 Nacos注册中心 3.3 服务注册 3.3.1 添加依赖 3.3.2 配置Nacos 3.3.3 启动服务实例 …

GNN图神经网络模型详解与代码复现

图结构数据 图结构数据是一种 非线性数据结构 ,由顶点和边组成,能够灵活表达复杂的关系网络。常见的图结构包括: 类型 特点 无向图 边没有方向 有向图 边有明确的方向 加权图 边附加权重信息 层次图 节点间存在层次关系 这种高度灵活的数据组织方式使得图结构特别适合模拟各…

QT-【常用容器类】-QList类 QLinkedList类

QList 和 QLinkedList 是 Qt 框架中提供的两个重要容器类&#xff0c;用于存储和管理一组数据。它们各自具有不同的特点和优缺点&#xff0c;适用于不同的场景。 1. QList 类概述 QList 是一个动态数组类&#xff0c;提供了对元素的快速随机访问。它的实现类似于 C 标准库中的…

SQLAlchemy示例(连接数据库插入表数据)

背景需求 连接数据库&#xff0c;插入表中一些数据。 其用户是新建用户&#xff0c;所以只能插入&#xff0c;不能更新。 再次输入数据则使用更新数据语法&#xff0c;这个没调试。 #! /usr/bin/env python # -*- coding: utf-8 -*-from sqlalchemy import create_engine, …

低代码开发中 DDD 领域驱动的页面权限控制

在低代码开发的领域中&#xff0c;应用安全与灵活性是两大关键考量因素。领域驱动设计&#xff08;DDD&#xff09;作为一种在软件设计领域广泛应用且颇具影响力的方法论&#xff0c;正逐渐在低代码开发的页面权限控制方面展现出其独特的价值与潜力。本文旨在客观地探讨如何借助…

找到一个linux静态库动态库的好资料.3

# 正文 继续整理从这个页面学到的东西&#xff1a;https://tldp.org/HOWTO/Program-Library-HOWTO。 之前的在这里&#xff1a;找到一个linux静态库动态库的好资料.0找到一个linux静态库动态库的好资料.1找到一个linux静态库动态库的好资料.2 这一篇继续看这个: https://tldp…

智能工厂的设计软件 应用场景的一个例子:为AI聊天工具添加一个知识系统 之6

本文提要 一些补充 在为前端和后端 锁定的两个中心词“概念”&#xff08;命题“作文”的 程序 公共逻辑语言 &#xff09;和“描述”&#xff08;谓词“描述” 的 自然 描述语言&#xff09;的基础上 &#xff0c;暂时将中端的中心词 锁定在“环境” &#xff08;情境 “意义…

uniapp小程序实现弹幕不重叠

uniapp小程序实现弹幕不重叠 1、在父组件中引入弹幕组件 <template><!-- 弹幕 --><barrage ref"barrage" class"barrage-content" reloadDanmu"reloadDanmu"></barrage> </template> <script>import barr…

区块链平台安全属性解释

区块链平台安全属性解释 双向认证 解释:双向认证是指在通信过程中,**通信双方都需要对对方的身份进行验证,确保对方是合法的、可信任的实体。**只有双方身份都得到确认后,通信才会被允许进行,从而防止非法用户的接入和数据的窃取或篡改。举例:在基于区块链和联邦学习的数…

nginx 基于 geoip 模块限制地区访问

1、安装 geoip 库 [rootVM-0-15-centos ~]# yum -y install geoip geoip-devel 2、下载并安装 MaxMind 的免费 GeoIP 数据库。这里我选择下载 GeoLite2 数据库&#xff0c;适用于大多数应用。 访问 maxmind 官网&#xff08;https://www.maxmind.com/&#xff09;&#xff0c…

openfeign-一些配置

之前整理过一篇 openfeign的快速使用。openfeign简化服务间调用-笔记-CSDN博客 今天补充一下一些个性化配置。 一 日志&#xff1a; 默认的openfeign不输出日志&#xff0c;想看日志需要单独配置下。 日志级别 public static enum Level {NONE,BASIC,HEADERS,FULL;private…