卷帘

src/components/Combinations/LayerManage/LayerManage.vue

@@ -258,14 +258,13 @@ export default {
         }
       } else {
         this.checkedChange(obj);
-        if(checked)
-          store.setCheckedData(obj)
+        if (checked) store.setCheckedData(obj);
       }
       store.setVectorLayerList(this.vectorlayerlist);
       store.setModelLayerList(this.modellayerlist);
-      store.setlayerparamsList(this.layerparams);
     },
-    checkedChange(obj) {
+    //rollerId 卷帘
+    checkedChange(obj, roller) {
       let imageryLayers = viewer.imageryLayers;
       if (obj.checked) {
         obj.trans = 100;
@@ -297,7 +296,8 @@ export default {
               })
             );
             this.layerparams[obj.id] = layer;
-            
+            store.setlayerparamsList(this.layerparams);
+            if (roller) this.bus.$emit("setImageryRoller", layer);
             // viewer.flyTo(layer);
             break;
           case "Vector": //矢量
@@ -309,6 +309,8 @@ export default {
             );
             this.vectorlayerlist.push(obj);
             this.layerparams[obj.id] = layer2;
+            store.setlayerparamsList(this.layerparams);
+            if (roller) this.bus.$emit("setImageryRoller", layer2);
             // viewer.flyTo(layer2);
             break;
           case "Terrain": //地形

src/components/sceneAtttribute/otherOptions/otherOptions.vue

@@ -117,6 +117,7 @@ export default {
       this.init();
     }
     this.multiViewport = store.state.splitType
+    this.bus.$on("setImageryRoller", this.setImageryRollers);
   },
   methods: {
     //子组件部分
@@ -181,53 +182,58 @@ export default {
     },
     setImageryRollerMode: function () {
       store.setrollerType(rollerShutterConfig.splitDirection)
-      let imageryLayers = viewer.imageryLayers;
-      if (this.imageryRoller) {
-        for (let i = 0; i < imageryLayers.length; i++) {
-          let imageryLayer = imageryLayers.get(i);
-          switch (rollerShutterConfig.splitDirection) {
-            case Cesium.SplitDirection.LEFT:
-              imageryLayer.splitDirection = new Cesium.Cartesian2(
-                Cesium.ImagerySplitDirection.RIGHT,
-                Cesium.ImagerySplitDirection.NONE
-              );
-              break;
-            case Cesium.SplitDirection.RIGHT:
-              imageryLayer.splitDirection = new Cesium.Cartesian2(
-                Cesium.ImagerySplitDirection.LEFT,
-                Cesium.ImagerySplitDirection.NONE
-              );
-              break;
-            case Cesium.SplitDirection.TOP:
-              imageryLayer.splitDirection = new Cesium.Cartesian2(
-                Cesium.ImagerySplitDirection.NONE,
-                Cesium.ImagerySplitDirection.BOTTOM
-              );
-              break;
-            case Cesium.SplitDirection.BOTTOM:
-              imageryLayer.splitDirection = new Cesium.Cartesian2(
-                Cesium.ImagerySplitDirection.NONE,
-                Cesium.ImagerySplitDirection.TOP
-              );
-              break;
-            default:
-              imageryLayer.splitDirection = new Cesium.Cartesian2(
-                Cesium.ImagerySplitDirection.NONE,
-                Cesium.ImagerySplitDirection.NONE
-              );
-              break;
-          }
-        }
-      } else {
-        for (let i = 0; i < imageryLayers.length; i++) {
-          let imageryLayer = imageryLayers.get(i);
+      // let imageryLayers = viewer.imageryLayers;
+      // for (let i = 0; i < imageryLayers.length; i++) {
+      //   let imageryLayer = imageryLayers.get(i);
+      //   if (this.imageryRoller) this.setImageryRoller(imageryLayer)
+      //   else this.hideImageryRoller(imageryLayer)
+      // }
+    },
+    setImageryRollers(imageryLayer){
+      if (this.imageryRoller) this.setImageryRoller(imageryLayer)
+      else this.hideImageryRoller(imageryLayer)
+    },
+    
+    setImageryRoller: function (imageryLayer) {
+      switch (rollerShutterConfig.splitDirection) {
+        case Cesium.SplitDirection.LEFT:
+          imageryLayer.splitDirection = new Cesium.Cartesian2(
+            Cesium.ImagerySplitDirection.RIGHT,
+            Cesium.ImagerySplitDirection.NONE
+          );
+          break;
+        case Cesium.SplitDirection.RIGHT:
+          imageryLayer.splitDirection = new Cesium.Cartesian2(
+            Cesium.ImagerySplitDirection.LEFT,
+            Cesium.ImagerySplitDirection.NONE
+          );
+          break;
+        case Cesium.SplitDirection.TOP:
+          imageryLayer.splitDirection = new Cesium.Cartesian2(
+            Cesium.ImagerySplitDirection.NONE,
+            Cesium.ImagerySplitDirection.BOTTOM
+          );
+          break;
+        case Cesium.SplitDirection.BOTTOM:
+          imageryLayer.splitDirection = new Cesium.Cartesian2(
+            Cesium.ImagerySplitDirection.NONE,
+            Cesium.ImagerySplitDirection.TOP
+          );
+          break;
+        default:
           imageryLayer.splitDirection = new Cesium.Cartesian2(
             Cesium.ImagerySplitDirection.NONE,
             Cesium.ImagerySplitDirection.NONE
           );
-        }
+          break;
       }
     },
+    hideImageryRoller: function (imageryLayer) {
+      imageryLayer.splitDirection = new Cesium.Cartesian2(
+        Cesium.ImagerySplitDirection.NONE,
+        Cesium.ImagerySplitDirection.NONE
+      );
+    },
     /**
      * 注册卷帘分割条的拖拽事件。
      */

src/components/sceneAtttribute/splitScreen/rollerScreen.vue

@@ -3,7 +3,7 @@
   <div id="screenDiv" style="position: absolute; height: 100%; width: 100%">
     <div
       v-for="(k, i) in layers"
-      :key="k"
+      :key="i"
       class="splitScreen"
       :class="{
         w50: type == 1 || type == 2,
@@ -11,7 +11,8 @@
       }"
     >
       <li
-        class="sm-btn sm-tool-btn"
+        class="sm-tool-btn"
+        :class="i == 1 && (type == 1 || type == 2) ? 'sm-btn1' : 'sm-btn'"
         title="资源目录"
         @click="$set(layers, i, !layers[i])"
       >
@@ -20,7 +21,7 @@
       <layer-manage-split
         ref="splitManage"
         type="roller"
-        :splitId="k"
+        :splitId="i"
         :isshow="layers[i]"
         :checkedKeys="checkedKeys[i]"
         @close="$set(layers, i, false)"
@@ -67,6 +68,7 @@ export default {
       this.$set(this.toolTitle, this.toolTitle);
     },
     handleCheckChange(obj, checked, splitId) {
+      console.log(splitId,'splitId')
       if (obj.children && obj.children.length > 0) {
         for (let i = 0; i < obj.children.length; i++) {
           this.handleCheckChange(obj.children[i], checked);
@@ -74,24 +76,14 @@ export default {
       } else {
         if (checked) {
           store.setCheckedData(obj);
-          this.$set(this.toolTitle, splitId - 1, obj.title);
+          this.$set(this.toolTitle, splitId, obj.title);
+          // this.$set(this.checkedKeys, splitId, obj.id);
         }
         let sceneLayer = store.state.layerparamslist[obj.id];
         if (sceneLayer) {
-          this.setImageryRollerMode([sceneLayer]);
+          this.bus.$emit("setImageryRoller", sceneLayer);
         } else {
-          this.bus.$emit("checkedChange", obj);
-          if (obj.checked) {
-            for (let i = 0; i < this.checkedKeys.length; i++) {
-              if (!this.checkedKeys[i]) {
-                this.checkedKeys[i] = [];
-              }
-              if (i != splitId - 1) {
-                this.checkedKeys[i].push(obj.id);
-              }
-            }
-            this.$set(this.checkedKeys, this.checkedKeys);
-          }
+          this.bus.$emit("checkedChange", obj, true);
         }
       }
     },
@@ -156,15 +148,28 @@ export default {
   .sm-btn {
     position: absolute;
     top: 60px;
+    left: 20px;
     background-color: transparent;
     // font-size: 30px;
     z-index: 100;
+    // width: 80px;
+    // height: 80px;
+    // background: red;
   }
+  .sm-btn1 {
+    position: absolute;
+    top: 100px;
+    right: 20px;
+    background-color: transparent;
+    font-size: 30px;
+    z-index: 100;
+  }
+
   .sm-panel {
     max-width: 300px;
     height: 400px; //75%;
     max-height: 80%;
-    top: 60px;
+    top: 80px;
     left: 50px;
   }
 }

src/components/sceneAtttribute/splitScreen/splitScreen.vue

@@ -2,8 +2,8 @@
 <template>
   <div id="screenDiv" style="position: absolute; height: 100%; width: 100%">
     <div
-      v-for="(k, i) in value"
-      :key="k"
+      v-for="(k, i) in layers"
+      :key="i"
       class="splitScreen"
       :class="{
         w50:
@@ -23,7 +23,7 @@
       <layer-manage-split
         ref="splitManage"
         type="split"
-        :splitId="k"
+        :splitId="i"
         :isshow="layers[i]"
         :checkedKeys="checkedKeys[i]"
         @close="$set(layers, i, false)"
@@ -90,8 +90,8 @@ export default {
       } else {
         if (checked) {
           store.setCheckedData(obj);
-          this.$set(this.toolTitle, splitId - 1, obj.title);
-          // this.toolTitle[splitId - 1] = obj.title;
+          this.$set(this.toolTitle, splitId, obj.title);
+          // this.toolTitle[splitId] = obj.title;
         }
         console.log(obj.title, obj.type, splitId, "q");
         // if (obj.checked) {
@@ -124,7 +124,7 @@ export default {
             null;
         }
         if (sceneLayer) {
-          sceneLayer.setVisibleInViewport(splitId - 1, obj.checked);
+          sceneLayer.setVisibleInViewport(splitId, obj.checked);
           // sceneLayer.setVisibleInViewport(1, obj.checked);
         } else {
           this.bus.$emit("checkedChange", obj);
@@ -133,7 +133,7 @@ export default {
               if (!this.checkedKeys[i]) {
                 this.checkedKeys[i] = [];
               }
-              if (i != splitId - 1) {
+              if (i != splitId) {
                 this.checkedKeys[i].push(obj.id);
               }
             }