前后对比分屏对比

src/views/LandConsolidation/components/contrast.vue

@@ -10,7 +10,7 @@
         >
           {{ item }}
         </li>
-        <i class="el-icon-close" @click="closeInster"></i>
+        <li class="el-icon-close" @click="closeInster"></li>
       </ul>
     </div>
     <div v-for="(k, i) in 2" :key="i" class="splitScreen w50">
@@ -22,13 +22,15 @@
         <span class="iconfont icontuceng"></span>
       </li>
       <div class="ml sm-panel" v-show="layers[i]">
-        <el-checkbox-group v-model="checkList" @change="checkedChange">
+        <!-- @change="checkedChange" -->
+        <el-checkbox-group v-model="checkdata[i]" v-if="dbdata.fp.length > 1">
           <el-checkbox
-            v-for="mli in mllist"
-            :key="mli.value"
-            :label="mli.value"
+            v-for="mli in dbdata.fp"
+            :key="mli.dlbmmc"
+            :label="mli.dlbmmc"
+            @change="(c) => clickcheck(i, mli.dlbmmc, c)"
           >
-            {{ mli.label }}
+            {{ mli.dlbmmc }}
           </el-checkbox>
         </el-checkbox-group>
       </div>
@@ -43,6 +45,7 @@ import { district } from "@/api/Idleland.js";
 import { setImageryRoller, hideImageryRoller } from "@/utils/MapHelper/map.js";
 import { loadGeoJSON } from "@/utils/MapHelper/help.js";
 import AsideBottom from "./AsideBottom.vue";
+import { Infos } from "./a.js";
 let geoSources = {};
 export default {
   props: {},
@@ -51,7 +54,7 @@ export default {
       layers: [false, false],
       list: ["卷帘对比", "分屏对比", "影像对比", "重置"],
       active: 0,
-      checked: true,
+      dbdata: { fp: {} },
       mllist: [
         { label: "耕地", value: "0" },
         { label: "种植园", value: "1" },
@@ -60,30 +63,43 @@ export default {
         { label: "商服", value: "4" },
         { label: "住宅", value: "5" },
       ],
-      checkList: ["耕地"],
+      checkdata: [[], []],
     };
   },
   components: { AsideBottom },
   mounted() {
-    this.active = 0;
-    this.getData();
+    this.onClick(0);
   },
   methods: {
     closeInster() {
-      this.active = -1;
-      this.onClick();
+      console.log("ssss");
+      this.onClick(-1);
       this.$emit("close");
     },
+    show(data) {
+      this.dbdata = data;
+      this.onClick(0);
+    },
     checkedChange(value) {
       console.log(value);
     },
-    getData() {
-      // this.GetDistrict();
-      this.onClick();
+    clickcheck(i, name, checked) {
+      let geodata = geoSources[`${name}${i ? "h" : "q"}`];
+      if (geodata) {
+        if (checked)
+          viewer.flyTo(geodata, {
+            offset: new Cesium.HeadingPitchRange(0, -45),
+          });
+        geodata.setVisibleInViewport(i, checked);
+        // geodata.show = checked;
+      }
+
+      console.log(`${name}${i ? "h" : "q"}`, i, checked);
     },
 
     clickml() {},
-    onClick() {
+    onClick(i) {
+      this.active = i;
       this.multiView();
       // switch (this.active) {
       //   case 0:
@@ -101,22 +117,37 @@ export default {
     multiView() {
       let mul = this.active == 1 ? "HORIZONTAL" : "NONE";
       scene.multiViewportMode = Cesium.MultiViewportMode[mul];
-      let geom =
-        "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_tableData([{ geom }]);
+      this.dbdata = { fp: [Infos[0]] };
+      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) {
+      this.checkdata = [[], []];
       newVal.forEach((res, index) => {
-        console.log(res);
-        if (res.geom)
-          loadGeoJSON(res.geom, "#55A1E3", { isfly: true }, (data) => {
-            geoSources[res.id] = data;
-            data.name = "Idleland";
-            data.entities.values.forEach((entity) => {
-              entity.properties = { type: "图斑上图", id: res.id };
-            });
-            geoSources[res.id].setVisibleInViewport(1, false);
+        // console.log(res);
+        this.checkdata[0].push(res.dlbmmc);
+        this.checkdata[1].push(res.dlbmmc);
+        if (res.qgeom)
+          loadGeoJSON(res.qgeom, "#55A1E3", { isfly: true }, (data) => {
+            geoSources[res.dlbmmc + "q"] = data;
+            data.name = "fpdb";
+            // data.entities.values.forEach((entity) => {
+            //   entity.properties = { type: "图斑上图", id: res.id };
+            // });
+            geoSources[res.dlbmmc + "q"].setVisibleInViewport(1, false);
+            // geoSources[res.dlbmmc + "q"].setVisibleInViewport(0, false);
           });
+        // if (res.hgeom)
+        //   loadGeoJSON(res.hgeom, "#55A1E3", { isfly: true }, (data) => {
+        //     geoSources[res.dlbmmc + "h"] = data;
+        //     data.name = "fpdb";
+        //     // data.entities.values.forEach((entity) => {
+        //     //   entity.properties = { type: "图斑上图", id: res.id };
+        //     // });
+        //     data.setVisibleInViewport(0, false);
+        //   });
       });
     },
     removeGeoJSON() {
@@ -144,7 +175,7 @@ export default {
   width: 100%;
   height: 100%;
   position: absolute;
-  z-index: 100;
+  // z-index: 100;
   .headerCheck {
     width: 600px;
   }
@@ -159,6 +190,7 @@ export default {
     height: 36px;
     text-align: center;
     line-height: 36px;
+    cursor: pointer;
   }
   .splitScreen {
     float: left;