myTwiceMo.js 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  1. let time = -1
  2. let time2 = -1
  3. let time2Num = 0
  4. // 小人移位函数
  5. const renMoveFu = () => {
  6. // 底部左侧小人logo和上箭头的dom,拿到dom元素的时候在执行下面的代码
  7. const bottomClickDom = document.querySelector('.icon-pull-up')
  8. // console.log(bottomClickDom, '按钮')
  9. if (bottomClickDom) {
  10. // 展开导览列表和隐藏导览列表
  11. const isActiveDom = document.querySelector('.controls-bar')
  12. bottomClickDom.addEventListener('click', () => {
  13. // console.log(bottomClickDom, '按钮')
  14. const flag = isActiveDom.className.includes('active')
  15. console.log(bottomClickDom, 'isActiveDom',flag)
  16. const carListDomAll = document.querySelector('.carList')
  17. carListDomAll.style.bottom = flag ? '180px' : '64px'
  18. })
  19. clearInterval(time2)
  20. }
  21. }
  22. time = setInterval(() => {
  23. console.log('定时器执行,获取完所有dom,页面准备完毕');
  24. if (__sdk && __sdk.Camera && __sdk.Camera.getPose && __sdk.Camera.getPose() && __sdk.Camera.getPose().panoId) {
  25. clearInterval(time)
  26. // 整个的小人box
  27. const carListDomAll = document.querySelector('.carList')
  28. carListDomAll.style.display = 'block'
  29. renMoveFu()
  30. time2 = window.setInterval(() => {
  31. renMoveFu()
  32. time2Num++
  33. console.log('小人移位功能准备完毕,或者没有导览');
  34. if (time2Num >= 5) {
  35. clearInterval(time2)
  36. }
  37. }, 500);
  38. // 小人和列表的切换
  39. const carList1Dom = document.querySelector('.carList1')
  40. const carList2Dom = document.querySelector('.carList2')
  41. const carList1_2Dom = document.querySelector('.carList1_2')
  42. const carList2_2Dom = document.querySelector('.carList2_2')
  43. carList1_2Dom.onclick = () => {
  44. carList1Dom.style.display = 'none'
  45. carList2Dom.style.display = 'block'
  46. carList2_2Dom.scrollTop = 0
  47. }
  48. const carList2_2BackDom = document.querySelector('.carList2_2Back')
  49. carList2_2BackDom.onclick = () => {
  50. carList1Dom.style.display = 'flex'
  51. carList2Dom.style.display = 'none'
  52. }
  53. // 动态渲染列表
  54. let temp1 = ''
  55. myData.forEach(v1 => {
  56. let temp2 = ''
  57. v1.son.forEach(v2 => {
  58. temp2 += `<div class="c_boxTxt" id=${v2.panoId} _x=${v2.x} _y=${v2.y} _z=${v2.z} _w=${v2.w}>
  59. <p>
  60. ${v2.name}
  61. </p>
  62. </div>`
  63. })
  64. temp1 += `<div class="c_box"><div class="c_boxTit">${v1.name}</div>${temp2}</div>`
  65. })
  66. const carList2_2MainDom = document.querySelector('.carList2_2Main')
  67. carList2_2MainDom.innerHTML = temp1
  68. const c_boxTxtArr = document.querySelectorAll('.c_boxTxt')
  69. c_boxTxtArr.forEach(v => {
  70. v.onclick = () => {
  71. const id = v.attributes['id'].nodeValue
  72. const _x = v.attributes['_x'].nodeValue
  73. const _y = v.attributes['_y'].nodeValue
  74. const _z = v.attributes['_z'].nodeValue
  75. const _w = v.attributes['_w'].nodeValue
  76. const obj = {
  77. currentScale: 1,
  78. flying: false,
  79. mode: "panorama",
  80. modeTran: "panorama-panorama",
  81. panoId: id,
  82. quaternion: { isQuaternion: true, _x, _y, _z, _w }
  83. }
  84. // 移动到视角
  85. __sdk.Camera.setPose(obj)
  86. // 移动到点位
  87. __sdk.Camera.flyToPano(id)
  88. }
  89. })
  90. __sdk.Camera.on('flying.started', (pano) => {
  91. classAddFu(pano.panoId)
  92. })
  93. // 初始判断点位id,来高亮
  94. const baseId = __sdk.Camera.getPose().panoId
  95. classAddFu(baseId)
  96. }
  97. }, 500);
  98. // 添加和删除class的方法
  99. const classAddFu = (oldId) => {
  100. const c_boxTxtArr = document.querySelectorAll('.c_boxTxt')
  101. c_boxTxtArr.forEach(v => {
  102. const id = v.attributes['id'].nodeValue
  103. if (oldId == id) v.classList.add('c_boxTxtAc')
  104. else v.classList.remove('c_boxTxtAc')
  105. })
  106. }