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);
    },
    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;
      store.setSceneLayersList(this.sceneLayers);
      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",
            });
          } else if (obj.title == "分层分户_白膜") {
            store.setLayerList(layers[0][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; //底部高度
          //   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 (obj.children && obj.children.length > 0) {
        for (let i = 0; i < obj.children.length; i++) {
          this.handleCheckChange(obj.children[i], checked);
        }
      } else {
        this.checkedChange(obj);
        if (checked) store.setCheckedData(obj);
      }
      store.setVectorLayerList(this.vectorlayerlist);
      store.setModelLayerList(this.modellayerlist);
    },
    //type roller 卷帘 split分屏splitId
    checkedChange(obj, type, splitId) {
      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;
            store.setlayerparamsList(this.layerparams);
            if (type == "roller") this.bus.$emit("setImageryRoller", 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;
            store.setlayerparamsList(this.layerparams);
            if (type == "roller") this.bus.$emit("setImageryRoller", layer2);
            // viewer.flyTo(layer2);
            break;
          case "Terrain": //地形
            this.addTerrain(obj.url);
            break;
          default:
            null;
        }
        if (type == "split")
          this.bus.$emit("setImagerySplit", obj, obj.checked, splitId);
      } 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;
        }
      }
    },

    //图层定位
    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() {
    this.bus.$on("checkedChange", this.checkedChange);
  },

  watch: {},
};
</script>

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