real3d-portalsite/src/components/Combinations/LayerManage/LayerManage.vue

<template>
  <layer-manage-split
    @visibleChange="visibleChange"
    @transSliderChange="transSliderChange"
    @handleCheckChange="handleCheckChange"
    @location="location"
    @raise="raise"
    @lower="lower"
  ></layer-manage-split>
</template>

<script>
import { Collect, GetResourceTree, GetMyCollect } from "@/api/map";
export default {
  name: "LayerManage",
  data() {
    return {
      modellayerlist: [],
      vectorlayerlist: [],
      username: "admin",
      // treeSearchText: "",
      addlayerdata: [],
      sceneLayers: {},
      // favoriteLayerList: [],
      sharedState: store.state,
      //   flag: false,
      //   s3mLen: 0,
      // hid: true,
      layerparams: {},
      // ImgHid: false, //影响图层移动默认不显示
      // S3MLayersObj: {
      //   title: Resource.s3mLayer,
      //   expand: true,
      //   checked: true,
      //   type: "S3M",
      //   children: [],
      // },
      // imgLayersObj: {
      //   title: Resource.imageryLayer,
      //   expand: true,
      //   checked: true,
      //   type: "IMG",
      //   children: [],
      // },
      // TerrainLayersObj: {
      //   title: Resource.terrainLayer,
      //   expand: true,
      //   checked: true,
      //   type: "TERRAIN",
      //   children: [],
      // },
      contextData: null,
      S3MList:[],

    };
  },
  computed: {
    imgLayers: function () {
      return this.sharedState.imgLayerManage;
    },
    terrainLayers: function () {
      return this.sharedState.terrainLayerManage;
    },
    S3MLayers: function () {
      return this.sharedState.S3MLayerManage;
    },
  },

  methods: {
    toggleVisibility() {
      store.setToolBarAction(0);
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    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) {
        case "S3M": //场景
          if (this.sceneLayers[obj.title]) {
            this.sceneLayers[obj.title][0][0].visible = visible;
          }
          break;
        case "3DTiles": //场景
          if (this.sceneLayers[obj.title]) {
            this.sceneLayers[obj.title].show = 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": //地形
          if (visible) {
            viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
              url: obj.url,
              isSct: true,
              requestVertexNormals: true,
            });
          } else {
            viewer.scene.terrainProvider = new Cesium.EllipsoidTerrainProvider(
              {}
            );
          }
          break;
        default:
          null;
      }
    },
    transSliderChange(obj, v, a) {
      if (typeof v == undefined) {
        return;
      }
      let value = v / 100;
      let imageryLayers = viewer.imageryLayers;
      switch (obj.type) {
        case "S3M": //场景
          if (this.sceneLayers[obj.title]) {
            this.sceneLayers[obj.title][0][0].style3D.fillForeColor =
              new Cesium.Color(1.0, 1.0, 1.0, value);
          }
          break;
        case "S3MDATA": //scp
          if (this.sceneLayers[obj.title]) {
            this.sceneLayers[obj.title][0][0].style3D.fillForeColor =
              new Cesium.Color(1.0, 1.0, 1.0, value);
          }
          break;
        case "3DTiles": //tileset
          if (this.sceneLayers[obj.title]) {
            this.sceneLayers[obj.title].style = new Cesium.Cesium3DTileStyle({
              color: "color('rgba(255,255,255," + value + ")')",
            });
          }
          break;
        case "IMG": //影像
          for (let i = 0; i < imageryLayers._layers.length; i++) {
            let element = imageryLayers._layers[i];
            if (element._imageryProvider._name == obj.title) {
              element.alpha = value;
              break;
            }
          }
          break;
        case "Vector": //矢量
          for (let i = 0; i < imageryLayers._layers.length; i++) {
            let element = imageryLayers._layers[i];
            if (element._imageryProvider._name == obj.title) {
              element.alpha = value;
              break;
            }
          }
          break;
        case "Terrain": //地形
          break;
        default:
          null;
      }
    },
    addS3M(LayerURL) {
      let promiseArray = [];
      promiseArray.push(viewer.scene.addS3MTilesLayerByScp(LayerURL));
      this.promiseWhen(promiseArray, true);
    },

    addTerrain(LayerURL) {
      viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
        url: LayerURL,
        isSct: true,
        requestVertexNormals: true,
      });
    },

    add3DTiles(obj) {
      let tileset = new Cesium.Cesium3DTileset({
        url: obj.url + "?id=" + obj.id,
        skipLevelOfDetail: true,
      });
      this.sceneLayers[obj.title] = tileset;
      let thisLayer = viewer.scene.primitives.add(tileset);
      viewer.flyTo(thisLayer);
    },

    addImage(LayerURL) {
      var layer = viewer.imageryLayers.addImageryProvider(
        new Cesium.SuperMapImageryProvider({
          url: LayerURL,
        })
      );
      viewer.flyTo(layer);
    },

    promiseWhen(promiseArray, sceneName, obj) {
      let this_ = this;
      Cesium.when.all(
        promiseArray,
        (layers) => {
          this_.sceneLayers[obj.title] = layers;
          if (sceneName) {
            this.flyTo(sceneName);
          }
          if (obj.title == "分层分户") {
            store.setLayerList(layers[0][0]);
            layers[0][0].setQueryParameter({
              url: "https://www.supermapol.com/realspace/services/data-HeBing8HaoLou/rest/data",
              dataSourceName: "Model_8_old",
              dataSetName: "属性表",
              keyWord: "SmID",
            });
          }
          store.state.S3MList.push(layers[0])
          store.state.tempLatData=layers[0]
          // for (var i = 0; i < layers.length; i++) {
          //   let style = new Cesium.Style3D();
          //   style.bottomAltitude = window.modelBottomAltitude; //底部高度
          //   if (layers[i].length > 0) {
          //     for (var j = 0; j < layers[i].length; j++) {
          //       layers[i][j].style3D = style;
          //       layers[i][j].refresh();
          //       layers[i][j].isOverlapDisplayed = true; //开启避让
          //     }
          //   } else {
          //     layers[i].style3D = style;
          //     layers[i].refresh();
          //     layers[i].isOverlapDisplayed = true; //开启避让
          //   }
          // }
        },
        function (e) {
          if (widget._showRenderLoopErrors) {
            let title = Resource.scpUrlErrorMsg;
            widget.showErrorPanel(title, undefined, e);
          }
        }
      );
    },
    handleSelectChange(selectedList, obj) {
      obj ? (obj.expand = !obj.expand) : null;
    },
    // 复选框改变
    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, {
                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;
            }
          }
          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;
            }
          }
          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 {
                    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 "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;
          }
        }
      }
      store.setVectorLayerList(this.vectorlayerlist);
      store.setModelLayerList(this.modellayerlist);
    },

 

 

    //图层定位
    location(obj) {
      let imageryLayers = viewer.imageryLayers;
      switch (obj.type) {
        case "S3M": //场景
          if (this.sceneLayers[obj.title]) {
            viewer.flyTo(this.sceneLayers[obj.title][0][0]);
          }
          break;
        case "S3MDATA": //scp
          viewer.flyTo(this.sceneLayers[obj.title][0][0]);
          break;
        case "3DTiles": //tileset
          viewer.flyTo(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) {
              viewer.flyTo(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) {
              viewer.flyTo(element);
              break;
            }
          }
          break;
        case "Terrain": //地形
          viewer.scene.terrainProvider = new Cesium.EllipsoidTerrainProvider(
            {}
          );
          break;
        default:
          null;
      }
    },

    //影像图层操作
    raise(obj) {
      viewer.imageryLayers.raise(this.layerparams[obj.id]);
      for (let i = 0; i < this.addlayerdata.length; i++) {
        if (this.addlayerdata[i].title == obj.title) {
          let arr = Array.from(this.addlayerdata);
          this.addlayerdata = [];
          this.addlayerdata = this.moveUp(arr, i);
          break;
        }
      }
    },
    lower(obj) {
      viewer.imageryLayers.lower(this.layerparams[obj.id]);
      for (let i = 0; i < this.addlayerdata.length; i++) {
        if (this.addlayerdata[i].title == obj.title) {
          let arr = Array.from(this.addlayerdata);
          this.addlayerdata = [];
          this.addlayerdata = this.moveDown(arr, i);
          break;
        }
      }
    },
    raiseToTop() {
      let imageryLayers = viewer.imageryLayers._layers;
      let ly = imageryLayers[this.contextData.id];
      viewer.imageryLayers.raiseToTop(ly);
      this.updataImgLayers();
    },
    lowerToBottom() {
      let imageryLayers = viewer.imageryLayers._layers;
      let ly = imageryLayers[this.contextData.id];
      viewer.imageryLayers.lowerToBottom(ly);
      this.updataImgLayers();
    },
    // 上移操作
    moveUp(array, index) {
      if (index > 0 && index < array.length) {
        let temp = array[index];
        array[index] = array[index - 1];
        array[index - 1] = temp;
      }
      return array;
    },
    // 下移操作
    moveDown(array, index) {
      if (index >= 0 && index < array.length - 1) {
        let temp = array[index];
        array[index] = array[index + 1];
        array[index + 1] = temp;
      }
      return array;
    },
  },

  mounted() {
  },

  watch: {
  },
};
</script>

<style lang="scss">
@import "./LayerManage.scss";
</style>