wangzhe
/
screen-demo


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>层级显示/控制</title>
    <link rel="stylesheet" href="../dist/index.css" />
    <link href="../cesium/Source/Widgets/widgets.css" rel="stylesheet">
    <script src="../cesium/Build/Cesium/Cesium.js"></script>
    <script src="../dist/index.js"></script>
  </head>
  <body style="margin: 0; padding: 0;">
    <!-- <div id="map" style="height: 100vh; width: 100vw"></div> -->
    <div id="map" class="mapDIV"></div>

    <!-- 地图加减号 -->
    <div class="add-switch">
      <div class="add-s-block" style="margin-top: 2px;" @click="logMapCenter">
        <div id="num">5</div>
      </div>
      <div class="add-s-block">
        <div class="add-zoom" onclick="addZoom()"></div>
      </div>
      <div class="add-s-block">
        <div class="sub-zoom" onclick="subZoom()"></div>
      </div>
    </div>

    <div class="input-card">
      <div class="input-item">
          <button class="btn" id="btn1" onclick="zoom(8)">8级</button>
      </div>
      <div class="input-item">
          <button class="btn" id="btn2" onclick="zoom(3)">3级</button>
      </div>
  </div>

  </body>

  <script>
   window.CESIUM_BASE_URL = '../cesium/Build/Cesium';
   const me=this
    Cesium.Ion.defaultAccessToken ='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmMGRmMzg3My04ZDZiLTQ5ZjktYTM5Ny0zODAxMjgyMzUyNDMiLCJpZCI6ODMyOCwiaWF0IjoxNjM3MzE1MTU3fQ.CCCTuOyf8WB2_nYoumV7IQ6nshgZMR9Xtoxlsx239tc'
    var viewer = CTMapOl.thrdime.viewercontrol.globalviewer('map', CTMapOl.thrdime.viewercontrol.globalvieweroptions())
    viewer._cesiumWidget._creditContainer.style.display = 'none'
    CTMapOl.thrdime.imagerylayercontrol.removeAll(viewer,true)
    CTMapOl.thrdime.imagerylayercontrol.addImageryProvider(viewer,CTMapOl.thrdime.imagerylayercontrol.gettdtImagery('vec',"vec_w"))
    CTMapOl.thrdime.imagerylayercontrol.addImageryProvider(viewer,CTMapOl.thrdime.imagerylayercontrol.gettdtImagery('cva',"cva_w"))
    CTMapOl.thrdime.cameracontrol.setDEFAULT_VIEW_RECTANGLE(116.38, 39.90,116.40, 39.92)
    CTMapOl.thrdime.cameracontrol.setcamera(viewer,CTMapOl.thrdime.cameracontrol.getcameraoptionswithdetile(116.39, 39.91,5000,0,-90,0))
    CTMapOl.thrdime.cameracontrol.addmoveEndevent(viewer,()=>{
      let zoom=CTMapOl.thrdime.cameracontrol.getZoom(viewer)
      if(zoom)
        document.getElementById("num").innerHTML = zoom;
    })

    //非严格增加/减少
    // function addZoom() {
    //   console.log('addZoom');
    //   let postion=CTMapOl.thrdime.cameracontrol.getposition(viewer)
    //   let cartographic= Cesium.Cartographic.fromCartesian(postion)
    //   let height=Math.ceil(cartographic.height)
    //   viewer.camera.moveForward(height * 0.5)
    // }
    // function subZoom() {
    //   console.log('subZoom');
    //   let postion=CTMapOl.thrdime.cameracontrol.getposition(viewer)
    //   let cartographic= Cesium.Cartographic.fromCartesian(postion)
    //   let height=Math.ceil(cartographic.height)
    //   viewer.camera.moveBackward(height * 0.5)
    // }
    //严格增加/减少
    function addZoom() {
      console.log('addZoom');
      zoom(parseInt(document.getElementById("num").innerHTML) +1.0)
    }
    function subZoom() {
      console.log('subZoom');
      zoom(parseInt(document.getElementById("num").innerHTML) -1)
    }
    function zoom(zoomNum) {
      console.log('zoomNum');
      CTMapOl.thrdime.cameracontrol.setZoom(viewer,zoomNum)
      // CTMapOl.api.setZoom(map, zoomNum);
    }

  </script>


  <style>

    /*地图*/
    .mapDIV {

      height: 100vh;
      width: 100vw;
      z-index: 1;
    }

    .add-switch {
      position: absolute;
      right: 30px;
      height: 68px;
      width: 30px;
      bottom: 112px;
      background: #FFFFFF 100%;
      color: #172537;
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      z-index: 2;
    }

    .add-s-block {
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      line-height: 20px;
      font-size: 12px;
      margin-bottom: 2px;
      color: #172537;
    }

    .add-zoom {
      width: 20px;
      height: 20px;
      background-image: url('../dist/assets/image/ar/switch/add-zoom.svg');
      background-size: 100% 100%;
      cursor: pointer;
    }

    .sub-zoom {
      width: 20px;
      height: 20px;
      background-image: url('../dist/assets/image/ar/switch/sub-zoom.svg');
      background-size: 100% 100%;
      cursor: pointer;
    }

    .add-zoom-out {
      width: 20px;
      height: 20px;
      background-image: url('../dist/assets/image/ar/switch/add-zoom-out.svg');
      background-size: 100% 100%;
    }

    .sub-zoom-out {
      width: 20px;
      height: 20px;
      background-image: url('../dist/assets/image/ar/switch/sub-zoom-out.svg');
      background-size: 100% 100%;
    }

    .add-s-block.btn-click {
      cursor: pointer;
    }

    .input-card {
      position: absolute;
      right: 15px;
      bottom: 15px;
      z-index: 999;
  }
  </style>

</html>