卷帘

src/views/farmlandProtection/components/tbDetails.vue

@@ -22,6 +22,12 @@
 <script>
 import Jbxx from "./jbxx.vue";
 import Hcxx from "./hcxx.vue";
+import {
+  setImageryRoller,
+  hideImageryRoller,
+  initroller,
+  useRoller,
+} from "@/utils/MapHelper/map.js";
 export default {
   props: {
     detailObj: {
@@ -45,27 +51,72 @@ export default {
           后类型: "XXX",
         },
       ],
-      emitImgIndex:-1,
-      emitImgList:[],
+      emitImgIndex: -1,
+      emitImgList: [],
+      imagelayers: [],
     };
   },
   computed: {},
-  mounted() {},
+  mounted() {
+    this.$nextTick(() => {
+      initroller();
+    });
+  },
   methods: {
     changeData(name, updata) {
       this[name] = updata;
     },
     closeBox() {
+      this.onClick(false);
       this.$emit("updateParent", "isShowTb", false);
       this.$emit("updateParent", "emitImgIndex", -1);
     },
+    onClick(show) {
+      if (show) {
+        let jl = {
+          zzq: "http://192.168.60.2:8090/iserver/services/map-ShiDianQuYuTuDiXianZhuang/rest/maps/zzq",
+          zzh: "http://192.168.60.2:8090/iserver/services/map-ShiDianQuYuTuDiXianZhuang/rest/maps/zzh",
+        };
+        store.setaddNode([
+          { id: "gdjctb", url: jl.zzq, label: "耕地监测图标" },
+        ]);
+        this.setImager({ url: jl.zzq, year: "qian", top: true }, true);
+        this.setImager(
+          { url: jl.zzh, year: "hou", top: true },
+          true,
+          (layer) => {
+            useRoller(true, "lrRoller", "leftRoller", "", false);
+            setImageryRoller(layer);
+          }
+        );
+      } else {
+        store.setaddNode([]);
+        hideImageryRoller(this.imagelayers["hou"]);
+        useRoller(false);
+        this.setImager({ year: "qian" }, false);
+        this.setImager({ year: "hou" }, false);
+      }
+    },
+    setImager(obj, isshow = true, fun) {
+      if (this.imagelayers[obj.year]) this.imagelayers[obj.year].show = isshow;
+      else if (isshow)
+        this.imagelayers[obj.year] = viewer.imageryLayers.addImageryProvider(
+          new Cesium.SuperMapImageryProvider({
+            url: obj.url,
+            name: obj.year,
+          })
+        );
+      if (obj.top) viewer.imageryLayers.raiseToTop(this.imagelayers[obj.year]);
+      fun && fun(this.imagelayers[obj.year]);
+      // viewer.flyTo(this.imagelayers[obj.year]);
+    },
   },
   watch: {},
   watch: {
-    emitImgIndex(val){
+    emitImgIndex(val) {
       this.$emit("updateParent", "imgIndex", val);
       this.$emit("updateParent", "imgList", this.emitImgList);
-    }
+    },
   },
   beforeDestroy() {},
 };

src/views/farmlandProtection/indexNew.vue

@@ -20,7 +20,7 @@
       :type="activeIndex"
       ref="gdzl"
     ></Gdzl>
-    <Jctb v-show="activeIndex == 2"></Jctb>
+    <Jctb v-show="activeIndex == 2" ref="jctb"></Jctb>
     <Fzyp v-show="activeIndex == 3"></Fzyp>
     <div
       class="innerContainer legendPane"
@@ -117,7 +117,7 @@ export default {
         this.$refs.gdzl.regionChange(this.xzqh);
       }
       if (val == 1) this.$refs.gdzl.regionChange(this.xzqh);
-      // if (val == 2) this.$refs.xzgd.getData();
+      if (val !== 2) this.$refs.jctb.isShowTb = false;
     },
   },
   watch: {
@@ -213,7 +213,7 @@ export default {
     width: 520px;
     height: 50px;
     position: absolute;
-    left:35vw;
+    left: 35vw;
     top: 3vh;
     z-index: 99;
     pointer-events: none;

src/views/farmlandProtection/jctb/index.vue

@@ -23,6 +23,7 @@
       </div>
     </div>
     <tbDetails
+      ref="tbDetails"
       @updateParent="changeData"
       :detailObj="detailObj"
       v-show="isShowTb"
@@ -109,10 +110,10 @@ export default {
       this.isShowTb = false;
       this.imgIndex = -1;
       console.log();
-      if (this.activeTabs == 'tbqd') {
-        this.$refs.tbqd.init()
+      if (this.activeTabs == "tbqd") {
+        this.$refs.tbqd.init();
         // console.log("哈哈哈",this.$refs.tbqd);
-      }else{
+      } else {
         // console.log(33333,viewer);
       }
     },
@@ -131,22 +132,21 @@ export default {
       //   document.exitFullscreen();
       // }
 
-      document
-          var div = document.getElementById("fullscreen-div");
+      document;
+      var div = document.getElementById("fullscreen-div");
 
-          if (div.requestFullscreen) {
-            div.requestFullscreen();
-          } else if (div.mozRequestFullScreen) {
-            /* Firefox */
-            div.mozRequestFullScreen();
-          } else if (div.webkitRequestFullscreen) {
-            /* Chrome, Safari & Opera */
-            div.webkitRequestFullscreen();
-          } else if (div.msRequestFullscreen) {
-            /* IE/Edge */
-            div.msRequestFullscreen();
-          }
-        
+      if (div.requestFullscreen) {
+        div.requestFullscreen();
+      } else if (div.mozRequestFullScreen) {
+        /* Firefox */
+        div.mozRequestFullScreen();
+      } else if (div.webkitRequestFullscreen) {
+        /* Chrome, Safari & Opera */
+        div.webkitRequestFullscreen();
+      } else if (div.msRequestFullscreen) {
+        /* IE/Edge */
+        div.msRequestFullscreen();
+      }
 
       // // 监听全屏状态的改变
       // document.addEventListener(
@@ -203,6 +203,9 @@ export default {
     imgIndex(val) {
       this.$refs.carousel.setActiveItem(val);
     },
+    isShowTb(val) {
+      this.$refs.tbDetails.onClick(val);
+    },
   },
 };
 </script>
@@ -286,7 +289,7 @@ export default {
   width: 504px;
   height: 368px;
   // background: #33ccff;
-  background-color: rgba(38, 38, 38, 0.6);;
+  background-color: rgba(38, 38, 38, 0.6);
   // background: url(/static/images/ghzc/内容框.png) no-repeat;
   background-size: 100% 100%;
   position: absolute;