优化图层管理的折叠会折叠其它的面板；优化柱状图属性界面；优化WMS图层加载效果；优化资料馆上传的附件，前端显示不出来效果；综合展示拾取功能

Surpriseplus

2023-03-15 f0cf67e3f93bef082f2ca02139a7fe647b33e467

 src/views/Synthesis/LeftMenu.vue

@@ -475,12 +475,7 @@
            name: "空间查询",
            css: "twoMenu_imge52",
          },
          {
            id: "e3",
            label: "synthesis.pickup",
            name: "拾取",
            css: "twoMenu_imge52",
          },

        ],
        [
          {
@@ -1416,7 +1411,7 @@
            Viewer.screenSpaceEventHandler.setInputAction(function (event) {
              let p = sgworld.Navigate.getMouseDegrees(event);
              console.log(p);
              if (that.showPickUp){
              if (that.showPickUp) {
                that.getPickUpData(p);
              }
            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
@@ -1837,7 +1832,7 @@
        if (!m_box) {
          m_box = Viewer.entities.add({
            id: 'ClopBox',
            modelMatrixPrimitive:modelMatrixPrimitive,
            modelMatrixPrimitive: modelMatrixPrimitive,
            position: boundingSphere.center,
            box: {
              dimensions: new Cesium.Cartesian3(boundingSphere.radius * 1.2, boundingSphere.radius * 1.2, 40),
@@ -1922,7 +1917,7 @@
        return function () {
          var num_x = window.localStorage.getItem('slider_x') / 100000;
          var num_y = window.localStorage.getItem('slider_y') / 100000;
          var num_z = window.localStorage.getItem('slider_z')/1.5;//读取滑动条值
          var num_z = window.localStorage.getItem('slider_z') / 1.5;//读取滑动条值
          var origin_degree = cartesian3ToDegrees(origin);
          var target_degree_x = [origin_degree[0] + num_x, origin_degree[1], +origin_degree[2]];
          var target_degree_y = [origin_degree[0], origin_degree[1] + num_y, +origin_degree[2]];
@@ -1970,7 +1965,7 @@
          }
          else if (type == 'top') {
            if (num_z < 0) {
              plane.distance =  m_dis_z;
              plane.distance = m_dis_z;
              // console.log('num_z=========',num_z)
              // console.log('m_dis_z=========',m_dis_z)
              // plane.distance = distance - m_dis_z;
@@ -1986,9 +1981,9 @@
      }

      function createPlanePos(origin, x, y, z) {
        var clipbox=Viewer.entities.getById('ClopBox');
        var clipbox = Viewer.entities.getById('ClopBox');
        if (clipbox) {
          clipbox.position=new Cesium.CallbackProperty(function () {
          clipbox.position = new Cesium.CallbackProperty(function () {
            return Cesium.Cartesian3.fromDegrees(origin[0] + x, origin[1] + y, +origin[2] + z);//实时返回当前盒子的位置
          }, false);
        }
@@ -2232,6 +2227,7 @@
      if (data.code != 200) {
        return this.$message.error("图层列表查询失败");
      }

      var std = data.result;
      var that = this;
      var checkKey = [];
@@ -2243,17 +2239,21 @@
        if (str.url != null && str.type == 2) {
          if (str.isShow == 1) {
            checkKey.push(str.id);
            that.setAddLayers(str);
            if (str.serveType == "WMS" && str.url){
              checkedLayers.push(str);
            }
          }
          return str;
        }
      });
      //存储选中图层
      sessionStorage.setItem("checkedLayers",JSON.stringify(checkedLayers));
      var value = std.filter((str) => {
        if (str.url != null && str.type == 2 && str.isShow == 1) {

          return str;
        }
      })

      this.setAddLayers(value);
      var res = this.setTreeData(val);
      //存储选中图层
      // sessionStorage.setItem("checkedLayers", JSON.stringify(checkedLayers));

      for (var i in res) {
        res[i].children = res[i].children.filter((val) => {
@@ -2262,8 +2262,9 @@
          }
        });
      }

      this.$store.state.treeData = res;
      // this.$refs.tree.setCheckedKeys(checkKey);

      this.$store.state.checkedKeys = checkKey;
    },
    setTreeData(source) {
@@ -2278,101 +2279,105 @@
      });
    },
    setAddLayers(res) {
      if (res.serveType == "WMS") {
        var resource = geoServerURl;
        if (res.resource != null && res.resource != undefined) {
          resource = res.resource;
      var std = [[]];
      for (var i in res) {
        switch (res[i].serveType) {
          case "WMS":
            std[0].push(res[i])
            break;
        }
        var imageryLayers = window.Viewer.scene.imageryLayers;
        let layerWMS = new Cesium.WebMapServiceImageryProvider({
          url: resource,
          layers: res.url,
          parameters: {
            transparent: true,
            format: "image/png",
            srs: "EPSG:4490",
            styles: "",
          },
          tileWidth: 512,
          tileHeight: 512,
        });
        layerWMS.name = res.cnName;
        //透明度
        var tdtAnnoLayer = imageryLayers.addImageryProvider(layerWMS);
        if (res.opacity) {
          tdtAnnoLayer.alpha = parseInt(res.opacity) / 100;
        }
        var layer2 = new Image({
          name: res.cnName,
          source: new ImageWMS({
            crossOrigin: "anonymous",
            url: resource,
            params: {
              FORMAT: "image/png",
              VERSION: "1.1.1",
              LAYERS: res.url,
            },
          }),
        });
        if (res.opacity) {
          layer2.setOpacity(parseInt(res.opacity) / 100);
        }
        window.map.addLayer(layer2);
      } else if (res.serveType == "WFS") {
        var url =
          res.resource +
          "?service=WFS&version=1.0.0&request=GetFeature&typeName=" +
          res.url +
          "&outputFormat=application%2Fjson";
        $.ajax({
          url: url,
          cache: false,
          async: true,
          success: function (data) {
            var datasource = Cesium.GeoJsonDataSource.load(data, {
              stroke: Cesium.Color.YELLOW,
              fill: Cesium.Color.YELLOW.withAlpha(0.1),
              alpha: 0.1,
              strokeWidth: 8,
              clampToGround: true, //是否贴地
            });
            datasource.then((data) => {
              data.name = res.cnName;
              window.Viewer.dataSources.add(data);
            });
          },
          error: function (data) {
            console.log("error");
          },
        });

        var vectorLayer = new VectorLayer({
          name: res.cnName,
          source: new VectorSource({
            url: url,
            format: new GeoJSON(),
          }),
        });
        window.map.addLayer(vectorLayer);
      } else if (res.serveType == "Tileset") {
        var tileset = Viewer.scene.primitives.add(
          new Cesium.Cesium3DTileset({
            name: res.cnName,
            url: modelUrl + "/" + res.url, //192.168.20.106,to4
            maximumScreenSpaceError: 64, // 最大屏幕空间错误：16
            maximumMemoryUsage: 768, // 最大内存：512
            dynamicScreenSpaceError: true, // 减少离相机较远的屏幕空间错误：false
            skipLevelOfDetail: true, // 在遍历时候跳过详情：false
          })
        );

        tileset.readyPromise.then(function (tileset) {
          tileset.id = res.cnName;
          tileset.layerId = res.id;
          Viewer.flyTo(tileset);
        });
      }
      if (std[0].length != 0) {
        this.setAddWmsLayer(std[0])
      }
    },
    setAddWmsLayer(res) {

      for (var i = 0; i < window.Viewer.imageryLayers._layers.length; i++) {
        var val_id = window.Viewer.imageryLayers._layers[i].imageryProvider.name;
        if (val_id == "Wms_Layer") {
          window.Viewer.imageryLayers.remove(
            window.Viewer.imageryLayers._layers[i]
          );
        }
      }
      var layers_ol = window.map.getAllLayers();
      for (var i in layers_ol) {
        var layerOl = layers_ol[i];
        if (layerOl.values_.name == "Wms_Layer") {
          window.map.removeLayer(layers_ol[i]); //显示图层
        }
      }
      var url = [];
      for (var i in res) {
        url.push(res[i].url)
      }
      url = url.reverse();
      var that = this;
      var getFeatureInfoFormat = new Cesium.GetFeatureInfoFormat("html", null, function (html) {
        that.getFeatureInfo(html)
      });
      window.layerWMS = new Cesium.WebMapServiceImageryProvider({
        url: geoServerURl,
        layers: url.toString(),
        getFeatureInfoParameters: { info_format: 'text/html' },
        enablePickFeatures: true,
        getFeatureInfoFormats: [getFeatureInfoFormat],
        parameters: {
          transparent: true,
          format: "image/png",
          srs: "EPSG:4490",
          styles: "",
        },
        tileWidth: 512,
        tileHeight: 512,
      });
      layerWMS.name = "Wms_Layer";
      window.Viewer.scene.imageryLayers.addImageryProvider(window.layerWMS);
      var layer2 = new Image({
        name: "Wms_Layer",
        source: new ImageWMS({
          crossOrigin: "anonymous",
          url: geoServerURl,
          params: {
            FORMAT: "image/png",
            VERSION: "1.1.1",
            LAYERS: url.toString(),
          },
        }),
      });
      if (res.opacity) {
        layer2.setOpacity(parseInt(res.opacity) / 100);
      }
      window.map.addLayer(layer2);
    },
    async getFeatureInfo(html) {
      var start = html.indexOf("<caption class=\"featureInfo\">") + "<caption class=\"featureInfo\">".length;
      var end = html.indexOf("</caption>");
      var tab = html.substr(start, end - start);
      start = html.lastIndexOf(tab) + tab.length + 1;
      end = html.indexOf("</td>", start);
      var gid = html.substr(start, end - start);
      if (gid && tab) {
        this.$store.state.pickoption = {
          gid: gid,
          name: tab.replaceAll("_", "")
        }

        this.$refs &&
          this.$refs.queryinfo &&
          this.$refs.queryinfo.close("queryinfo");
        this.$store.state.mapPopBoxFlag = "4";

        this.$refs &&
          this.$refs.queryinfo &&
          this.$refs.queryinfo.open("拾取分析", null,);
      }


    },


    showModelAttach() {
      if (this.$store.state.attachModel) {
        var name = this.$store.state.attachinfo.cnName;
@@ -2621,6 +2626,29 @@
      if (!showPop) {
        this.$message.warning("暂无数据!");
      }
    },
    showPopBox() {

      if (this.$store.state.showPopBoxFlag == true) {
        this.$refs && this.$refs.queryinfo && this.$refs.queryinfo.close();


        this.$refs &&
          this.$refs.queryinfo &&
          this.$refs.queryinfo.open("属性", null, {
            close: () => {
              this.$store.state.showPopBoxFlag == false
              if (this.$store.state.primitLayer != null) {
                sgworld.Creator.DeleteObject(this.$store.state.primitLayer);
                this.$store.state.primitLayer = null;
              }

              if (window.Viewer.scene.primitives.length != 0) {
                window.Viewer.scene.primitives.removeAll();
              }
            },
          });
      }
    }
  },
  mounted() {
@@ -2638,7 +2666,9 @@
        this.menuChange(res);
      }
    });

    this.$bus.$on("showMenuLayer", ((res) => {
      this.setAddLayers(res);
    }));
    this.$store.state.showAllLayers = true;
    this.$store.state.layerMnage = false;
    this.$store.state.treeData = null;
@@ -2653,6 +2683,9 @@
    catch(newVal, oldVal) {
      this.showModelCatch();
    },
    popObj(newVal, oldVal) {
      this.showPopBox();
    }
  },
  computed: {
    Obj() {
@@ -2661,6 +2694,9 @@
    catch() {
      return this.$store.state.catModel;
    },
    popObj() {
      return this.$store.state.showPopBoxFlag;
    }
  },
};
</script>