4DKK-SZXA-private/myJs/myTwice.js

let time = -1

let time2 = -1
let time2Num = 0

// 小人移位函数
const renMoveFu = () => {
  // 底部左侧小人logo和上箭头的dom，拿到dom元素的时候在执行下面的代码
  const bottomClickDom = document.querySelector('.play-control')
  if (bottomClickDom) {
    // 展开导览列表和隐藏导览列表
    const isActiveDom = document.querySelector('.tour-btn .icon-pull-down')

    bottomClickDom.addEventListener('click', () => {

      const flag = isActiveDom.className.includes('active')
      const carListDomAll = document.querySelector('.carList')
      carListDomAll.style.bottom = flag ? '180px' : '100px'

    })

    clearInterval(time2)

  }
}

time = setInterval(() => {

  console.log('定时器执行，获取完所有dom，页面准备完毕');

  if (__sdk && __sdk.Camera && __sdk.Camera.getPose && __sdk.Camera.getPose() && __sdk.Camera.getPose().panoId) {
    clearInterval(time)

    // 整个的小人box
    const carListDomAll = document.querySelector('.carList')
    carListDomAll.style.display = 'block'

    renMoveFu()
    time2 = window.setInterval(() => {

      renMoveFu()

      time2Num++
      console.log('小人移位功能准备完毕,或者没有导览');

      if (time2Num >= 5) {
        clearInterval(time2)
      }

    }, 500);


    // 小人和列表的切换
    const carList1Dom = document.querySelector('.carList1')
    const carList2Dom = document.querySelector('.carList2')
    const carList1_2Dom = document.querySelector('.carList1_2')
    const carList2_2Dom = document.querySelector('.carList2_2')
    carList1_2Dom.onclick = () => {
      carList1Dom.style.display = 'none'
      carList2Dom.style.display = 'block'
      carList2_2Dom.scrollTop = 0
    }

    const carList2_2BackDom = document.querySelector('.carList2_2Back')

    carList2_2BackDom.onclick = () => {
      carList1Dom.style.display = 'flex'
      carList2Dom.style.display = 'none'

    }


    // 动态渲染列表
    let temp1 = ''

    myData.forEach(v1 => {
      let temp2 = ''
      v1.son.forEach(v2 => {
        temp2 += `<div class="c_boxTxt" id=${v2.panoId} _x=${v2.x} _y=${v2.y} _z=${v2.z} _w=${v2.w}>
          <p>
              ${v2.name}
          </p>
        </div>`
      })
      temp1 += `<div class="c_box"><div class="c_boxTit">${v1.name}</div>${temp2}</div>`
    })

    const carList2_2MainDom = document.querySelector('.carList2_2Main')
    carList2_2MainDom.innerHTML = temp1

    const c_boxTxtArr = document.querySelectorAll('.c_boxTxt')

    c_boxTxtArr.forEach(v => {
      v.onclick = () => {
        const id = v.attributes['id'].nodeValue
        const _x = v.attributes['_x'].nodeValue
        const _y = v.attributes['_y'].nodeValue
        const _z = v.attributes['_z'].nodeValue
        const _w = v.attributes['_w'].nodeValue

        const obj = {
          currentScale: 1,
          flying: false,
          mode: "panorama",
          modeTran: "panorama-panorama",
          panoId: id,
          quaternion: { isQuaternion: true, _x, _y, _z, _w }
        }

        // 移动到视角
        __sdk.Camera.setPose(obj)

        // 移动到点位
        __sdk.Camera.flyToPano(id)


        // 隐藏展示卡
        const carList1Dom = document.querySelector('.carList1')
        const carList2Dom = document.querySelector('.carList2')
        carList1Dom.style.display = 'flex'
        carList2Dom.style.display = 'none'

      }
    })

    __sdk.Camera.on('flying.started', (pano) => {
      classAddFu(pano.panoId)
    })

    // 初始判断点位id,来高亮
    const baseId = __sdk.Camera.getPose().panoId
    classAddFu(baseId)
  }


}, 500);

// 添加和删除class的方法
const classAddFu = (oldId) => {
  const c_boxTxtArr = document.querySelectorAll('.c_boxTxt')
  c_boxTxtArr.forEach(v => {
    const id = v.attributes['id'].nodeValue
    if (oldId == id) v.classList.add('c_boxTxtAc')
    else v.classList.remove('c_boxTxtAc')
  })
}