分屏图斑实现

src/components/sceneAtttribute/otherOptions/otherOptions.vue

@@ -137,7 +137,7 @@
 
 <script>
 let rollerShutterConfig;
-import { setImageryRoller } from "@/utils/MapHelper/map.js";
+import { setImageryRoller,hideImageryRoller } from "@/utils/MapHelper/map.js";
 export default {
   name: "sceneOtherOptions",
   data() {
@@ -257,20 +257,14 @@ export default {
 
       //案例展示
       let imageryLayer = viewer.imageryLayers.get(1);
-      if (this.imageryRoller) setImageryRoller(imageryLayer);
-      else this.hideImageryRoller(imageryLayer);
+      if (this.imageryRoller) setImageryRoller(imageryLayer,rollerShutterConfig);
+      else hideImageryRoller(imageryLayer);
     },
     setImageryRollers(imageryLayer) {
-      if (this.imageryRoller) setImageryRoller(imageryLayer);
-      else this.hideImageryRoller(imageryLayer);
+      if (this.imageryRoller) setImageryRoller(imageryLayer,rollerShutterConfig);
+      else hideImageryRoller(imageryLayer);
     },
 
-    hideImageryRoller: function (imageryLayer) {
-      imageryLayer.splitDirection = new Cesium.Cartesian2(
-        Cesium.ImagerySplitDirection.NONE,
-        Cesium.ImagerySplitDirection.NONE
-      );
-    },
     /**
      * 注册卷帘分割条的拖拽事件。
      */

src/utils/MapHelper/map.js

@@ -1,4 +1,4 @@
-export function setImageryRoller(imageryLayer) {
+export function setImageryRoller(imageryLayer, rollerShutterConfig) {
     console.log("---", Cesium.SplitDirection.RIGHT)
     switch (rollerShutterConfig.splitDirection) {
         case Cesium.SplitDirection.LEFT:
@@ -32,4 +32,10 @@ export function setImageryRoller(imageryLayer) {
             );
             break;
     }
+}
+export function hideImageryRoller(imageryLayer) {
+    imageryLayer.splitDirection = new Cesium.Cartesian2(
+        Cesium.ImagerySplitDirection.NONE,
+        Cesium.ImagerySplitDirection.NONE
+    );
 }

src/views/LandConsolidation/components/contrast.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="qhdb">
+  <div class="contrast">
     <div class="headerCheck">
       <ul>
         <li
-          :class="{ liActive: i == activeIndex }"
+          :class="{ liActive: i == active }"
           v-for="(item, i) in list"
           :key="i"
           @click="onClick(i)"
@@ -13,32 +13,42 @@
       </ul>
     </div>
     <div v-for="(k, i) in 2" :key="i" class="splitScreen w50">
-      <li class="sm-tool-btn sm-btn" title="目录" @click="clickml">
+      <li
+        class="sm-tool-btn sm-btn"
+        title="目录"
+        @click="$set(layers, i, !layers[i])"
+      >
         <span class="iconfont icontuceng"></span>
       </li>
-      <div>
+      <div class="ml sm-panel" v-show="layers[i]">
         <el-checkbox-group v-model="checkList" @change="checkedChange">
           <el-checkbox
             v-for="mli in mllist"
-            :key="mli.label"
-            :label="mli.label"
+            :key="mli.value"
+            :label="mli.value"
           >
-            {{ mli.label }}==
+            {{ mli.label }}
           </el-checkbox>
         </el-checkbox-group>
       </div>
+      <div class="sm-toolTitle">{{ `整治${!i ? "前" : "后"}地类图斑` }}</div>
     </div>
   </div>
 </template>
 
 <script>
 import { district } from "@/api/Idleland.js";
+import { setImageryRoller, hideImageryRoller } from "@/utils/MapHelper/map.js";
+import { loadGeoJSON } from "@/utils/MapHelper/help.js";
+let geoSources = {};
 export default {
   props: {},
   data() {
     return {
+      layers: [false, false],
       list: ["卷帘对比", "分屏对比", "影像对比", "重置"],
-      activeIndex: 1,
+      active: 1,
+      checked: true,
       mllist: [
         { label: "耕地", value: "0" },
         { label: "种植园", value: "1" },
@@ -60,24 +70,69 @@ export default {
     },
     getData() {
       // this.GetDistrict();
+      this.onClick();
     },
-    onClick() {},
+
     clickml() {},
+    onClick() {
+      switch (this.active) {
+        case 0:
+          break;
+        case 1:
+          this.multiView();
+          break;
+        case 2:
+          break;
+        case 3:
+          break;
+        default:
+          break;
+      }
+    },
+    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 }]);
+    },
+    active_tableData(newVal) {
+      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);
+          });
+      });
+    },
+    setImageryRollers(imageryLayer) {
+      if (this.active == 1) setImageryRoller(imageryLayer);
+      else hideImageryRoller(imageryLayer);
+    },
+    setVisible(id, show) {
+      imagelayer.setVisibleInViewport(id, show);
+    },
   },
   watch: {},
 };
 </script>
 <style lang="scss" scoped>
-.qhdb {
+.contrast {
   width: 100%;
   height: 100%;
   position: absolute;
+  z-index: 100;
   .splitScreen {
     float: left;
-    height: calc(100% - 100px);
+    height: calc(100% - 80px);
     width: 100%;
     position: relative;
-    margin-top: 100px;
+    margin-top: 80px;
 
     .sm-btn {
       position: absolute;
@@ -99,12 +154,24 @@ export default {
       max-width: 300px;
       height: 400px; //75%;
       max-height: 80%;
-      top: 80px;
-      left: 50px;
+      top: 0;
+      left: 0;
     }
   }
   .w50 {
     width: 50%;
   }
+  .ml {
+    margin: 60px 0 0 30px;
+    .el-checkbox {
+      display: block;
+      color: #fff;
+    }
+  }
+  .sm-toolTitle {
+    top: 10px;
+    left: -70px;
+    font-size: 20px;
+  }
 }
 </style>

src/views/LandConsolidation/index.vue

@@ -179,7 +179,6 @@ export default {
       // if (newValue == "qhdb") this.$refs.qhdb.changeForm();
       // if (newValue == 1) this.$refs.list.searchFun();
       if (newValue == 2) this.$refs.xzgd.getData();
-      scene.multiViewportMode = Cesium.MultiViewportMode[value];
     },
     computed_vectorData(newVal) {
       console.log(newVal, "newVal");