更新

lixuliang

2024-06-19 c90036e2b71f394711117f186a772758abe69e3a

 src/components/map/viewer.vue

@@ -1,13 +1,6 @@
<template>
  <div>
    <div id="sdkContainer"></div>
    <!-- <div
      id="msg"
      style="min-width: 200px;min-height: 100px; z-index: 30;position: absolute; top:5%;left: 40%;background: skyblue;"
    >
      <label>{{ messagelayer }}</label>

    </div>-->
  </div>
</template>

@@ -19,9 +12,6 @@
import { mapState, mapMutations } from "vuex";
import "animate.css";
import rpc from "../../assets/js/rpc";
import mapData from "../../../static/mapData";
import mapMsg from "../../assets/js/mapMsg";
import vueEvents from '@/utils/vueEvent.js'
let PoiLayerConstructor = Vue.extend(poiLayer);

let handler;
@@ -48,85 +38,40 @@
      locationPoint: null,
      locationInstance: null,
      locationData: null,
      messagelayer: null
    };
  },
  computed: {
    ...mapState(["cesiumInit"]),
  },
  mounted() {
    vueEvents.$on('messagelayer', (res) => { this.messagelayer = JSON.stringify(res) })
    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);
          var data = mapData.mapRest
          setTimeout(() => {
            sgworld.Navigate.flyToPointsInterest({
              destination: { 'x': data.lng, 'y': data.lat, 'z': data.alt },
              orientation: {
                heading: data.heading,
                pitch: data.pitch,
                roll: data.roll,
              },
              duration: 10, //飞行时间8s
            });
          }, 9000);
          that.setCesiumInit(true);
          // rpc.initRpc();
        }
      );

@@ -141,7 +86,7 @@
      //地下模式距离参数
      Viewer.scene.globe.translucency.frontFaceAlpha = 0.5;
      Viewer.scene.globe.undergroundColor = undefined;
      mapMsg.init();
      rpc.initMessage();
      rpc.clickToCoordinates();

      //标会编辑
@@ -195,7 +140,7 @@
  methods: {
    ...mapMutations(["setCesiumInit"]),
    setLocation(res) {
      rpc.setLocation(res)
      rpc.setLocation(res);
    },
    detectZoom() {
      var ratio = 0,
@@ -300,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>