数字孪生-DTS-孪创城市-全局功能

前言

接下我将带领大家实现如下功能，全局ui的显隐，vtpk图层树的显隐，vtpk标注的显隐，三个功能，主要都在header这个组件中控制。

全局ui的显隐

需求

当点击按钮时，需要对两边以及header组件进行隐藏，然后显示出explorer的ui控制组件。

解决办法

通过全局的状态UIShow管理，因为需要控制其他组件的显示和隐藏所以使用paina。

typescript 复制代码

import { defineStore } from 'pinia'

export const useToolStore = defineStore('tool',{
    state: () => {
        return {
            UIShow:false,
        }
    },
    actions: {
        setUIShow(val:boolean){
            this.UIShow = val
        },
    }
})

然后在点击事件中调用飞渡的api即可

objectivec 复制代码

// UI显示-点击事件
const UIClick = () => {
  toolStore.setUIShow(!UIShow.value);
  fdapi.settings.setMainUIVisibility(UIShow.value)
}

主要涉及的飞渡api

scss 复制代码

fdapi.settings.setMainUIVisibility() // 控制主界面UI元素是否可见

vtpk图层树的显隐和vtpk标注的显隐

需求

当点击按钮时，需要显示出vtpk图层树信息和标注信息再次点击时需要隐藏

解决办法

首先需要获取到所有的图层树信息，拿到他的name和id，然后调用飞渡的fdapi.infoTree.show方法即可显示，vtpk道理一致。所以首先我们需要拿到所有的图层树信息，考虑到后续我们还会使用到这些图层信息，所以我们将他放到全局状态管理库中，并且在视频流初始化完成之后就去拿这些信息，在DigitalTwinPlayer实例对象中有一个onReady方法，我们在这里去设置信息。

yaml 复制代码

 new DigitalTwinPlayer(HostConfig.Player, {
    domId: 'player',
    apiOptions: {
      onReady: onReady,
      onEvent: onEvent
    },
    ui: {
      mainUI: false, // ui面板显示
      campass: false // 指北针显示
    }
  })

typescript 复制代码

export const _onReady = async () =>{
    await fdapi.reset(1 | 2 | 4)// 对三维场景执行重置操作
    const { infotree } = await fdapi.infoTree.get();// 获取图层树信息
    const infoTreeObj:any = {};
    infotree.forEach((item: { iD: string; name: string }) => {
        infoTreeObj[item.name] = item.iD
      })
      DigitalTwinStore.setDigitalTwin(infoTreeObj);// 设置信息树
      DigitalTwinStore.setIsOnReady(true);// 页面初始化完成
}

值得注意的是，当我们直接在vue的生命周期中调用飞渡的api时，由于视频流还未加载完成，所以是拿不到图层信息的，所以我们需要在视频流加载完成之后再去拿，解决方法是设置一个全局变量IsOnReady，然后页面初始化完成之后设置为true，然后再去渲染我们对应的组件（左右两边面板，头部header）。

当我们点击显示信息标注之后刷新页面发现信息标注还在，那是因为没有重置视频流，所以我们需要在_onReady对三维场景执行重置操作

接下来是点击事件

scss 复制代码

let vtpkName = ''
onMounted(async () => {
  get_Date_Time()
  const {vtpks} = await fdapi.settings.getLabelLayer()// 获取场景内所有的VTPK标注信息
  if (vtpks.length > 0) {
    vtpkName = vtpks[0]
  }
  timer.value = setInterval(() => {
    get_Date_Time()
  }, 1000)
})

dart 复制代码

// vtpk显示-点击事件
const vtpkClick = async () => {
  vtpkShow.value = !vtpkShow.value
  if (vtpkShow.value) {
    fdapi.infoTree.show(DigitalTwinStore.digitalTwin['苏州市vtpk'])// 显示图层信息
    fdapi.settings.setLabelLayer(vtpkName)// 设置显示对应VTPK的标注
  } else {
    fdapi.infoTree.hide(DigitalTwinStore.digitalTwin['苏州市vtpk'])// 隐藏图层信息
    fdapi.settings.removeLabelLayer()// 移除当前显示的VTPK的标注
  }
}

主要涉及的飞渡api

获取图层树信息-fdapi.infoTree.get()
获取场景内所有的vtpk标注信息-fdapi.settings.getLabelLayer()
显示图层信息-fdapi.infoTree.show(DigitalTwinStore.digitalTwin $'苏州市vtpk'$ )
隐藏图层信息-fdapi.infoTree.hide(DigitalTwinStore.digitalTwin $'苏州市vtpk'$ )
设置显示对应VTPK的标注-fdapi.settings.setLabelLayer(vtpkName)
移除当前显示的VTPK的标注-fdapi.settings.removeLabelLayer()
三维场景执行重置操作-fdapi.reset(1 | 2 | 4)

sdk文档在cloud中可以找到哦