数字孪生-DTS-孪创城市-导览功能、虚拟现实

前言

今天,我们要聊的是dts的导览功能是如何实现的,这个功能非常适合做演示,汇报使用,点击城市漫游即可打开,以及虚拟现实功能,用于展示一些细节上的东西。

导览功能

需求

完成城市导览功能,当点击城市漫游时,开启导览功能,点击每一项导览,开始播放导览,再次点击时退出。

思路

在animation这个类里面,我们先获取到所有的导览数据,然后通过camera这个类的播放功能即可实现。

首先获取所有的导览数据,使用的是 fdapi.camera.getAnimationList()这个方法,其返回的数据中会有id和name属性。可以发现我们的导览需要展示一个图片,这个图片资源需要从另一个api获取,叫做 fdapi.camera.getAnimationImage(name),传入的是导览的name字段,我们可以在animation挂载时获取数据。

typescript 复制代码
const animationList = ref<{ name: string; id: number; img: string }[]>([])
onMounted(async () => {
  const { data } = await fdapi.camera.getAnimationList();// 获取导览列表
  data.forEach(async (item: { id: number, name: string, img: string }) => {
    const {image} = await fdapi.camera.getAnimationImage(item.name)// 获取导览图片
    const img = `data:image/png;base64,${image}`
    animationList.value.push({
      name: item.name,
      id: item.id,
      img
    })
  })
})

然后我们只需要在点击每一个导览是播放导览即可完成,这个api传入的是id字段

typescript 复制代码
const clickAnimation = (item: { id: number, name: string }) => {
  fdapi.camera.playAnimation(item.id)// 开始播放导览
}

当再次点击时,我们调用fdapi.camera.stopAnimation();即可停止播放导览,这是在EquipmentManagement下的index文件。

ini 复制代码
 exit: () => {
      animationShow.value = false
      fdapi.camera.stopAnimation();
    }
涉及到的飞渡api
  1. 开启播放导览-fdapi.camera.playAnimation(item.id)

  2. 停止播放导览-fdapi.camera.stopAnimation()

  3. 获取导览列表-fdapi.camera.getAnimationList()

  4. 获取导览图片- fdapi.camera.getAnimationImage(item.name)

虚拟现实

需求

当点击虚拟现实时,进入全景图状态,再次点击时则退出。

思路

首先我们需要在文件资源中准备好一张全景图图片,把他放在我们的library文件夹下。

接下来将我们的资源加载到我们的项目中来,通过fdapi.panorama.add方法进行添加,然后设置我们的一个相机视角,让全景图与我们初始视角吻合,通过我们的老朋友fdapi.camera.set()方法进行添加。这里有一个小技巧就是在我们的cloud里面有一个api测试入口,我们可以在面板中先调整好相机的一个视角,然后找到camera中点击get方法即可拿到此时此刻的一个位置。

然后只需要调用fdapi.panorama.enter(panoramaId)方法即可进入全景图中,为了让视觉效果更好一点,我们设置一个延时定时器,这样我们就实现了进入全景图功能了,注意这个图片资源路径需要一致。

typescript 复制代码
let EnterTimeout: any = null
const panoramaId = 'VR'

export const initVR = async () => {
  await fdapi.panorama.add({
    id: panoramaId,
    imagePath: '@path:东方之门.jpg',
    coordinate: [564536.056016, 3466569.477578, 233.196602],
    coordinateType: 0, //坐标系类型,取值范围:0为Projection类型,1为WGS84类型,2为火星坐标系(GCJ02),3为百度坐标系(BD09),默认值:0
    yaw: -48, //方向
    onTerrain: false, //是否贴地,注意:设置为贴地后offset偏移量的Z轴会失效
    offset: [0, 0, 0] //偏移量
  })

  fdapi.camera.set(564536.056016, 3466569.477578, 233.196602, -2.069732, 169.979553, 2)
  EnterTimeout = setTimeout(() => {
    fdapi.panorama.enter(panoramaId)
  }, 2000)
}

接下来我们在退出时,做一些清理操作,退出全景图模式,删除全景图对象,删除定时器,即可。

javascript 复制代码
export const exitVR = async () => {
  await fdapi.panorama.exit()
  await fdapi.panorama.delete(panoramaId)
  if (EnterTimeout) clearTimeout(EnterTimeout)
}
涉及的飞渡api
  1. 添加一个或多个Panorama全景图对象-fdapi.panorama.add()
  2. 设置相机视角-fdapi.camera.set()
  3. 进入全景图模式-fdapi.panorama.enter(panoramaId)
  4. 退出全景图模式-fdapi.panorama.exit()
  5. 删除全景图对象-fdapi.panorama.delete(panoramaId)
相关推荐
打不着的大喇叭40 分钟前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
无我Code1 小时前
2025----前端个人年中总结
前端·年终总结·创业
程序猿阿伟1 小时前
《前端路由重构:解锁多语言交互的底层逻辑》
前端·重构
Sun_light1 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子1 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
莫空00001 小时前
Vue组件通信方式详解
前端·面试
呆呆的心1 小时前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
susnm1 小时前
Dioxus 与数据库协作
前端·rust
优雅永不过时_v1 小时前
基于vite适用于 vue和 react 的Three.js低代码与Ai结合编辑器
前端·javascript
小皮侠1 小时前
nginx的使用
java·运维·服务器·前端·git·nginx·github