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

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

<script>
import { Collect, GetResourceTree, GetMyCollect } from "@/api/map";
import LayerLegend from "./LayerLegend.vue";
import xml2js from "xml2js";
let geoLayers = [];
export default {
  name: "LayerManage",
  components: { LayerLegend },
  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]) {
            for (let i = 0; i < this.sceneLayers[obj.title][0].length; i++) {
              this.sceneLayers[obj.title][0][i].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 "wms":
        case "wmts":
        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 "wms":
        case "wmts":
        case "IMG": //影像
        case "Vector": //矢量
          this.layerparams[obj.id].alpha = value;
          // 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,
      });
      this.bus.$emit("setDepthAgainst", 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);
    },
    addWMS(obj) {
      let layer = viewer.imageryLayers.addImageryProvider(
        new Cesium.WebMapServiceImageryProvider({
          url: obj.url,
          layers: `${obj.fwgzkj}:${obj.fwmc}`, //"demo:Ahtq_czkfbj",
          parameters: {
            service: obj.type, //"WMS",
            format: obj.format,
            transparent: true,
            // srs: "EPSG:4326", // 坐标参考系统，可以根据需要更改
          },
        })
      );
      return layer;
    },
    addWMTS(obj) {
      return viewer.imageryLayers.addImageryProvider(
        new Cesium.WebMapTileServiceImageryProvider({
          url: obj.url, //'http://192.168.60.52:28085/geoserver/gwc/service/wmts';
          layer: `${obj.fwgzkj}:${obj.fwmc}`, //"demo:yzq_czkfbj"
          style: "", // 替换为你的WMTS图层风格
          tileMatrixSetID: obj.qpfa, // 或者其他的EPSG代码
          format: obj.format,
          tilingScheme: new Cesium.WebMercatorTilingScheme(), // 当想要加载EPSG:4326瓦片服务时，只需要创建一个GeographicTilingScheme对象即可
          maximumLevel: obj.maximumlevel,
          minimumlevel: obj.minimumlevel,
        })
      );
    },
    addArcGis(obj) {
      let layer = viewer.imageryLayers.addImageryProvider(
        new Cesium.ArcGisMapServerImageryProvider({
          url: "http://192.168.60.20:6080/arcgis/rest/services/150500/DLTB00_2019/MapServer?f=jsapi",
        })
      );
      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.url.indexOf("3D-HeBing8HaoLou") > 0) {
            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;
          layers[0].forEach((item) => {
            item.RGBTOBGR = true;
            if (obj.title == "倾斜摄影") {
              let style = new Cesium.Style3D();
              style.bottomAltitude = window.modelBottomAltitude; //底部高度
              item.style3D = style;
              item.brightness = 1.2;
              item.contrast = 1.2;
              item.saturation = 1.2;
              item.gamma = 1.1;
            }
            if (
              item.name.indexOf("雨水") > -1 ||
              item.name.indexOf("管线") > -1
            ) {
              item._baseUri.query = obj.id;
            }
          });
          // 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) {
      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.unshift(obj); //将最新添加的对象放到第一位
        if (obj.serverType == "geoserver") {
          switch (obj.type) {
            case "wms":
              this.vectorlayerlist.push(obj);
              this.layerparams[obj.id] = this.addWMS(obj);
              store.setlayerparamsList(this.layerparams);
              break;
            case "wmts":
              this.vectorlayerlist.push(obj);
              this.layerparams[obj.id] = this.addWMTS(obj);
              store.setlayerparamsList(this.layerparams);
              break;
          }
        } else if (obj.serverType == "arcgis") {
        } else {
          switch (obj.type) {
            case "S3M": //场景
              let s = viewer.scene.open(obj.url, undefined, {
                autoSetView: false, // obj.title != "倾斜摄影",
              });
              this.vectorlayerlist.push(obj);
              this.promiseWhen([s], undefined, obj);
              this.bus.$emit("setDepthAgainst", true);
              if (
                obj.title.indexOf("雨水") > -1 ||
                obj.title.indexOf("管线") > -1
              ) {
                this.bus.$emit("setnUderground", obj.checked);
              }

              // 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, splitId);
              // viewer.flyTo(layer);
              break;
            case "Vector": //矢量
              // let provider = new Cesium.SuperMapImageryProvider({
              //   url: obj.url,
              //   name: obj.title,
              // })
              // let layer2 = viewer.imageryLayers.addImageryProvider(
              //   provider
              // );

              // var params = [{
              //   layerName: 'YJJBNTBHTB@YJJBNTBH',
              //   isVisible: true,
              //   displayFilter: "xzqdm='460205000003'"
              // }
              // ]
              // provider.setLayerStatusParameters(params)

              // let layer2 = viewer.imageryLayers.addImageryProvider(
              //   new Cesium.SuperMapImageryProvider({
              //     url: obj.url,
              //     name: obj.title,
              //   })
              // );

              // var provider = new Cesium.SuperMapImageryProvider({ url: 'http://192.168.60.3:8099/iserver/services/map-GuiHuaDiKuai/rest/maps/GHDK%40%E8%A7%84%E5%88%92%E5%9C%B0%E5%9D%97' });
              // var layer2 = viewer.imageryLayers.addImageryProvider(provider);
              // var params = [
              //  {
              //     layerName: 'GHDK@规划地块',
              //     isVisible: true,
              //     displayFilter: "XZQDM LIKE '460203%' and PFSJ < '20190808'"
              //   }
              // ]
              // provider.setLayerStatusParameters(params)

              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, splitId);
              // viewer.flyTo(layer2);
              break;
            case "Terrain": //地形
              this.addTerrain(obj.url);
              break;
            default:
              null;
          }
        }
        if (type == "split") {
          this.bus.$emit("setImagerySplit", obj, obj.checked, splitId, true);
        } else if (type == "share") {
          this.bus.$emit("setShareResources", obj, obj.checked, -2, true);
        }
      } else {
        if (obj.title.indexOf("雨水") > -1 || obj.title.indexOf("管线") > -1) {
          this.bus.$emit("setnUderground", obj.checked);
        }
        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;
          }
        }

        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 "wms":
          case "wmts":
          case "IMG": //影像
          case "Vector": //矢量
            imageryLayers.remove(this.layerparams[obj.id]);
            delete this.layerparams[obj.id];
            // 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;
        }
      }
    },
    async getPos(obj) {
      let ind =
        obj.url.indexOf("geoserver") >= 0
          ? obj.url.indexOf("geoserver")
          : obj.url.indexOf("siweiserver");
      let url = obj.url.substring(0, ind + 9) + "/wms";

      let params = {
        service: "WMS",
        version: "1.1.1",
        request: "GetCapabilities",
      };
      let res = await axios.get(url, { params });
      new xml2js.Parser().parseString(res.data, (err, result) => {
        geoLayers = result.WMT_MS_Capabilities.Capability[0].Layer[0].Layer;
      });
    },
    async flyTogeo(obj) {
      if (geoLayers) await this.getPos(obj);
      let ser = geoLayers.find(
        (li) => li.Name.indexOf(`${obj.fwgzkj}:${obj.fwmc}`) >= 0
      );
      if (ser) {
        let pos = ser.LatLonBoundingBox[0]["$"];
        viewer.camera.flyTo({
          destination: Cesium.Rectangle.fromDegrees(
            pos.minx,
            pos.miny,
            pos.maxx,
            pos.maxy
          ),
        });
      }
    },
    //图层定位
    location(obj) {
      let imageryLayers = viewer.imageryLayers;
      if (obj.serverType == "geoserver") {
        switch (obj.type) {
          case "wms":
          case "wmts":
            // console.log("11", this.layerparams[obj.id]);
            this.flyTogeo(obj);
            break;
        }
      } else if (obj.serverType == "arcgis") {
      } else {
        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": //影像
          case "Vector": //矢量
            viewer.flyTo(this.layerparams[obj.id]);
            // 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>