更新

lixuliang

2024-06-19 c90036e2b71f394711117f186a772758abe69e3a

 src/components/map/viewer.vue

@@ -1,9 +1,6 @@
<template>
  <div>
    <div id="sdkContainer"></div>
    <!-- <div style="z-index: 30;position: absolute; top:1%;left: 1%;">
      <el-button @click="setLocation(3)">漫游</el-button>
    </div> -->
  </div>
</template>

@@ -47,81 +44,34 @@
    ...mapState(["cesiumInit"]),
  },
  mounted() {

    this.$nextTick(function () {
      let that = this;
      let option = {
        fullscreenButton: true,
        licenseServer: "http://183.162.245.49:18080",
        minViewHeight: parseFloat(common.minviewheight),
        url: SmartEarthRootUrl + "Workers/image/earth.jpg",  //不含单张地图图片url则使用在线地图
        contextOptions: {
          failIfMajorPerformanceCaveat: false,
          webgl: {
            alpha: true,
            preserveDrawingBuffer: true,
          },
        },
      };

      window.sgworld = new SmartEarth.SGWorld(
        "sdkContainer",
        Cesium,
        option,

        {
          fullscreenButton: true,
          minViewHeight: parseFloat(common.minviewheight),
          url: SmartEarthRootUrl + "Workers/image/earth.jpg", //不含单张地图图片url则使用在线地图
          contextOptions: {
            failIfMajorPerformanceCaveat: false,
            webgl: {
              alpha: true,
              preserveDrawingBuffer: true,
            },
          },
        },
        null,
        () => {
          // sgworld.Navigate.flyToPointsInterest({
          //   destination: Cesium.Cartesian3.fromDegrees(
          //     116.55341,
          //     39.72163,
          //     50000.83
          //   ),
          //   orientation: {
          //     heading: Cesium.Math.toRadians(0),
          //     pitch: Cesium.Math.toRadians(-90),
          //     roll: Cesium.Math.toRadians(0.0)
          //   },
          //   duration: 7 //飞行时间8s
          // });
          // sgworld._Viewer.imageryLayers.removeAll();
          // 先飞到亦庄行政区
          // setTimeout(() => {
          sgworld.Navigate.flyToPointsInterest({
            destination: Cesium.Cartesian3.fromDegrees(
              116.540659,
              39.744945,
              50000
              39.734945,
              45000
            ),
            duration: 7, //飞行时间8s
            duration: 5, //飞行时间8s
          });
          // }, 5000);
          // setTimeout(() => {
          //   sgworld.Navigate.flyToPointsInterest({
          //     destination: Cesium.Cartesian3.fromDegrees(
          //       116.502368,
          //       39.791361,
          //       6500
          //     ),
          //     duration: 8, //飞行时间8s
          //   });
          // }, 10000);
          setTimeout(() => {
            sgworld.Navigate.flyToPointsInterest({
              destination: {
                "x": -2187108.231948378,
                "y": 4392040.442348233,
                "z": 4063265.829085007
              },
              orientation: {
                heading: 2.4384163743219607,
                pitch: -0.32733173444759833,
                roll: 6.283095595698651,
              },
              duration: 10, //飞行时间8s
            });
          }, 10000);
          that.setCesiumInit(true);
          // rpc.initRpc();
        }
      );

@@ -190,7 +140,7 @@
  methods: {
    ...mapMutations(["setCesiumInit"]),
    setLocation(res) {
      rpc.setLocation(res)
      rpc.setLocation(res);
    },
    detectZoom() {
      var ratio = 0,
@@ -295,69 +245,5 @@
 

<style scoped>
#bottomInfo {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 28px;
  background: rgba(0, 0, 0, 0.27);
}

#distanceLegendDiv {
  display: none !important;
}

#switchImagerLayer {
  display: block;
  position: absolute;
  /*bottom: 120px;*/
  bottom: 13px;
  right: 46px;
  /* margin-right: -105px; */
  z-index: 9999;
  border-radius: 10px;
  /* box-shadow: 0px 0px 5px 3px #fff; */
}

/* #switchImagerLayer:before {
  content: "";
  position: absolute;
  right: 5px;
  bottom: 10px;
  border: 13px solid rgba(0, 0, 0, 0.5);
  border-top-color: transparent;
  border-left-color: transparent;
}

#switchImagerLayer:after {
  content: "";
  width: 5px;
  height: 12px;
  position: absolute;
  right: 8px;
  bottom: 10px;
  border: 2px solid #fff;
  border-top-color: transparent;
  border-left-color: transparent;
  transform: rotate(45deg);
} */

.swichImg {
  width: 117px;
  height: 80px;
  border-radius: 10px;
  cursor: pointer;
}
.bgbox {
  position: absolute;
  top: 0;
  left: 8px;
  z-index: -1;
}
.mid {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 20%;
}
</style>