数字孪生-DTS-孪创城市-天气功能

前言

今天我们来做天气这一板块的功能，主要的功能有

控制天气为晴天，阴天，小雨，小雪。
拖动时间滑块控制一天的时间。
控制三维场景是否为暗黑模式
初始化三维场景功能主要涉及到的组件在weather这里

控制天气为晴天，阴天，小雨，小雪

思路

点击不同的按钮，传入不同的参数，然后根据参数调用飞渡api的weather类里面的api即可，里面可以设置很多丰富天气相关的参数，比如关照强度，云层密度，雨雪效果等等。

kotlin 复制代码

//天气的点击事件
const WeatherClick = (val: any) => {
  fdapi.weather.disableRainSnow()// 清除雨雪效果

  switch (val.name) {
    case '晴天':
      fdapi.weather.setCloudDensity(0)// 设置云层的密度
      fdapi.weather.setSunIntensity(15)// 设置太阳光照射强度
      break
    case '阴天':
      fdapi.weather.setCloudDensity(0.8)
      fdapi.weather.setCloudParam([0.6, 0.6, 0.6, 1], 3)// 设置云效参数
      fdapi.weather.setLowCloud(0.7, 0.5, 0.2, 5, 0)// 设置低云层效果参数
      fdapi.weather.setSunIntensity(7)
      break
    case '小雨':
      fdapi.weather.setCloudDensity(0.8)
      fdapi.weather.setCloudParam([0.6, 0.6, 0.6, 1], 3)
      fdapi.weather.setLowCloud(0.7, 0.5, 0.2, 5, 0)
      fdapi.weather.setSunIntensity(8)
      fdapi.weather.setRainParam(0.2, 0.2, 0.2, null, 0.2, 0.05)// 设置雨效。注意：开启雨效前需先设置云层的厚度和密度
      break
    case '小雪':
      fdapi.weather.setCloudDensity(0.8)
      fdapi.weather.setCloudParam([0.6, 0.6, 0.6, 1], 3)
      fdapi.weather.setLowCloud(0.7, 0.5, 0.2, 5, 0)
      fdapi.weather.setSunIntensity(8)
      fdapi.weather.setSnowParam(0.2, 0.2, 0.2, null, 0.2, 0.05)// 设置雪效。注意：开启雨效前需先设置云层的厚度和密度
      break
    default:
      break
  }
}

涉及到的飞渡api

主要是在weather这个类里面的api

设置云层的密度-fdapi.weather.setCloudDensity(0)
设置太阳光照射强度-fdapi.weather.setSunIntensity(15)
设置云效参数-fdapi.weather.setCloudParam([0.6, 0.6, 0.6, 1], 3)
设置雨效-fdapi.weather.setRainParam(0.2, 0.2, 0.2, null, 0.2, 0.05)
设置雪效-fdapi.weather.setSnowParam(0.2, 0.2, 0.2, null, 0.2, 0.05)
清除雨雪效果-fdapi.weather.disableRainSnow()

拖动时间滑块控制一天的时间

思路

在el-slider的change事件中，调用飞渡api中的setDateTime接口即可，主要是入参的格式需要格式化一下，将el-slider绑定的值转换为时间。

typescript 复制代码

const changeTimeSilde = async (val: number) => {
  let result = (val / 60 / 60).toFixed(2).split('.')
  let hour = result[0]
  let minutes = (~~(Number('0.' + result[1]) * 60)).toString().padStart(2, '0')
  fdapi.weather.setDateTime(null, null, null, Number(hour), Number(minutes))// 
}

涉及到的飞渡api

设置日期时间-fdapi.weather.setDateTime((year, month, day, hour, minute, daynightLoop, fn)

控制三维场景是否为暗黑模式

思路

这个功能没什么好讲的，主要的效果就是场景的亮度会变暗。点击按钮然后往飞渡的api里面传一个bool值即可

kotlin 复制代码

const changeDarkMode = (val: boolean) => {
  fdapi.weather.setDarkMode(val)// 开启关闭暗黑模式
}

涉及到的飞渡api

开启/关闭黑暗模式-fdapi.weather.setDarkMode()

初始化三维场景功能

思路

首先需要将视角切换到初始视角，会用到camera这个类，这个类主要都是相机相关功能，里面有一个播放导览功能，在导览里面可以设置我们一开始初始化的天气和时间，只需要传入导览的id即可，所以一开始我们需要获取到acp工程里面所有的导览，同样我们也是在视频流实例化完成之后获取，并将他存放在pinia中。

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);// 页面初始化完成

    const animationObj: any = {}
    const { data } = await fdapi.camera.getAnimationList()// 获取导览列表
    data.forEach((item: { id: string; name: string }) => {
        animationObj[item.name] = item.id
    })
    DigitalTwinStore.setAnimationObj(animationObj)
}

然后将时间设置为初始时间，将模式退出暗黑模式。

ini 复制代码

//初始化天气
const weatherInit = () => {
  fdapi.camera.playAnimation(DigitalTwinStore.animationObj['初始视角'])// 播放导览
  isDark.value = false
  currentTime.value = 8 * 60 * 60 + 53 * 60
}

涉及到的飞渡api

获取导览列表-fdapi.camera.getAnimationList()
播放导览-fdapi.camera.playAnimation(DigitalTwinStore.animationObj['初始视角'])