空间对比眷恋对比

src/utils/MapHelper/map.js

@@ -1,4 +1,5 @@
 let rollerShutterConfig;
+let setstore = true
 export function initroller() {
     if (rollerShutterConfig) {
         return;
@@ -27,8 +28,7 @@ export function initroller() {
     bindSliderEvt();
 }
 export function setImageryRollerMode() {
-    console.log(rollerShutterConfig.splitDirection, 'sxsdx')
-    store.setrollerType(rollerShutterConfig.splitDirection);
+    setstore && store.setrollerType(rollerShutterConfig.splitDirection);
     // let imageryLayers = viewer.imageryLayers;
     // for (let i = 0; i < imageryLayers.length; i++) {
     //   let imageryLayer = imageryLayers.get(i);
@@ -164,7 +164,8 @@ export function setRollerShutterSplit() {
         }
     }
 }
-export function useRoller(val, lrtbRoller, lrRoller, tbRoller) {
+export function useRoller(val, lrtbRoller, lrRoller, tbRoller, setst = true) {
+    setstore = setst
     let verticalSlider = document.getElementById("verticalSlider");
     let horizontalSlider = document.getElementById("horizontalSlider");
     if (val) {

src/views/LandConsolidation/components/AsideBottom.vue

@@ -9,7 +9,7 @@
     <el-steps :active="activeVal" align-center class="stepClass">
       <!-- <el-step /> -->
       <el-step
-        :title="item"
+        :title="item.year"
         v-for="(item, i) in dataArray"
         :key="i + 'o'"
         icon=""
@@ -36,16 +36,19 @@ export default {
     };
   },
   mounted() {
-    this.$emit("activeValChange", this.activeVal);
+    // this.$emit("activeValChange", this.activeVal);
   },
   methods: {
+    setdata(list) {
+      this.dataArray = list;
+      this.activeVal = 0;
+    },
     stepPropsClick(active) {
       if (this.activeVal == active) return;
       this.activeVal = active;
       if (this.timer) {
         clearInterval(this.timer);
         this.timer = null;
-        // global.setMonthTimer(false);
       }
       this.$emit("activeValChange", this.activeVal);
     },
@@ -53,16 +56,14 @@ export default {
       if (this.timer) {
         clearInterval(this.timer);
         this.timer = null;
-        // global.setMonthTimer(false);
       } else {
-        // global.setMonthTimer(true);
         this.addActiveValFun();
-        this.timer = setInterval(this.addActiveValFun, 1000);
+        this.timer = setInterval(this.addActiveValFun, 10000);
       }
     },
     addActiveValFun() {
       this.activeVal++;
-      if (this.activeVal > 5) this.activeVal = 0;
+      if (this.activeVal > dataArray.length) this.activeVal = 0;
       this.$emit("activeValChange", this.activeVal);
     },
   },

src/views/LandConsolidation/components/contrast.vue

@@ -13,7 +13,12 @@
         <li class="el-icon-close" @click="closeInster"></li>
       </ul>
     </div>
-    <div v-for="(k, i) in 2" :key="i" class="splitScreen w50">
+    <div
+      v-for="(k, i) in 2"
+      :key="i"
+      class="splitScreen w50"
+      v-show="active == 1"
+    >
       <li
         class="sm-tool-btn sm-btn"
         title="目录"
@@ -36,15 +41,20 @@
       </div>
       <div class="sm-toolTitle">{{ `整治${!i ? "前" : "后"}地类图斑` }}</div>
     </div>
-    <AsideBottom></AsideBottom>
+    <AsideBottom ref="aside" v-show="active == 2"></AsideBottom>
   </div>
 </template>
 
 <script>
-import { district } from "@/api/Idleland.js";
-import { setImageryRoller, hideImageryRoller } from "@/utils/MapHelper/map.js";
+import {
+  setImageryRoller,
+  hideImageryRoller,
+  initroller,
+  useRoller,
+} from "@/utils/MapHelper/map.js";
 import { loadGeoJSON } from "@/utils/MapHelper/help.js";
 import AsideBottom from "./AsideBottom.vue";
+import { QueryList } from "@/api/cockpitNew";
 let geoSources = {};
 export default {
   props: {},
@@ -53,7 +63,7 @@ export default {
       layers: [false, false],
       list: ["卷帘对比", "分屏对比", "影像对比", "重置"],
       active: 0,
-      dbdata: { fp: {} },
+      dbdata: { id: "", fp: {} },
       mllist: [
         { label: "耕地", value: "0" },
         { label: "种植园", value: "1" },
@@ -63,16 +73,22 @@ export default {
         { label: "住宅", value: "5" },
       ],
       checkdata: [[], []],
+      layers: {},
+      nolayer: "",
+      layersData: [],
     };
   },
   components: { AsideBottom },
   mounted() {
-    this.onClick(0);
+    this.$nextTick(() => {
+      initroller(false);
+    });
   },
   methods: {
     closeInster() {
       console.log("ssss");
       this.onClick(-1);
+      removeGeoJSON("fpdb");
       this.$emit("close");
     },
     show(data) {
@@ -90,8 +106,8 @@ export default {
             offset: new Cesium.HeadingPitchRange(0, -45),
           });
         // geodata.setVisibleInViewport(i, checked);
-        geodata.setVisibleInViewport(0, checked);
-        geodata.setVisibleInViewport(1, checked);
+        geoSources[`${name}q`].setVisibleInViewport(0, checked);
+        geoSources[`${name}h`].setVisibleInViewport(1, checked);
         // geodata.show = checked;
       }
 
@@ -99,9 +115,30 @@ export default {
     },
 
     clickml() {},
-    onClick(i) {
+    async onClick(i) {
       this.active = i;
+      console.log(i, this.layersData, "---");
+      if (i == 0) {
+        await this.Getlayers();
+        this.nolayer = this.layersData[1].year;
+        this.setImager(this.layersData[1], true, (layer) => {
+          useRoller(true, "lrRoller", "leftRoller");
+          // setImageryRoller(layer);
+          layer.splitDirection = new Cesium.Cartesian2(
+            Cesium.ImagerySplitDirection.RIGHT,
+            Cesium.ImagerySplitDirection.NONE
+          );
+        });
+      } else useRoller(false);
       this.multiView();
+      if (i == 2) {
+        this.$refs.aside.activeVal == 0;
+        this.$refs.aside.clickHandler();
+      } else {
+        // this.layersData.forEach((img) => {
+        //   this.setImager(img, false);
+        // });
+      }
       // switch (this.active) {
       //   case 0:
       //     break;
@@ -115,15 +152,36 @@ export default {
       //     break;
       // }
     },
-    roller(){
-      rollerShutterConfig.splitDirection = new Cesium.Cartesian2(Cesium.ImagerySplitDirection.LEFT, Cesium.ImagerySplitDirection.NONE);
+    async Getlayers() {
+      let res = await QueryList({
+        jscType: "qytuzz_lj_imagers",
+        id: this.dbdata.id,
+      });
+      this.layersData = res.data;
+    },
+    setImager(obj, isshow = true, fun) {
+      console.log(obj, isshow, "---");
+
+      if (this.layers[obj.year]) this.layers[obj.year].show = isshow;
+      else if (isshow)
+        this.layers[obj.year] = viewer.imageryLayers.addImageryProvider(
+          new Cesium.SuperMapImageryProvider({
+            url: obj.url,
+            name: obj.year,
+          })
+        );
+      fun && fun(this.layers[obj.year]);
+      // viewer.flyTo(this.layers[obj.year]);
+    },
+    roller() {
+      rollerShutterConfig.splitDirection = new Cesium.Cartesian2(
+        Cesium.ImagerySplitDirection.LEFT,
+        Cesium.ImagerySplitDirection.NONE
+      );
     },
     multiView() {
       let mul = this.active == 1 ? "HORIZONTAL" : "NONE";
       scene.multiViewportMode = Cesium.MultiViewportMode[mul];
-      console.log(this.dbdata, "---");
-      // let qgeom =
-      // "SRID=4326;POLYGON((109.15412537651648 18.33292898400856,109.15414451156408 18.33293727703712,109.15415954142809 18.331308849767996,109.15415695380635 18.331067639473183,109.15413798111571 18.331089811465688,109.15414034671478 18.3313088685252,109.15412537651648 18.33292898400856))";
       this.active == 1 && this.active_tableData(this.dbdata.fp); //this.dbdata.fp
     },
     active_tableData(newVal) {
@@ -162,7 +220,12 @@ export default {
       imagelayer.setVisibleInViewport(id, show);
     },
   },
-  watch: {},
+  watch: {
+    nolayer(newVal, oldVal) {
+      console.log(newVal, oldVal);
+      if (oldVal) this.setImager({ year: oldVal }, false);
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>

src/views/LandConsolidation/components/qhdb.vue

@@ -100,7 +100,7 @@ export default {
         jscType: `qytuzz_sdzl_tdlyqhdb_dlbh_${this.tab}`,
         id: this.region,
       }).then((res) => {
-        this.dbdata = { fp: res.data };
+        this.dbdata = { id: this.region, fp: res.data };
         res.data.forEach((jdData) => {
           this.jdData.x_data.push(jdData.dlbmmc);
           this.jdData.result[0].push(jdData.qtbdlmj.toFixed(2));