北京经济技术开发区经开区虚拟城市项目-【前端】-Web
lixuliang
2024-04-12 dbb352c9d988dfac83da979023fe81a0a02f88e9
src/components/map/viewer.vue
@@ -1,31 +1,84 @@
<template>
  <div>
    <div id="sdkContainer"></div>
    <!-- <iframe
      id="digital_page"
      v-if="isShowDigitalPerson"
      src="https://iframetester.com/"
      height="450"
      width="600"
      frameborder="no"
      border="0"
      marginwidth="0"
      marginheight="0"
      scrolling="no"
      allowtransparency="yes"
    ></iframe> -->
    <iframe
      v-if="isShowDigitalPerson"
      id="digital_page"
      allow="microphone;"
      :src="digitalHuman"
      :height="digitalSize.height"
      :width="digitalSize.width"
      frameborder="no"
      border="0"
      marginwidth="0"
      marginheight="0"
      scrolling="no"
      allowtransparency="yes"
    ></iframe>
    <div class="listBox" v-show="viewer1Show && !isLand">
      <ul id="viewer_lsyx">
        <li v-for="(item, index) in arr" :key="index" @click="changeLeftMap($event, item, index)">
        <li
          v-for="(item, index) in arr"
          :key="index"
          @click="changeLeftMap($event, item, index)"
        >
          {{ item }}
        </li>
      </ul>
    </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 ref="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>
@@ -42,6 +95,10 @@
import jiejing from "@/assets/img/new/jiejing.png";
import "animate.css";
import Bus from "@tools/Bus";
import mapData from "../../../static/mapData";
import mapMsg from "../../assets/js/mapMsg";
import vueEvents from "@/utils/vueEvent.js";
let activeLi, nLayer, LWLayer;
export default {
@@ -64,6 +121,8 @@
      scale: "1",
      offset: "0%",
      radio: 3,
      digitalHuman: null,
      digitalSize: {},
      arr: [
        2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012,
        2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021,
@@ -72,6 +131,9 @@
  },
  computed: {
    ...mapState(["viewer1Show", "isLand", "layerTreeTwoScreen", "cesiumInit"]),
    isShowDigitalPerson() {
      return this.$store.state.isShowDigitalPerson;
    },
  },
  watch: {
    viewer1Show(newvalue, oldvalue) {
@@ -92,14 +154,22 @@
    },
  },
  mounted() {
    this.digitalHuman = window.digitalHumanURL;
    this.digitalSize = window.digitalSize;
    let pathName = window.location.pathname.split("/");
    let StaticFileBaseUrl;
    if (pathName.length != 2) {
      StaticFileBaseUrl = `../../../${pathName[1]}/static/CimSDK/`;
    } else {
      StaticFileBaseUrl = `../../../static/CimSDK/`;
    }
    this.$nextTick(function () {
      let that = this;
      //*********北京sdk************
      window.sgworld = new SmartEarth.EarthCtrl(
        "sdkContainer",
        {
          StaticFileBaseUrl: "../../../static/CimSDK/",
          // StaticFileBaseUrl: "../../../SW/static/CimSDK/",
          StaticFileBaseUrl: StaticFileBaseUrl,
        },
        {},
        {},
@@ -139,12 +209,14 @@
              },
              duration: 5, //飞行时间8s
            });
            // console.log("加载完成");
          }, 14000);
          that.setCesiumInit(true);
        }
      );
      window.Viewer = sgworld._Viewer;
      window.viewer = sgworld._Viewer;
      sgworld._Viewer.scene.moon.show = false;
      window.sgwfs = new SmartEarth.WFSTool(sgworld._Viewer, Cesium);
      Viewer.shadows = false;
      //深度检测
@@ -153,6 +225,10 @@
      // Viewer.scene.screenSpaceCameraController.enableCollisionDetection = false;
      Viewer.scene.globe.translucency.frontFaceAlpha = 0.5;
      Viewer.scene.globe.undergroundColor = undefined;
      mapMsg.init();
      // rpc.clickToCoordinates();
      // mapMsg.setTime();
      //开启编辑并启用属性弹窗
      sgworld.Creator.SimpleGraphic.setEdit(true, {
        editProp: true,
@@ -263,7 +339,7 @@
    },
    initLSYX() {
      let ul = document.getElementById("viewer_lsyx");
      let lis = ul.getElementsByTagName('li');
      let lis = ul.getElementsByTagName("li");
      lis[19].click();
    },
    destroyImageLayer() {
@@ -296,14 +372,12 @@
        nLayer = null;
      }
      nLayer = this.loadBJ54ImageLayer(year);
      if (!LWLayer||Viewer.imageryLayers.indexOf(LWLayer)<0) {
        if(LWLayer)
        {
      if (!LWLayer || Viewer.imageryLayers.indexOf(LWLayer) < 0) {
        if (LWLayer) {
          LWLayer.destroy();
        }
        LWLayer = this.loadBJ54LWLayer();
      }
    },
    loadBJ54LWLayer() {
      let url = "http://172.26.64.84/service/ImageEngine/picdis/abc";
@@ -451,6 +525,11 @@
          cancel: function () {
            if (cancelFn && typeof cancelFn === "function") {
              cancelFn();
              if (window.pickFeature && window.pickFeature.primitive) {
                window.pickFeature.primitive.image = imgUrl;
                window.pickFeature.primitive.scale = scale;
                window.pickFeature = null;
              }
            }
          },
          end: function () {
@@ -565,7 +644,12 @@
  border-radius: 10px;
  /* box-shadow: 0px 0px 5px 3px #fff; */
}
#digital_page {
  position: absolute;
  left: 0;
  bottom: 120px;
  z-index: 10;
}
/* #switchImagerLayer:before {
  content: "";
  position: absolute;