|
|
@@ -0,0 +1,141 @@
|
|
|
+let time = -1
|
|
|
+
|
|
|
+let time2 = -1
|
|
|
+let time2Num = 0
|
|
|
+
|
|
|
+// 小人移位函数
|
|
|
+const renMoveFu = () => {
|
|
|
+ // 底部左侧小人logo和上箭头的dom，拿到dom元素的时候在执行下面的代码
|
|
|
+ const bottomClickDom = document.querySelector('.icon-pull-up')
|
|
|
+ // console.log(bottomClickDom, '按钮')
|
|
|
+ if (bottomClickDom) {
|
|
|
+ // 展开导览列表和隐藏导览列表
|
|
|
+ const isActiveDom = document.querySelector('.controls-bar')
|
|
|
+
|
|
|
+ bottomClickDom.addEventListener('click', () => {
|
|
|
+ // console.log(bottomClickDom, '按钮')
|
|
|
+ const flag = isActiveDom.className.includes('active')
|
|
|
+ console.log(bottomClickDom, 'isActiveDom',flag)
|
|
|
+
|
|
|
+ const carListDomAll = document.querySelector('.carList')
|
|
|
+ carListDomAll.style.bottom = flag ? '180px' : '64px'
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+ 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)
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ __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')
|
|
|
+ })
|
|
|
+}
|
aamin