分屏和卷帘资源目录筛选

src/components/Combinations/LayerManage/LayerManage.vue

@@ -263,6 +263,7 @@ export default {
       }
       store.setVectorLayerList(this.vectorlayerlist);
       store.setModelLayerList(this.modellayerlist);
+      store.setlayerparamsList(this.layerparams);
     },
     checkedChange(obj) {
       let imageryLayers = viewer.imageryLayers;
@@ -296,6 +297,7 @@ export default {
               })
             );
             this.layerparams[obj.id] = layer;
+            
             // viewer.flyTo(layer);
             break;
           case "Vector": //矢量

src/components/Combinations/LayerManage/LayerManageSplit.vue

@@ -144,6 +144,9 @@ import { Collect, GetResourceTree, GetMyCollect } from "@/api/map";
 export default {
   name: "LayerManageSplit",
   props: {
+    type: {
+      type: String,
+    },
     splitId: {
       type: Number,
       default: false,
@@ -194,8 +197,14 @@ export default {
       this.$refs.tree.setCheckedKeys(keys);
     },
     filterNode(value, data) {
-      if (!value) return true;
-      return data.label.indexOf(value) !== -1;
+      let addjudge = true;
+      if (this.$props.type == "split") {
+        addjudge = data.type !== "Terrain";
+      } else if (this.$props.type == "roller") {
+        addjudge = data.type == "IMG" || data.type == "Vector";
+      }
+      if (!value) return addjudge;
+      return data.label.indexOf(value) !== -1 && addjudge;
     },
     favoriteHandle(data) {
       // this.$emit("favoriteHandle", data);
@@ -289,6 +298,19 @@ export default {
     treeSearchText(val) {
       this.$refs.tree.filter(val);
     },
+    LayerManageShow: {
+      handler() {
+        if (this.LayerManageShow && this.$props.type) {
+          setTimeout(() => {
+            if (this.$refs.tree) this.$refs.tree.filter("");
+          }, 500);
+          // this.$nextTick(() => {
+          //   if (this.$refs.tree) this.$refs.tree.filter("");
+          // });
+        }
+      },
+      immediate: true,
+    },
   },
 };
 </script>

src/components/Viewer/smViewer.vue

@@ -8,13 +8,16 @@
     <china-epidemic-map></china-epidemic-map>
     <world-epidemic-map></world-epidemic-map> -->
     <split-screen></split-screen>
+    <rollerScreen></rollerScreen>
   </div>
 </template>
 
 <script>
 import Config from "@/common/js/webServeConfig.js";
+import rollerScreen from '../sceneAtttribute/splitScreen/rollerScreen'
 export default {
   name: "sm-viewer",
+  components:{ rollerScreen },
   props: {
     combination: {
       //组合接口
@@ -129,7 +132,7 @@ export default {
       // viewer.scene.globe.enableLighting = true;
 
       if (window.baseImgLayer) {
-        viewer.imageryLayers.addImageryProvider(
+       viewer.imageryLayers.addImageryProvider(
           new Cesium.SuperMapImageryProvider({
             url: window.baseImgLayer,
           })

src/components/sceneAtttribute/otherOptions/otherOptions.vue

@@ -180,6 +180,7 @@ export default {
       }
     },
     setImageryRollerMode: function () {
+      store.setrollerType(rollerShutterConfig.splitDirection)
       let imageryLayers = viewer.imageryLayers;
       if (this.imageryRoller) {
         for (let i = 0; i < imageryLayers.length; i++) {
@@ -368,7 +369,7 @@ export default {
     },
     imageryRoller(val) {
       this.setImageryRollerMode();
-      this.setRollerShutterSplit();
+      // this.setRollerShutterSplit();
     },
     lrtbRoller(val) {
       let verticalSlider = document.getElementById("verticalSlider");

src/components/sceneAtttribute/splitScreen/rollerScreen.vue

@@ -0,0 +1,193 @@
+
+<template>
+  <div id="screenDiv" style="position: absolute; height: 100%; width: 100%">
+    <div
+      v-for="(k, i) in layers"
+      :key="k"
+      class="splitScreen"
+      :class="{
+        w50: type == 1 || type == 2,
+        h50: type == -1 || type == -2,
+      }"
+    >
+      <li
+        class="sm-btn sm-tool-btn"
+        title="资源目录"
+        @click="$set(layers, i, !layers[i])"
+      >
+        <span class="iconfont icontuceng"></span>
+      </li>
+      <layer-manage-split
+        ref="splitManage"
+        type="roller"
+        :splitId="k"
+        :isshow="layers[i]"
+        :checkedKeys="checkedKeys[i]"
+        @close="$set(layers, i, false)"
+        @handleCheckChange="handleCheckChange"
+      ></layer-manage-split>
+      <input v-model="toolTitle[i]" type="text" class="sm-toolTitle" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "rollerScreen",
+  data() {
+    return {
+      layers: [],
+      checkedKeys: [],
+      toolTitle: [],
+    };
+  },
+  computed: {
+    type() {
+      return store.state.rollerType;
+    },
+  },
+  watch: {
+    type() {
+      this.layers = Array(2);
+      this.checkedKeys = Array(2);
+      this.toolTitle = Array(2);
+      this.setCheckeds();
+    },
+  },
+  // inject: ["checkedChange"],
+  mounted() {},
+  methods: {
+    setCheckeds() {
+      if (!store.state.checkedData) return;
+      for (let i = 0; i < this.checkedKeys.length; i++) {
+        this.checkedKeys[i] = [store.state.checkedData.id];
+        this.toolTitle[i] = [store.state.checkedData.title];
+      }
+      this.$set(this.checkedKeys, this.checkedKeys);
+      this.$set(this.toolTitle, this.toolTitle);
+    },
+    handleCheckChange(obj, checked, splitId) {
+      if (obj.children && obj.children.length > 0) {
+        for (let i = 0; i < obj.children.length; i++) {
+          this.handleCheckChange(obj.children[i], checked);
+        }
+      } else {
+        if (checked) {
+          store.setCheckedData(obj);
+          this.$set(this.toolTitle, splitId - 1, obj.title);
+        }
+        let sceneLayer = store.state.layerparamslist[obj.id];
+        if (sceneLayer) {
+          this.setImageryRollerMode([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);
+          }
+        }
+      }
+    },
+    setImageryRollerMode(imageryLayers) {
+      // let imageryLayers = viewer.imageryLayers;
+      if (this.imageryRoller) {
+        for (let i = 0; i < imageryLayers.length; i++) {
+          // let imageryLayer =imageryLayers[i] //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);
+          imageryLayer.splitDirection = new Cesium.Cartesian2(
+            Cesium.ImagerySplitDirection.NONE,
+            Cesium.ImagerySplitDirection.NONE
+          );
+        }
+      }
+    },
+  },
+};
+</script>
+<style lang="scss" >
+.splitScreen {
+  float: left;
+  height: 100%;
+  width: 100%;
+  position: relative;
+
+  .sm-btn {
+    position: absolute;
+    top: 60px;
+    background-color: transparent;
+    // font-size: 30px;
+    z-index: 100;
+  }
+  .sm-panel {
+    max-width: 300px;
+    height: 400px; //75%;
+    max-height: 80%;
+    top: 60px;
+    left: 50px;
+  }
+}
+
+.w50 {
+  width: 50%;
+}
+.h50 {
+  height: 50%;
+}
+.sm-toolTitle {
+  width: 400px;
+  // height: 80px;
+
+  position: absolute;
+  top: 100px;
+  left: calc(50% - 300px);
+  z-index: 100;
+  text-align: center;
+  font-size: 24px;
+  color: aqua;
+  background: transparent;
+  border-color: transparent;
+}
+</style>
+

src/components/sceneAtttribute/splitScreen/splitScreen.vue

@@ -22,6 +22,7 @@
       </li>
       <layer-manage-split
         ref="splitManage"
+        type="split"
         :splitId="k"
         :isshow="layers[i]"
         :checkedKeys="checkedKeys[i]"
@@ -73,6 +74,7 @@ export default {
   mounted() {},
   methods: {
     setCheckeds() {
+      if (!store.state.checkedData) return;
       for (let i = 0; i < this.checkedKeys.length; i++) {
         this.checkedKeys[i] = [store.state.checkedData.id];
         this.toolTitle[i] = [store.state.checkedData.title];

src/store/store.js

@@ -29,10 +29,12 @@ var store2 = {
         isEditZ: false,
         vectorlayerlist: [],
         modellayerlist: [],
+        layerparamslist:[],//影像
         chooseLayer: [],
         flattenNames: [],//存储压平的名称数组
         S3MList: [],
         splitType: 'NONE',//分屏类型
+        rollerType: '',//影像卷帘
         checkedData: null,
         sceneLayerlist: [],
         flattenNames: [],//存储压平的名称数组
@@ -106,6 +108,9 @@ var store2 = {
     setModelLayerList(newValue) {
         this.state.modellayerlist = newValue;
     },
+    setlayerparamsList(newValue) {
+        this.state.layerparamslist = newValue;
+    },
     setToolBarShow(newValue) {
         this.state.ToolBarShow = newValue;
     },
@@ -149,6 +154,9 @@ var store2 = {
     setsplitType(newValue) {
         this.state.splitType = newValue;
     },
+    setrollerType(newValue) {
+        this.state.rollerType = newValue;
+    },
     setCheckedData(newValue) {
         this.state.checkedData = newValue;
     },