北京经济技术开发区经开区虚拟城市项目-【前端】-Web
lixuliang
2023-11-11 8b8662d719df88d74f5db6f7f85b8b2506f2d4c5
src/components/map/viewer.vue
@@ -3,43 +3,22 @@
    <div id="sdkContainer"></div>
    <layerTreeTwoScreen v-if="layerTreeTwoScreen" />
    <!-- <div id="bottomInfo" v-html="bottomInfo"></div> -->
    <div
      id="switchImagerLayer"
      :style="{
        transform: `scale(${scale}) translate(${offset},${offset})`,
        '-webkit-transform': `scale(${scale}) translate(${offset},${offset})`,
        '-moz-transform': `scale(${scale}) translate(${offset},${offset})`,
        '-o-transform': `scale(${scale}) translate(${offset},${offset})`,
        '-ms-transform': `scale(${scale}) translate(${offset},${offset})`,
      }"
    >
      <transition
        name="animate__animated animate__bounce"
        @click="switchImagerLayerShowOrHide"
        enter-active-class="animate__backInRight"
        leave-active-class="animate__backOutRight"
        appear
      >
    <div id="switchImagerLayer" :style="{
      transform: `scale(${scale}) translate(${offset},${offset})`,
      '-webkit-transform': `scale(${scale}) translate(${offset},${offset})`,
      '-moz-transform': `scale(${scale}) translate(${offset},${offset})`,
      '-o-transform': `scale(${scale}) translate(${offset},${offset})`,
      '-ms-transform': `scale(${scale}) translate(${offset},${offset})`,
    }">
      <transition name="animate__animated animate__bounce" @click="switchImagerLayerShowOrHide"
        enter-active-class="animate__backInRight" leave-active-class="animate__backOutRight" appear>
        <switchImagerLayer v-show="switchImagerLayer" />
      </transition>
      <img
        class="swichImg"
        @click="switchImagerLayerShowOrHide"
        :src="switchImage"
      />
      <img class="swichImg" @click="switchImagerLayerShowOrHide" :src="switchImage" />
      <div class="bgbox">
        <img
          class="swichImg"
          @click="switchImagerLayerShowOrHide"
          src="@/assets/img/new/shiliang.png"
        />
        <img
          class="swichImg bgbox"
          @click="switchImagerLayerShowOrHide"
          src="@/assets/img/new/shiliang.png"
        />
        <img class="swichImg" @click="switchImagerLayerShowOrHide" src="@/assets/img/new/shiliang.png" />
        <img class="swichImg bgbox" @click="switchImagerLayerShowOrHide" src="@/assets/img/new/shiliang.png" />
      </div>
    </div>
  </div>
@@ -55,7 +34,7 @@
import sanwei from "@/assets/img/new/sanwei.png";
import jiejing from "@/assets/img/new/jiejing.png";
import "animate.css";
import Bus from "@tools/Bus";
export default {
  name: "viewer",
  components: {
@@ -88,7 +67,8 @@
      window.sgworld = new SmartEarth.EarthCtrl(
        "sdkContainer",
        {
          StaticFileBaseUrl: "../../../static/CimSDK/",
          // StaticFileBaseUrl: "../../../static/CimSDK/",
          StaticFileBaseUrl: "../../../YZXNCS/static/CimSDK/",
        },
        {},
        {},
@@ -141,26 +121,49 @@
      // Viewer.scene.screenSpaceCameraController.enableCollisionDetection = false;
      Viewer.scene.globe.translucency.frontFaceAlpha = 0.5;
      Viewer.scene.globe.undergroundColor = undefined;
      //标会编辑
      //开启编辑并启用属性弹窗
      sgworld.Creator.SimpleGraphic.setEdit(true, {
        editProp: true,
        editPropData: {
          offset: ["5%", Viewer.container.offsetWidth - 360 - 200 + "px"],
          // offset: ["5%", Viewer.container.offsetWidth - 360 - 110 + "px"],
          height: 650,
          success(layero, index) {
            let contentWindow = layero.find("iframe")[0].contentWindow;
            let layeroHeight = layero.height();
            let titleHeight = layero.find(".layui-layer-title").height();
            let htmlHeight =
              contentWindow.document.firstElementChild.offsetHeight;
            if (layeroHeight > titleHeight + htmlHeight) {
              layero.height(titleHeight + htmlHeight);
              layero.find("iframe").height(htmlHeight);
          offset: "r",
          height: "60%",
        },
        callBack: {
          delete: function (entity) {
            Bus.$emit("removeTreeNode", entity);
          },
          end: function (entity) {
            if (entity) {
              let style = sgworld.Creator.SimpleGraphic.getStyle(entity);
              let data = {
                name: entity.name,
                style: style,
              };
              Bus.$emit("updataTreeNode", entity.id, data);
            }
          },
        },
      });
      //标会编辑
      // sgworld.Creator.SimpleGraphic.setEdit(true, {
      // editProp: true,
      // editPropData: {
      //   offset: ["5%", Viewer.container.offsetWidth - 360 - 200 + "px"],
      //   // offset: ["5%", Viewer.container.offsetWidth - 360 - 110 + "px"],
      // height: 650,
      //   success(layero, index) {
      //     let contentWindow = layero.find("iframe")[0].contentWindow;
      //     let layeroHeight = layero.height();
      //     let titleHeight = layero.find(".layui-layer-title").height();
      //     let htmlHeight =
      //       contentWindow.document.firstElementChild.offsetHeight;
      //     if (layeroHeight > titleHeight + htmlHeight) {
      //       layero.height(titleHeight + htmlHeight);
      //       layero.find("iframe").height(htmlHeight);
      //     }
      //   },
      // },
      // });
      //军标编辑
      sgworld.Creator.MilitaryPlotting.setEdit(true, {
        editProp: true,
@@ -179,9 +182,19 @@
          },
        },
      });
      //初始化弹窗事件
      // that.showBottom();
      that.initLayerOpen();
      that.showBottom();
    });
    let size = this.detectZoom();
    this.scale = (100 / size).toFixed(2);
@@ -189,7 +202,7 @@
    this.size = size + "%";
  },
  methods: {
    ...mapMutations(["setCesiumInit"]),
    ...mapMutations(["setCesiumInit", "updataTreeNode"]),
    detectZoom() {
      var ratio = 0,
        screen = window.screen,
@@ -242,6 +255,7 @@
      });
    },
    //初始化弹窗事件
    initLayerOpen() {
      window.layerOpen = function (name, options) {
        layuiLayer.close(SmartEarthPopupData.layerProp);
@@ -373,6 +387,7 @@
  },
};
</script>
<style scoped>
#bottomInfo {
  position: absolute;
@@ -390,8 +405,8 @@
  display: block;
  position: absolute;
  /*bottom: 120px;*/
  bottom: 13px;
  right: 46px;
  bottom: 30px;
  right: 80px;
  /* margin-right: -105px; */
  z-index: 9999;
  border-radius: 10px;
@@ -427,12 +442,14 @@
  border-radius: 10px;
  cursor: pointer;
}
.bgbox {
  position: absolute;
  top: 0;
  left: 8px;
  z-index: -1;
}
.mid {
  position: absolute;
  top: 50%;