小人移动端兼容

myJs/myTwiceMo.js

@@ -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')
+  })
+}

myJs/smg.css

@@ -0,0 +1,170 @@
+*{
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+.floor-switch {
+  top: 45% !important;
+}
+.carList {
+  position: fixed;
+  bottom: 64px;
+  left: -10px;
+  z-index: 100;
+  transition: all 0.3s;
+  display: none;
+}
+.carList .carList1 {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+.carList .carList1 .carList1_1 {
+  width: 95px;
+}
+.carList .carList1 .carList1_2 {
+  cursor: pointer;
+  width: 110px;
+}
+.carList .carList2 {
+  display: none;
+  position: relative;
+}
+.carList .carList2 .carList2_1 {
+  width: 95px;
+}
+.carList .carList2 .carList2_2Back {
+  position: absolute;
+  z-index: 10;
+  bottom: 70px;
+  left: 86px;
+  width: 22px;
+  /* height: 66px; */
+  cursor: pointer;
+}
+.carList .carList2 .carList2_2Bac {
+  position: absolute;
+  left: 104px;
+  bottom: 33px;
+  width: 15px;
+  height: 240px;
+  z-index: 8;
+  background-image: url('../myJs/img/txtBac.png');
+  background-size: 100% 100%;
+}
+.carList .carList2 .carList2_2 {
+  position: absolute;
+  left: 119px;
+  bottom: 33px;
+  width: 202px;
+  height: 240px;
+  padding-right: 30px;
+  overflow-y: auto;
+  background-color: rgba(255, 255, 255, 0.5);
+  -webkit-backdrop-filter: blur(4px);
+  backdrop-filter: blur(4px);
+  border-radius: 0 8px 8px 0;
+}
+.carList .carList2 .carList2_2::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 3px;
+  /*高宽分别对应横竖滚动条的尺寸*/
+  height: 1px;
+}
+.carList .carList2 .carList2_2::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 5px transparent;
+  background: #1864ff;
+}
+.carList .carList2 .carList2_2::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  -webkit-box-shadow: inset 0 0 5px transparent;
+  border-radius: 10px;
+  background: transparent;
+}
+.carList .carList2 .carList2_2 .carList2_2Main {
+  width: 100%;
+  /* height: 100%; */
+  padding: 10px 0 10px 16px;
+}
+.carList .carList2 .carList2_2 .carList2_2Main .c_box {
+  width: 100%;
+  margin-bottom: 20px;
+  background-color: rgba(217, 217, 217, 0.6);
+  border-radius: 6px 6px 6px 6px;
+  padding: 10px 10px 15px 10px;
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+}
+.carList .carList2 .carList2_2 .carList2_2Main .c_box .c_boxTit {
+  color: #fff;
+  font-weight: 700;
+  font-size: 16px;
+  padding-bottom: 5px;
+  position: relative;
+  text-shadow: 1px 1px 1px black;
+  margin-bottom: 10px;
+}
+.carList .carList2 .carList2_2 .carList2_2Main .c_box .c_boxTit::before {
+  content: '';
+  width: 100%;
+  height: 1px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0.2));
+}
+.carList .carList2 .carList2_2 .carList2_2Main .c_box .c_boxTit::after {
+  content: '';
+  position: absolute;
+  top: -10px;
+  left: -20px;
+  width: 100px;
+  height: 36px;
+  z-index: 10;
+  background-image: url('../myJs/img/txtTit.png');
+  background-size: 100% 100%;
+}
+.carList .carList2 .carList2_2 .carList2_2Main .c_box .c_boxTxt {
+  cursor: pointer;
+  position: relative;
+}
+.carList .carList2 .carList2_2 .carList2_2Main .c_box .c_boxTxt > p {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  height: 27px;
+  line-height: 24px;
+  font-size: 14px;
+  padding: 0 5px 0 10px;
+  position: relative;
+  z-index: 11;
+}
+.carList .carList2 .carList2_2 .carList2_2Main .c_box .c_boxTxt::before {
+  content: '';
+  opacity: 0;
+  z-index: 10;
+  width: calc(100% + 30px);
+  height: 100%;
+  position: absolute;
+  left: 0px;
+  top: 0;
+  background-image: url('../myJs/img/txtAc.png');
+  background-size: 100% 100%;
+}
+.carList .carList2 .carList2_2 .carList2_2Main .c_box .c_boxTxt:hover > p {
+  color: #fff;
+}
+.carList .carList2 .carList2_2 .carList2_2Main .c_box .c_boxTxt:hover::before {
+  opacity: 1;
+}
+.carList .carList2 .carList2_2 .carList2_2Main .c_box .c_boxTxtAc {
+  pointer-events: none;
+}
+.carList .carList2 .carList2_2 .carList2_2Main .c_box .c_boxTxtAc > p {
+  color: #fff;
+}
+.carList .carList2 .carList2_2 .carList2_2Main .c_box .c_boxTxtAc::before {
+  opacity: 1;
+}