From 5b5a5a7899a9444665235d96d8d7f2d50fed6a8c Mon Sep 17 00:00:00 2001
From: Jin Lei <jinlei_182@163.com>
Date: 星期六, 11 十一月 2023 17:42:58 +0800
Subject: [PATCH] [历史影像]删除之前二维地图，叠加beijing54地图

---
 src/components/map/viewer.vue |  123 +++++++++++++++++++++++++++++++++++++++-
 1 files changed, 119 insertions(+), 4 deletions(-)

diff --git a/src/components/map/viewer.vue b/src/components/map/viewer.vue
index 4255a83..a2875be 100644
--- a/src/components/map/viewer.vue
+++ b/src/components/map/viewer.vue
@@ -1,6 +1,13 @@
 <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="{
@@ -12,7 +19,7 @@
     }">
       <transition name="animate__animated animate__bounce" @click="switchImagerLayerShowOrHide"
         enter-active-class="animate__backInRight" leave-active-class="animate__backOutRight" appear>
-        <switchImagerLayer v-show="switchImagerLayer" />
+        <switchImagerLayer ref="switchImagerLayer" v-show="switchImagerLayer" />
       </transition>
 
       <img class="swichImg" @click="switchImagerLayerShowOrHide" :src="switchImage" />
@@ -35,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: {
@@ -55,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 () {
@@ -67,8 +80,8 @@
       window.sgworld = new SmartEarth.EarthCtrl(
         "sdkContainer",
         {
-          // StaticFileBaseUrl: "../../../static/CimSDK/",
-          StaticFileBaseUrl: "../../../YZXNCS/static/CimSDK/",
+          StaticFileBaseUrl: "../../../static/CimSDK/",
+          // StaticFileBaseUrl: "../../../YZXNCS/static/CimSDK/",
         },
         {},
         {},
@@ -228,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) {
@@ -450,6 +531,40 @@
   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%;

--
Gitblit v1.9.3