分屏切换显隐

src/components/Combinations/LayerManage/LayerManage.scss

@@ -61,10 +61,13 @@
     height: 600px;
     padding: 0px 5px 0px 5px;
 }
+.zymlsplit,.collectsplit{
+    height: 200px;
+}
 
 .treeDiv {
     overflow-y: auto;
-    height: 548px;
+    height: calc(100% - 52px);
     padding: 0px 5px 0px 5px;
 }
 

src/components/Combinations/LayerManage/LayerManage.vue

@@ -50,8 +50,7 @@ export default {
       //   children: [],
       // },
       contextData: null,
-      S3MList:[],
-
+      S3MList: [],
     };
   },
   computed: {
@@ -77,10 +76,6 @@ export default {
     favorite(data) {
       console.log(data);
     },
-    checkboxChange(obj, checked, a) {
-      obj.checked = checked;
-      this.handleCheckChange(obj, checked);
-    },
     visibleChange(obj, visible, a) {
       console.log(obj, visible, a);
       switch (obj.type) {
@@ -192,6 +187,7 @@ export default {
         skipLevelOfDetail: true,
       });
       this.sceneLayers[obj.title] = tileset;
+      store.setSceneLayersList(this.sceneLayers);
       let thisLayer = viewer.scene.primitives.add(tileset);
       viewer.flyTo(thisLayer);
     },
@@ -223,8 +219,9 @@ export default {
               keyWord: "SmID",
             });
           }
-          store.state.S3MList.push(layers[0])
-          store.state.tempLatData=layers[0]
+          store.state.S3MList.push(layers[0]);
+          store.state.tempLatData = layers[0];
+          store.setSceneLayersList(this_.sceneLayers);
           // for (var i = 0; i < layers.length; i++) {
           //   let style = new Cesium.Style3D();
           //   style.bottomAltitude = window.modelBottomAltitude; //底部高度
@@ -255,149 +252,144 @@ export default {
     // 复选框改变
     handleCheckChange(obj, checked) {
       // console.log(obj, checked ,);
-      if (typeof checked == "boolean") {
-        obj.checked = checked;
-      } else {
-        obj.checked = !obj.checked;
-      }
       if (obj.children && obj.children.length > 0) {
         for (let i = 0; i < obj.children.length; i++) {
           this.handleCheckChange(obj.children[i], checked);
         }
       } else {
-        let imageryLayers = viewer.imageryLayers;
-        if (obj.checked) {
-          obj.trans = 100;
-          obj.visible = true;
-          this.addlayerdata.push(obj);
-          switch (obj.type) {
-            case "S3M": //场景
-              let s = viewer.scene.open(obj.url);
-              this.vectorlayerlist.push(obj);
-              this.promiseWhen([s], undefined, obj);
-              // store.setModelLayerList(this.vectorlayerlist);
-              // console.log(store.state.modellayerlist,'vvvvv');
-              // store.state.S3MList.push(obj)
-              break;
-            case "S3MDATA": //scp
-              viewer.scene.addS3MTilesLayerByScp(obj.url, {
+        this.checkedChange(obj);
+      }
+      store.setVectorLayerList(this.vectorlayerlist);
+      store.setModelLayerList(this.modellayerlist);
+    },
+    checkedChange(obj) {
+      let imageryLayers = viewer.imageryLayers;
+      if (obj.checked) {
+        obj.trans = 100;
+        obj.visible = true;
+        this.addlayerdata.push(obj);
+        switch (obj.type) {
+          case "S3M": //场景
+            let s = viewer.scene.open(obj.url);
+            this.vectorlayerlist.push(obj);
+            this.promiseWhen([s], undefined, obj);
+            // store.setModelLayerList(this.vectorlayerlist);
+            // console.log(store.state.modellayerlist,'vvvvv');
+            // store.state.S3MList.push(obj)
+            break;
+          case "S3MDATA": //scp
+            viewer.scene.addS3MTilesLayerByScp(obj.url, {
+              name: obj.title,
+            });
+            break;
+          case "3DTiles": //tileset
+            this.add3DTiles(obj);
+            this.vectorlayerlist.push(obj);
+            break;
+          case "IMG": //影像
+            let layer = viewer.imageryLayers.addImageryProvider(
+              new Cesium.SuperMapImageryProvider({
+                url: obj.url,
                 name: obj.title,
-              });
-              break;
-            case "3DTiles": //tileset
-              this.add3DTiles(obj);
-              this.vectorlayerlist.push(obj);
-              break;
-            case "IMG": //影像
-              let layer = viewer.imageryLayers.addImageryProvider(
-                new Cesium.SuperMapImageryProvider({
-                  url: obj.url,
-                  name: obj.title,
-                })
-              );
-              this.layerparams[obj.id] = layer;
-              // viewer.flyTo(layer);
-              break;
-            case "Vector": //矢量
-              let layer2 = viewer.imageryLayers.addImageryProvider(
-                new Cesium.SuperMapImageryProvider({
-                  url: obj.url,
-                  name: obj.title,
-                })
-              );
-              this.vectorlayerlist.push(obj);
-              this.layerparams[obj.id] = layer2;
-              // viewer.flyTo(layer2);
-              break;
-            case "Terrain": //地形
-              this.addTerrain(obj.url);
-              break;
-            default:
-              null;
-          }
-        } else {
-          for (let i = 0; i < this.addlayerdata.length; i++) {
-            if (this.addlayerdata[i].title == obj.title) {
-              this.addlayerdata.splice(i, 1);
-              break;
-            }
+              })
+            );
+            this.layerparams[obj.id] = layer;
+            // viewer.flyTo(layer);
+            break;
+          case "Vector": //矢量
+            let layer2 = viewer.imageryLayers.addImageryProvider(
+              new Cesium.SuperMapImageryProvider({
+                url: obj.url,
+                name: obj.title,
+              })
+            );
+            this.vectorlayerlist.push(obj);
+            this.layerparams[obj.id] = layer2;
+            // viewer.flyTo(layer2);
+            break;
+          case "Terrain": //地形
+            this.addTerrain(obj.url);
+            break;
+          default:
+            null;
+        }
+      } else {
+        for (let i = 0; i < this.addlayerdata.length; i++) {
+          if (this.addlayerdata[i].title == obj.title) {
+            this.addlayerdata.splice(i, 1);
+            break;
           }
-          for (let i = 0; i < this.vectorlayerlist.length; i++) {
-            if (this.vectorlayerlist[i].title == obj.title) {
-              this.vectorlayerlist.splice(i, 1);
-              break;
-            }
+        }
+        for (let i = 0; i < this.vectorlayerlist.length; i++) {
+          if (this.vectorlayerlist[i].title == obj.title) {
+            this.vectorlayerlist.splice(i, 1);
+            break;
           }
-          for (let i = 0; i < this.modellayerlist.length; i++) {
-            if (this.modellayerlist[i].title == obj.title) {
-              this.modellayerlist.splice(i, 1);
-              break;
-            }
+        }
+        for (let i = 0; i < this.modellayerlist.length; i++) {
+          if (this.modellayerlist[i].title == obj.title) {
+            this.modellayerlist.splice(i, 1);
+            break;
           }
-          delete this.layerparams[obj.id];
-          switch (obj.type) {
-            case "S3M": //场景
-              if (this.sceneLayers[obj.title]) {
-                for (let i = 0; i < this.sceneLayers[obj.title].length; i++) {
-                  if (this.sceneLayers[obj.title][i].length > 0) {
-                    for (
-                      let u = 0;
-                      u < this.sceneLayers[obj.title][i].length;
-                      u++
-                    ) {
-                      viewer.scene.layers.remove(
-                        this.sceneLayers[obj.title][i][u]._name
-                      );
-                    }
-                  } else {
+        }
+        delete this.layerparams[obj.id];
+        switch (obj.type) {
+          case "S3M": //场景
+            if (this.sceneLayers[obj.title]) {
+              for (let i = 0; i < this.sceneLayers[obj.title].length; i++) {
+                if (this.sceneLayers[obj.title][i].length > 0) {
+                  for (
+                    let u = 0;
+                    u < this.sceneLayers[obj.title][i].length;
+                    u++
+                  ) {
                     viewer.scene.layers.remove(
-                      this.sceneLayers[obj.title][i]._name
+                      this.sceneLayers[obj.title][i][u]._name
                     );
                   }
+                } else {
+                  viewer.scene.layers.remove(
+                    this.sceneLayers[obj.title][i]._name
+                  );
                 }
               }
-              break;
-            case "S3MDATA": //scp
-              viewer.scene.layers.remove(obj.title);
-              break;
-            case "3DTiles": //tileset
-              viewer.scene.primitives.remove(this.sceneLayers[obj.title]);
-              break;
-            case "IMG": //影像
-              for (let i = 0; i < imageryLayers._layers.length; i++) {
-                let element = imageryLayers._layers[i];
-                if (element._imageryProvider._name == obj.title) {
-                  imageryLayers.remove(element);
-                  break;
-                }
+            }
+            break;
+          case "S3MDATA": //scp
+            viewer.scene.layers.remove(obj.title);
+            break;
+          case "3DTiles": //tileset
+            viewer.scene.primitives.remove(this.sceneLayers[obj.title]);
+            break;
+          case "IMG": //影像
+            for (let i = 0; i < imageryLayers._layers.length; i++) {
+              let element = imageryLayers._layers[i];
+              if (element._imageryProvider._name == obj.title) {
+                imageryLayers.remove(element);
+                break;
               }
-              break;
-            case "Vector": //矢量
-              for (let i = 0; i < imageryLayers._layers.length; i++) {
-                let element = imageryLayers._layers[i];
-                if (element._imageryProvider._name == obj.title) {
-                  imageryLayers.remove(element);
-                  break;
-                }
+            }
+            break;
+          case "Vector": //矢量
+            for (let i = 0; i < imageryLayers._layers.length; i++) {
+              let element = imageryLayers._layers[i];
+              if (element._imageryProvider._name == obj.title) {
+                imageryLayers.remove(element);
+                break;
               }
-              break;
-            case "Terrain": //地形
-              viewer.scene.terrainProvider =
-                new Cesium.EllipsoidTerrainProvider({});
-              break;
-            default:
-              null;
-          }
+            }
+            break;
+          case "Terrain": //地形
+            viewer.scene.terrainProvider = new Cesium.EllipsoidTerrainProvider(
+              {}
+            );
+            break;
+          default:
+            null;
         }
       }
-      store.setVectorLayerList(this.vectorlayerlist);
-      store.setModelLayerList(this.modellayerlist);
     },
 
- 
-
- 
-
     //图层定位
     location(obj) {
       let imageryLayers = viewer.imageryLayers;
@@ -497,10 +489,10 @@ export default {
   },
 
   mounted() {
+    this.bus.$on("checkedChange", this.checkedChange);
   },
 
-  watch: {
-  },
+  watch: {},
 };
 </script>
 

src/components/Combinations/LayerManage/LayerManageSplit.vue

@@ -6,7 +6,7 @@
     </div>
     <Tabs value="">
       <TabPane :label="Resource.Resource" name="zyml">
-        <div class="zyml">
+        <div class="zyml" :class="$props.splitId ? `zymlsplit` : ''">
           <el-input
             :placeholder="Resource.InputPlaceholder"
             prefix-icon="el-icon-search"
@@ -22,6 +22,8 @@
               show-checkbox
               :props="defaultProps"
               :filter-node-method="filterNode"
+              :default-checked-keys="checkedKeys"
+              node-key="id"
               ref="tree"
             >
               <span class="custom-tree-node" slot-scope="{ node, data }">
@@ -109,7 +111,7 @@
         </div>
       </TabPane>
       <TabPane :label="Resource.Favorite" name="collect">
-        <div class="collect">
+        <div class="collect" :class="$props.splitId ? `collectsplit` : ''">
           <List split>
             <ListItem
               v-for="(item, index) in favoriteLayerList"
@@ -150,6 +152,9 @@ export default {
       type: Boolean,
       default: false,
     },
+    checkedKeys: {
+      type: Object,
+    },
   },
   data() {
     return {
@@ -185,6 +190,9 @@ export default {
     toggleVisibility() {
       this.$props.splitId ? this.$emit("close") : store.setToolBarAction(0);
     },
+    setCheckedKeys(keys) {
+      this.$refs.tree.setCheckedKeys(keys);
+    },
     filterNode(value, data) {
       if (!value) return true;
       return data.label.indexOf(value) !== -1;
@@ -228,7 +236,13 @@ export default {
     },
     // 复选框改变
     handleCheckChange(obj, checked) {
-      this.$emit("handleCheckChange", obj, checked);
+      console.log(obj, checked);
+      if (typeof checked == "boolean") {
+        obj.checked = checked;
+      } else {
+        obj.checked = !obj.checked;
+      }
+      this.$emit("handleCheckChange", obj, checked, this.$props.splitId);
     },
 
     //获取后台资源目录树结构

src/components/sceneAtttribute/splitScreen/splitScreen.vue

@@ -2,14 +2,14 @@
 <template>
   <div id="screenDiv" style="position: absolute; height: 100%; width: 100%">
     <div
-      v-for="i in value"
-      :key="i"
+      v-for="(k, i) in value"
+      :key="k"
       class="splitScreen"
       :class="{
         w50:
           type == 'HORIZONTAL' ||
           type == 'QUAD' ||
-          (type == 'TRIPLE' && i != 3),
+          (type == 'TRIPLE' && k != 3),
         h50: type == 'VERTICAL' || type == 'QUAD' || type == 'TRIPLE',
       }"
     >
@@ -21,8 +21,10 @@
         <span class="iconfont icontuceng"></span>
       </li>
       <layer-manage-split
-        :splitId="i"
+        ref="splitManage"
+        :splitId="k"
         :isshow="layers[i]"
+        :checkedKeys="checkedKeys[i]"
         @close="$set(layers, i, false)"
         @handleCheckChange="handleCheckChange"
       ></layer-manage-split>
@@ -36,6 +38,7 @@ export default {
   data() {
     return {
       layers: [],
+      checkedKeys: [],
     };
   },
   computed: {
@@ -56,10 +59,74 @@ export default {
       }
     },
   },
-  methods: {},
+  watch: {
+    value(val) {
+      this.layers = Array(val);
+      this.checkedKeys = Array(val);
+    },
+  },
+  // inject: ["checkedChange"],
+  mounted() {},
+  methods: {
+    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 {
+        console.log(obj.title, obj.type, splitId, "q");
+        // if (obj.checked) {
+        let sceneLayer;
+        switch (obj.type) {
+          case "S3M": //场景
+            if (store.state.sceneLayerlist[obj.title])
+              sceneLayer = store.state.sceneLayerlist[obj.title][0][0];
+            // viewer.scene.layers.find(obj.title)
+            break;
+          case "S3MDATA": //scp
+          case "3DTiles": //tileset
+            sceneLayer = store.state.sceneLayerlist[obj.title];
+            //viewer.scene.layers.find(obj.title)
+            break;
+          case "IMG": //影像
+          case "Vector": //矢量
+            // sceneLayer = this.layerparams[obj.id];
+            let slist = viewer.imageryLayers._layers.filter(
+              (element) => element._imageryProvider._name == obj.title
+            );
+            console.log(slist, "slist");
+            sceneLayer = slist.length > 0 ? slist[0] : null;
+            break;
+          case "Terrain": //地形
+            // sceneLayer = viewer.terrainProvider;
+            console.log(viewer.terrainProvider, viewer.scene.terrainProvider);
+            break;
+          default:
+            null;
+        }
+        if (sceneLayer) {
+          sceneLayer.setVisibleInViewport(splitId - 1, obj.checked);
+          // sceneLayer.setVisibleInViewport(1, obj.checked);
+        } 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);
+          }
+        }
+      }
+    },
+  },
 };
 </script>
-<style lang="scss" scoped>
+<style lang="scss" >
 .splitScreen {
   float: left;
   height: 100%;
@@ -73,6 +140,12 @@ export default {
     // font-size: 30px;
     z-index: 100;
   }
+  .sm-panel {
+    max-width: 300px;
+    height: 75%;
+    max-height: 80%;
+    top: 5px;
+  }
 }
 
 .w50 {

src/main.js

@@ -42,6 +42,10 @@ window.createTooltip = tooltip;
 //组件引用
 import components from './components/index'
 Vue.use(components);
+
+import Vue from 'vue';
+Vue.prototype.bus = new Vue();
+
 // import './common/js/cover_css'
 new Vue({
     el: '#app',