shaogen1995
/
bbh_Yun


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284
							<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="//4dkk.4dage.com/v4/sdk/4.2.0/kankan-sdk-deps.js"></script>
  <script src="//4dkk.4dage.com/v4/sdk/4.2.0/kankan-sdk.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html,
    body {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .box {
      width: 100%;
      height: 100%;
    }

    [xui_min_map] {
      width: 150px !important;
      height: 150px !important;
      right: 0px;
      top: 70px;
      transition: right .5s;
      pointer-events: none !important;
    }

    .inco {
      transition: bottom 0.5s;
      position: absolute;
      bottom: 234px;
      right: 8px;
      width: 160px;
      height: 36px;
      background-color: rgba(0, 0, 0, .4);
      border-radius: 18px;
      z-index: 11;
      display: flex;
      justify-content: space-around;
      padding: 0 10px 0 15px;
    }

    .inco>div {
      cursor: pointer;
      width: 33%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-size: 36px 36px;
      background-repeat: no-repeat;
      background-position: center;
    }

    .inco1 {
      background-image: url('./img/inco1Ac.png');
      width: 22% !important;
    }

    .inco2 {
      background-image: url('./img/inco2.png');
    }

    .inco3 {
      background-image: url('./img/inco3.png');
    }

    .loading {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 12;
      width: 100%;
      height: 100%;
      background-color: black;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .loading .loadBox {
      color: #fff;
      text-align: center;
      letter-spacing: 2px;
      width: 110px;
      height: 110px;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 2px;
    }

    .loadIcon {
      width: 60px;
      height: 60px;
      position: relative;
      overflow: hidden;
      margin: 10px auto;
    }

    .loadIcon img {
      height: 60px;
      position: absolute;
      left: 0;
      top: 0;
      animation: loading 1s steps(15) infinite;
    }

    @keyframes loading {
      100% {
        left: -900px;
      }
    }

    .mapShow {
      transition: right .5s;
      position: absolute;
      top: 77px;
      right: 150px;
      background-color: rgba(0, 0, 0, .3);
      width: 20px;
      height: 30px;
      z-index: 10;
      border-radius: 8px 0px 0 8px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .mapShow img {
      width: 16px;
      height: 16px;
    }

    .mapShow .up {
      display: none;
    }
  </style>
</head>

<body>
  <div class="loading">
    <div class="loadBox">
      <div class="loadIcon">
        <img src="./img/loading.png" alt="">
      </div>
      <div class="txt">加载中</div>


    </div>
  </div>

  <!-- 显示和隐藏小地图 -->
  <div class="mapShow">
    <img class="down" src="./img/down.svg" alt="">
    <img class="up" src="./img/up.svg" alt="">
  </div>

  <div class="box"></div>
  <div class="inco">
    <div class="inco1 active" title="全景漫游"></div>
    <div class="inco2" title="俯视图"></div>
    <div class="inco3" title="迷你模型"></div>
  </div>
</body>
<script>
  // 给vue页面调用收起
  var incoMove = function (val) {
    let dom = document.querySelector('.inco')
    if (val) dom.style.bottom = '24px'
    else dom.style.bottom = '234px'
  }

  // 获取地址栏信息
  let GetQueryString = (name) => {
    let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    let r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]);
    return "";
  }
  let num = GetQueryString('m')
  var kankan = new KanKan({
    dom: '.box',
    num
  })
  kankan.use('MinMap', {
    theme: {
      camera_fillStyle: "#C48871"
    }
  })
  kankan.render()
  kankan.Scene.on('loaded', () => {
    document.querySelector('.loading').style.display = 'none'
    //设置地面logo
    kankan.Scene.setFloorLogo({
      url: 'img/diBiao.png'
    })
  })


  let mapJT = document.querySelector('.mapShow')

  let doms = document.querySelectorAll('.inco div')

  kankan.Camera.on('mode.afterChange', ({
    fromMode,
    toMode,
    floorIndex
  }) => {
    if (toMode == 'panorama') {
      doms[0].classList.add('active')
      doms[1].classList.remove('active')
      doms[2].classList.remove('active')
      doms[0].style.backgroundImage = "url(./img/inco1Ac.png)"
      doms[1].style.backgroundImage = "url(./img/inco2.png)"
      doms[2].style.backgroundImage = "url(./img/inco3.png)"
      mapJT.style.display = 'flex'

    }
  })

  doms.forEach((v, i) => {
    v.onclick = function () {
      let className = v.getAttribute('class')
      if (className.includes('active')) return
      if (i == 0) {
        doms[0].classList.add('active')
        doms[1].classList.remove('active')
        doms[2].classList.remove('active')
        doms[0].style.backgroundImage = "url(./img/inco1Ac.png)"
        doms[1].style.backgroundImage = "url(./img/inco2.png)"
        doms[2].style.backgroundImage = "url(./img/inco3.png)"
        mapJT.style.display = 'flex'
        kankan.Camera.panorama()
      } else if (i == 1) {
        doms[0].classList.remove('active')
        doms[1].classList.add('active')
        doms[2].classList.remove('active')
        doms[0].style.backgroundImage = "url(./img/inco1.png)"
        doms[1].style.backgroundImage = "url(./img/inco2Ac.png)"
        doms[2].style.backgroundImage = "url(./img/inco3.png)"
        mapJT.style.display = 'none'
        kankan.Camera.floorplan()
      } else {
        doms[0].classList.remove('active')
        doms[1].classList.remove('active')
        doms[2].classList.add('active')
        doms[0].style.backgroundImage = "url(./img/inco1.png)"
        doms[1].style.backgroundImage = "url(./img/inco2.png)"
        doms[2].style.backgroundImage = "url(./img/inco3Ac.png)"
        mapJT.style.display = 'none'
        kankan.Camera.dollhouse()
      }
    }
  })
  let down = document.querySelector('.down')
  let up = document.querySelector('.up')
  down.onclick = () => {
    down.style.display = 'none'
    up.style.display = 'block'
    let mapDom = document.querySelector('.show')
    mapDom.style.right = '-150px'
    mapJT.style.right = 0
  }
  up.onclick = () => {
    down.style.display = 'block'
    up.style.display = 'none'
    let mapDom = document.querySelector('.show')
    mapDom.style.right = '0px'
    mapJT.style.right = '150px'
  }
</script>

</html>