修改左下角滚动，进入视角不旋转

wulitaotao

2023-02-27 f6769a1af13e187541eed4326e69916f9a7dee01

修改左下角滚动，进入视角不旋转

 package.json

@@ -37,6 +37,7 @@
    "vue": "^2.6.11",
    "vue-i18n": "^8.27.2",
    "vue-router": "^3.2.0",
    "vue-seamless-scroll": "^1.1.23",
    "vuex": "^3.4.0",
    "xlsx": "^0.18.5"
  },

 src/components/Screen/mapsdk.vue

@@ -50,67 +50,25 @@
        function () {}
      )

      window.viewer = window.Viewer = window.sgworld._Viewer
      // Viewer.imageryLayers._layers[0].show = false
      window.viewer = window.Viewer = window.sgworld._Viewer;

      // viewer.clock.shouldAnimate = true
      //每次旋转的弧度 越小越慢
      var angle = Cesium.Math.toRadians(Math.PI * 1)
      // 旋转次数 用来控制停止
      var rotate_num = 0
      function onTickCallback() {
        viewer.scene.camera.rotate(Cesium.Cartesian3.UNIT_Z, angle)
        //以下用来控制 停止
        rotate_num++
        // 110 次旋转一周
        if (rotate_num == 1) {
          Viewer.camera.flyTo({
            destination: {
              x: -2395735.480669514,
              y: 35646557.30966785,
              z: 33320031.01620178,
            },
            orientation: {
              heading: 6.283185307179578,
              roll: 0,
              pitch: -1.5687480368906144,
            },
          })
        }
        if (rotate_num == 220) {
          Viewer.camera.flyTo({
            destination: {
              x: -4022999.313498903,
              y: 19214082.70976515,
              z: 13043510.373621361,
            },
            orientation: {
              heading: 6.283185307179577,
              roll: 0,
              pitch: -1.5643686104630592,
            },
          })
        }
        if (rotate_num === 330) {
          //结束旋转
          viewer.clock.onTick.removeEventListener(onTickCallback)
          //可以再接定位动画
          Viewer.camera.flyTo({
            destination: {
              x: -3919623.6069864673,
              y: 13752070.475126158,
              z: 8307291.863719194,
            },
            orientation: {
              heading: 6.283185307179582,
              roll: 0,
              pitch: -1.5707039123519846,
            },
          })
        }
      }
      // 利用时钟进行监听
      viewer.clock.onTick.addEventListener(onTickCallback)


       Viewer.imageryLayers._layers[0].show = false

       sgworld.Navigate.jumpTo({      //跳转视角
            destination: new Cesium.Cartesian3.fromDegrees(110, 32, 50000000)
      });
      setTimeout(() => {
        window.viewer.camera.flyTo({
          destination:new Cesium.Cartesian3.fromDegrees(110, 32, 20000000),
          orientation:{
            heading:Cesium.Math.toRadians(0), 
            pitch: Cesium.Math.toRadians(-90),
          }
        })
      }, 1000);
      
      Viewer.imageryLayers.addImageryProvider(
        new Cesium.UrlTemplateImageryProvider({
          url: gaoDeBaseUrl[0].url,

 src/components/chart/DataStorage.vue

@@ -2,12 +2,7 @@
  <div class="data-storage">
    <div class="data-storage__header">
      <div class="text">
        <img
          class="img"
          src="@/assets/img/Screen/cunchu.png"
          alt=""
          srcset=""
        />
        <img class="img" src="@/assets/img/Screen/cunchu.png" alt="" srcset="" />
        <div class="title">共存储文件数量</div>
      </div>
      <div class="num">
@@ -16,8 +11,30 @@
      </div>
    </div>
    <div class="data-storage__content">
      <!-- <dv-scroll-board :config="config" style="width: 330px; height: 220px" /> -->
      <el-scrollbar class="scrollbar">
      <ul class="contentTitle">
        <li class="title">编号</li>
        <li class="name">名称</li>
        <li class="num">文件数</li>
      </ul>
      <div class="scroolData">
        <vue-seamless-scroll :data="tableData" class="ClassScroll" :class-option="defaultOption">

<ul class="item">
  <li v-for="(item, index) in tableData" :key="index">
    <span class="title">
      <div>{{ item.index }}</div></span>
    <span class="name"  :title="item.name">{{ item.name.substring(0, 15) }}</span>
    <span class="num">{{ item.num }}</span>
  </li>
</ul>
</vue-seamless-scroll>
      </div>
      
    </div>
  </div>

  <!-- <dv-scroll-board :config="config" style="width: 330px; height: 220px" /> -->
  <!-- <el-scrollbar class="scrollbar">
        <el-table
          :data="tableData"
          :row-style="{ background: 'rgba(135,180,248,0.10)' }"
@@ -60,14 +77,16 @@
          <el-table-column prop="num" label="文件数" width="70">
          </el-table-column>
        </el-table>
      </el-scrollbar>
    </div>
  </div>
      </el-scrollbar> -->
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
import { countDataStorage } from "@/api/screen.js"
export default {
  components: {
    vueSeamlessScroll
  },
  data() {
    return {
      tableData: [
@@ -120,6 +139,22 @@
      },
    }
  },
  computed: {
    defaultOption() {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: this.tableData.length, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },


  created() {
    this.initTable()
  },
@@ -148,79 +183,239 @@

<style lang="scss" scoped>
.data-storage {
  margin: 10px;
  width: 377px;
  &__header {
    margin-bottom: 10px;

  height: calc(100% - 30px);
  width: 100%;
}

.data-storage__header {
  height: 40px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  .text {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 20px;
    width: 340px;
    box-sizing: border-box;
    .text {
  }

  .title {
    font-family: Source Han Sans CN, Source Han Sans CN-Regular;
    color: #ffffff;
  }

  .img {
    margin-right: 4px;
    width: 16px;
    height: 16px;
  }

  .num {
    display: flex;
    align-items: center;
    justify-content: center;
  }

}

.data-storage__content {
  height: calc(100% - 40px);
  width: 100%;

  .contentTitle {
    height: 40px;
    width: 100%;
    display: flex;
    background-color: rgba(52,78,147,.5);
    flex-direction: row;
   

    li {

      align-items: center;
      justify-content: space-around;
      color: #FFFFFF;
    }

    .title {
      width: 15%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .title {
      font-family: Source Han Sans CN, Source Han Sans CN-Regular;
      color: #ffffff;
    }
    .img {
      margin-right: 4px;

      width: 16px;
      height: 16px;
    .name {
      width: 60%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .value {
      text-align: center;
      color: #ffffff;
      width: 16px;
      height: 20px;
      background: url("~@/assets/img/Screen/numBg.png");
      background-size: 100% 100%;

    .num {
      width: 25%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }


  }
  &__content {
    width: 95%;
    height: 220px;
  }


}
</style>

.scroolData{
  height: calc(100% - 40px);
  width: 100%;
  overflow: hidden;
}
.ClassScroll {
  height:100%;
  width: 100%;



  .item {
    width: 100%;
    height: 100%;
    color: #ffffff;

    li {
      height: 40px;
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-around;

      .title {
        width: 15%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        div {
          height: 20px;
          width: 20px;
          background-color: #495477;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }

      .name {
        width: 60%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .num {
        width: 25%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

    }

  }

}

// .data-storage {
//   margin: 10px;
//   width: 377px;

//   &__header {
//     margin-bottom: 10px;
//     display: flex;
//     align-items: center;
//     justify-content: space-between;
//     height: 20px;
//     width: 340px;
//     box-sizing: border-box;

//     .text {
//       display: flex;
//       align-items: center;
//     }

//     .title {
//       font-family: Source Han Sans CN, Source Han Sans CN-Regular;
//       color: #ffffff;
//     }

//     .img {
//       margin-right: 4px;

//       width: 16px;
//       height: 16px;
//     }

//     .value {
//       text-align: center;
//       color: #ffffff;
//       width: 16px;
//       height: 20px;
//       background: url("~@/assets/img/Screen/numBg.png");
//       background-size: 100% 100%;
//     }
//   }

//   &__content {
//     width: 95%;
//     height: 220px;
//   }
// }
// </style>

<style lang="scss">
.data-storage {
  .index-wrap {
    margin: 0 auto;
    width: 14px;
    height: 14px;
    background: rgba(180, 188, 235, 0.25);
  }
  .scrollbar {
    width: 100%;
    overflow-x: hidden;
    height: 200px;
    .el-scrollbar__wrap {
      overflow-x: hidden;
    }
    .el-table {
      height: 100%;
      width: 100%;
      background-color: transparent;
      color: #fff;
    }
    .el-table th.el-table__cell.is-leaf,
    .el-table td.el-table__cell {
      border: none;
    }
    .el-table--group::after,
    .el-table--border::after,
    .el-table::before {
      border: none;
    }
    .el-table::before {
      height: 0;
    }
  }
}
</style>
// .data-storage {
//   .index-wrap {
//     margin: 0 auto;
//     width: 14px;
//     height: 14px;
//     background: rgba(180, 188, 235, 0.25);
//   }

//   .scrollbar {
//     width: 100%;
//     overflow-x: hidden;
//     height: 200px;

//     .el-scrollbar__wrap {
//       overflow-x: hidden;
//     }

//     .el-table {
//       height: 100%;
//       width: 100%;
//       background-color: transparent;
//       color: #fff;
//     }

//     .el-table th.el-table__cell.is-leaf,
//     .el-table td.el-table__cell {
//       border: none;
//     }

//     .el-table--group::after,
//     .el-table--border::after,
//     .el-table::before {
//       border: none;
//     }

//     .el-table::before {
//       height: 0;
//     }
//   }
// }</style>