[历史影像]删除之前二维地图，叠加beijing54地图

Jin Lei

2023-11-11 5b5a5a7899a9444665235d96d8d7f2d50fed6a8c

 src/components/map/viewer.vue

@@ -1,44 +1,31 @@
<template>
  <div>
    <div id="sdkContainer"></div>
    <div class="listBox" v-show="viewer1Show && !isLand">
      <ul>
        <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
      >
        <switchImagerLayer v-show="switchImagerLayer" />
    <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>
@@ -55,6 +42,8 @@
import jiejing from "@/assets/img/new/jiejing.png";
import "animate.css";
import Bus from "@tools/Bus";

let activeLi, nLayer;
export default {
  name: "viewer",
  components: {
@@ -75,10 +64,14 @@
      scale: "1",
      offset: "0%",
      radio: 3,
      arr: [
        2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012,
        2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021,
      ],
    };
  },
  computed: {
    ...mapState(["layerTreeTwoScreen", "cesiumInit"]),
    ...mapState(["viewer1Show", "isLand", "layerTreeTwoScreen", "cesiumInit"]),
  },
  mounted() {
    this.$nextTick(function () {
@@ -88,7 +81,7 @@
        "sdkContainer",
        {
          StaticFileBaseUrl: "../../../static/CimSDK/",
          // StaticFileBaseUrl: "../../../SW/static/CimSDK/",
          // StaticFileBaseUrl: "../../../YZXNCS/static/CimSDK/",
        },
        {},
        {},
@@ -202,9 +195,19 @@
          },
        },
      });










      //初始化弹窗事件
      // that.showBottom();
      that.initLayerOpen();
      that.showBottom();
    });
    let size = this.detectZoom();
    this.scale = (100 / size).toFixed(2);
@@ -238,6 +241,74 @@
      return ratio;
      //this.onresize_height = ratio;
      // return ratio;
    },
    changeMode(mode) {
      this.$refs.switchImagerLayer.switchImagerLayerClick(mode);
    },
    setImageComparison(isStart) {
      this.isImage = isStart;
      if (!this.isImage) {
        this.destroyImageLayer();
      }
    },
    destroyImageLayer() {
      if (activeLi) {
        activeLi.classList.remove('active');
        activeLi = null;
      }
      if (nLayer) {
        Viewer.imageryLayers.remove(nLayer, true);
        nLayer = null;
      }
    },
    changeLeftMap(event, item, index) {
      let liObj = event.currentTarget;
      if (activeLi) {
        activeLi.classList.remove('active');
        activeLi = null;
      }
      liObj.classList.add('active');
      activeLi = liObj;
      this.loadImageLayer(item);
    },
    loadImageLayer(year) {
      if (nLayer) {
        Viewer.imageryLayers.remove(nLayer, true);
        nLayer = null;
      }
      nLayer = this.loadBJ54ImageLayer(year);
    },
    loadBJ54ImageLayer(year) {
      let url = "http://172.26.64.84/service/ImageEngine/picdis/abc";
      //let url = option.url;
      //let year = option.year;
      let paramUrl = `${url}?user=jjjskfq&password=Jjjskfq@2022&layer=Sate_${year}&style=&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fpng&TileMatrix={z}&TileCol={nx}&TileRow={ny}`;
      let minx = 113.168199 * Math.PI / 180.0;
      let miny = 39.230551 * Math.PI / 180.0;
      let maxx = 118.562362 * Math.PI / 180.0;
      let maxy = 41.294714 * Math.PI / 180.0;
      let rectangle = new Cesium.Rectangle(minx, miny, maxx, maxy);
      let tilingScheme = new Cesium.GeographicTilingScheme({
        rectangle: rectangle,
        numberOfLevelZeroTilesX: 2,
        numberOfLevelZeroTilesY: 1
      });
      var dx = {
        url: paramUrl,
        tilingScheme: tilingScheme,
        customTags: {
          nx: function (imageryProvider, x, y, level) {
            return (2 << (level - 1)) + x;
          },
          ny: function (imageryProvider, x, y, level) {
            return (2 << (level - 1)) + y;
          }
        }
      };
      var imageryProvider = new Cesium.UrlTemplateImageryProvider(dx);
      let imageLayer = new Cesium.ImageryLayer(imageryProvider, { alpha: 1, brightness: 1.0 });
      Viewer.imageryLayers.add(imageLayer, 2);
      return imageLayer;
    },
    changeImage(val) {
      switch (val) {
@@ -415,8 +486,8 @@
  display: block;
  position: absolute;
  /*bottom: 120px;*/
  bottom: 13px;
  right: 46px;
  bottom: 30px;
  right: 80px;
  /* margin-right: -105px; */
  z-index: 9999;
  border-radius: 10px;
@@ -452,12 +523,48 @@
  border-radius: 10px;
  cursor: pointer;
}

.bgbox {
  position: absolute;
  top: 0;
  left: 8px;
  z-index: -1;
}

.listBox {
  position: absolute;
  left: 20px;
  top: 100px;

}

.listBox .active {

  background: rgba(255, 166, 0, 0.808);

}

.listBox li {
  padding: 2px;
  margin-top: 1px;
  border-radius: 2px;
  color: white;
  background: rgba(14, 50, 143, 0.6);
  font-size: 14px;
  cursor: pointer;
}

/* 屏幕分辨率放大为 125 */
@media (-webkit-min-device-pixel-ratio: 1.25) {
  .listBox li {
    font-size: 12px;
  }
}

.listBox li:hover {
  background: rgba(255, 166, 0, 0.808);
}

.mid {
  position: absolute;
  top: 50%;