图层管理

src/components/Combinations/LayerManage/LayerManage.scss

@@ -53,6 +53,7 @@
 
 .opBtn {
     cursor: pointer;
+    margin-left: 5px;
 }
 
 .ivu-list-item {
@@ -61,9 +62,11 @@
 
 .sliderBtn {
     width: 200px;
-    height: 3px;
-    right: 8px;
+    height: 9px;
+    background: transparent;
     position: absolute;
+    margin-top: 33px;
+    right: 15px;
 }
 
 .ivu-tabs-nav {
@@ -76,4 +79,20 @@
 
 .ivu-icon {
     color: white !important;
+}
+
+.ivu-slider {
+    margin-top: -14px !important;
+}
+
+.ivu-switch-small.ivu-switch-checked:after {
+    left: 23px !important;
+}
+
+.ivu-switch-small {
+    width: 38px !important;
+}
+
+.ivu-list-large .ivu-list-item {
+    padding-left: 5px;
 }

src/components/Combinations/LayerManage/LayerManage.vue

@@ -45,11 +45,24 @@
             <ListItem v-for="(item, index) in addlayerdata" :key="index">
               {{ item.title }}
               <div class="listBtn">
+                <i-switch
+                  v-model="item.visible"
+                  size="small"
+                  @on-change="visibleChange(item, $event)"
+                >
+                  <template #open>
+                    <span></span>
+                  </template>
+                  <template #close>
+                    <span></span>
+                  </template>
+                </i-switch>
                 <Icon
                   type="md-arrow-round-up"
                   color="green"
                   size="18"
                   class="opBtn"
+                  :title="Resource.MoveUpOneLevel"
                   @click="raise(item)"
                   v-if="
                     index > 0 && (item.type == 'Vector' || item.type == 'IMG')
@@ -60,26 +73,24 @@
                   color="green"
                   size="18"
                   class="opBtn"
+                  :title="Resource.MoveDownOneLevel"
                   @click="lower(item)"
                   v-if="
                     index < addlayerdata.length - 1 &&
                     (item.type == 'Vector' || item.type == 'IMG')
                   "
-                /><Icon
+                />
+                <Icon
                   type="md-locate"
                   color="green"
                   size="18"
                   class="opBtn"
+                  :title="Resource.location"
                   @click="location(item)"
                 />
-                <!-- <Icon type="md-eye" color="green" size="18" class="opBtn" />
-                <Icon type="md-eye-off" color="green" size="18" class="opBtn" /> -->
               </div>
               <div class="sliderBtn">
                 <Slider
-                  min="0"
-                  max="100"
-                  step="1"
                   v-model="item.trans"
                   @on-change="transSliderChange(item, $event)"
                 ></Slider>
@@ -103,6 +114,7 @@ export default {
       //   flag: false,
       //   s3mLen: 0,
       hid: true,
+      layerparams: {},
       ImgHid: false, //影响图层移动默认不显示
       S3MLayersObj: {
         title: Resource.s3mLayer,
@@ -158,8 +170,33 @@ export default {
   },
 
   methods: {
+    visibleChange(obj, visible, a) {
+      console.log(obj, visible, a);
+      switch (obj.type) {
+        case "S3M": //场景
+          if (this.sceneLayers[obj.title]) {
+            this.sceneLayers[obj.title][0][0].visible = visible;
+          }
+          break;
+        case "S3MDATA": //scp
+          if (this.sceneLayers[obj.title]) {
+            this.sceneLayers[obj.title][0][0].visible = visible;
+          }
+          break;
+        case "IMG": //影像
+          this.layerparams[obj.id].show = visible;
+          break;
+        case "Vector": //矢量
+          this.layerparams[obj.id].show = visible;
+          break;
+        case "Terrain": //地形
+          break;
+        default:
+          null;
+      }
+    },
     transSliderChange(obj, v, a) {
-      if (!v || v == undefined) {
+      if (typeof v == undefined) {
         return;
       }
       let value = v / 100;
@@ -240,10 +277,12 @@ export default {
               for (var j = 0; j < layers[i].length; j++) {
                 layers[i][j].style3D = style;
                 layers[i][j].refresh();
+                layers[i][j].isOverlapDisplayed = false; //开启避让
               }
             } else {
               layers[i].style3D = style;
               layers[i].refresh();
+              layers[i].isOverlapDisplayed = false; //开启避让
             }
           }
         },
@@ -268,6 +307,7 @@ export default {
         let imageryLayers = viewer.imageryLayers;
         if (obj.checked) {
           obj.trans = 100;
+          obj.visible = true;
           this.addlayerdata.push(obj);
           switch (obj.type) {
             case "S3M": //场景
@@ -286,6 +326,7 @@ export default {
                   name: obj.title,
                 })
               );
+              this.layerparams[obj.id] = layer;
               // viewer.flyTo(layer);
               break;
             case "Vector": //矢量
@@ -295,6 +336,7 @@ export default {
                   name: obj.title,
                 })
               );
+              this.layerparams[obj.id] = layer2;
               // viewer.flyTo(layer2);
               break;
             case "Terrain": //地形
@@ -310,6 +352,7 @@ export default {
               break;
             }
           }
+          delete this.layerparams[obj.id];
           switch (obj.type) {
             case "S3M": //场景
               if (this.sceneLayers[obj.title]) {
@@ -421,37 +464,23 @@ export default {
 
     //影像图层操作
     raise(obj) {
-      let imageryLayers = viewer.imageryLayers._layers;
-      // let ly = imageryLayers[this.contextData.id];
-      for (let i = 0; i < imageryLayers.length; i++) {
-        let element = imageryLayers[i];
-        if (element._imageryProvider._name == obj.title) {
-          viewer.imageryLayers.raise(element);
-          break;
-        }
-      }
+      viewer.imageryLayers.raise(this.layerparams[obj.id]);
       for (let i = 0; i < this.addlayerdata.length; i++) {
         if (this.addlayerdata[i].title == obj.title) {
-          this.addlayerdata = this.moveUp(this.addlayerdata, i);
+          let arr = Array.from(this.addlayerdata);
+          this.addlayerdata = [];
+          this.addlayerdata = this.moveUp(arr, i);
           break;
         }
       }
-      // viewer.imageryLayers.raise(ly);
-      // this.updataImgLayers();
     },
     lower(obj) {
-      let imageryLayers = viewer.imageryLayers._layers;
-      // let ly = imageryLayers[this.contextData.id];
-      for (let i = 0; i < imageryLayers.length; i++) {
-        let element = imageryLayers[i];
-        if (element._imageryProvider._name == obj.title) {
-          viewer.imageryLayers.lower(element);
-          break;
-        }
-      }
+      viewer.imageryLayers.lower(this.layerparams[obj.id]);
       for (let i = 0; i < this.addlayerdata.length; i++) {
         if (this.addlayerdata[i].title == obj.title) {
-          this.addlayerdata = this.moveDown(this.addlayerdata, i);
+          let arr = Array.from(this.addlayerdata);
+          this.addlayerdata = [];
+          this.addlayerdata = this.moveDown(arr, i);
           break;
         }
       }