管道基础大数据平台系统开发-【前端】-新系統界面
Surpriseplus
2023-02-26 a8b3f0c6e4b19644510d8efeb7f837e50b370c06
src/views/Synthesis/LeftMenu.vue
@@ -6,13 +6,21 @@
      v-for="(item, index) in setListTwoMenu"
      :class="{ lefMenuDivActive: showTwoMenuFlag == item.id }"
    >
      <div class="menuTwoImage" :class="item.css"></div>
      <div
        class="menuTwoImage"
        :class="item.css"
      ></div>
      <div>{{ $t(item.label) }}</div>
    </div>
    <mapinfo ref="mapinfo" />
    <maplayer ref="maplayer" />
    <queryinfo ref="queryinfo" />
    <input type="file" accept=".kml" class="file" style="display: none" />
    <input
      type="file"
      accept=".kml"
      class="file"
      style="display: none"
    />
    <input
      :accept="'.shp, .shx, .dbf, .prj'"
      style="display: none"
@@ -33,6 +41,12 @@
import queryinfo from "../Tools/queryinfo.vue";
import $ from "jquery";
import { getToken } from "@/utils/auth";
import ImageWMS from "ol/source/ImageWMS";
import Image from "ol/layer/Image";
import GeoJSON from "ol/format/GeoJSON.js";
import { Vector as VectorSource } from "ol/source";
import { Vector as VectorLayer } from "ol/layer";
import { perms_selectLayers } from '../../api/api.js'
import {
  OverviewMap,
  defaults as defaultControls,
@@ -401,10 +415,6 @@
  methods: {
    //二級菜单点击切换
    setChangeTwoMenu(res) {
      this.$store.state.mapMenuBoolean = false;
      this.$store.state.mapMenuBoxFlag = null;
      this.$store.state.mapPopBoolean = false;
      this.$store.state.mapPopBoxFlag = null;
      var val = res.id[0];
      if (window.model != null) {
        window.model.deleteObject();
@@ -414,7 +424,12 @@
      if (this.isMenuFlag == "d") {
        this.clearAllAnalsy();
      }
      if (this.isMenuFlag != val) {
        this.$store.state.mapMenuBoolean = false;
        this.$store.state.mapMenuBoxFlag = null;
        this.$store.state.mapPopBoolean = false;
        this.$store.state.mapPopBoxFlag = null;
        sgworld.Creator.SimpleGraphic.clear();
        this.isMenuFlag = val;
        if (this.entityaLayers.length != 0) {
@@ -469,28 +484,28 @@
          sgworld.Creator.createSimpleGraphic(
            "point",
            {},
            function (entity) {}
            function (entity) { }
          );
          break;
        case "h2":
          sgworld.Creator.createSimpleGraphic(
            "polyline",
            {},
            function (entity) {}
            function (entity) { }
          );
          break;
        case "h3":
          sgworld.Creator.createSimpleGraphic(
            "rectangle",
            {},
            function (entity) {}
            function (entity) { }
          );
          break;
        case "h4":
          sgworld.Creator.createSimpleGraphic(
            "polygon",
            {},
            function (entity) {}
            function (entity) { }
          );
          break;
        case "h5":
@@ -517,7 +532,7 @@
          sgworld.Creator.createSimpleGraphic(
            "label",
            {},
            function (entity) {}
            function (entity) { }
          );
          break;
      }
@@ -702,7 +717,7 @@
            document.body.removeChild(a); // 释放
          }
        },
        error: function (e) {},
        error: function (e) { },
      });
    },
    handleOpenShp() {
@@ -909,18 +924,18 @@
        url,
        name,
        "height=" +
          iHeight +
          ",,innerHeight=" +
          iHeight +
          ",width=" +
          iWidth +
          ",innerWidth=" +
          iWidth +
          ",top=" +
          iTop +
          ",left=" +
          iLeft +
          ",toolbar=no,menubar=no,scrollbars=auto,resizeable=no,location=no,status=no"
        iHeight +
        ",,innerHeight=" +
        iHeight +
        ",width=" +
        iWidth +
        ",innerWidth=" +
        iWidth +
        ",top=" +
        iTop +
        ",left=" +
        iLeft +
        ",toolbar=no,menubar=no,scrollbars=auto,resizeable=no,location=no,status=no"
      );
    },
@@ -1008,9 +1023,8 @@
            "auto",
            (data) => {
              if (volumetricMeasurementTool.popupData) {
                volumetricMeasurementTool.popupData.value = `填方:${
                  data.volume.fill.toFixed(4) + data.unit.fill
                }<br>挖方:${data.volume.dig.toFixed(4) + data.unit.dig}`;
                volumetricMeasurementTool.popupData.value = `填方:${data.volume.fill.toFixed(4) + data.unit.fill
                  }<br>挖方:${data.volume.dig.toFixed(4) + data.unit.dig}`;
              } else {
                data.id = window.sgworld.Core.getuid();
                this.measureData.set(data.id, volumetricMeasurementTool);
@@ -1069,9 +1083,8 @@
          });
          break;
        case "体积方量":
          info = `填方:${
            data.volume.fill.toFixed(4) + data.unit.fill
          }<br>挖方:${data.volume.dig.toFixed(4) + data.unit.dig}`;
          info = `填方:${data.volume.fill.toFixed(4) + data.unit.fill
            }<br>挖方:${data.volume.dig.toFixed(4) + data.unit.dig}`;
          break;
      }
      return (
@@ -1104,11 +1117,11 @@
    setIquery(res) {
      switch (res) {
        case "e2":
          this.$store.state.mapMenuBoolean = true;
          this.$store.state.mapMenuBoolean = !this.$store.state.mapMenuBoolean;
          this.$store.state.mapMenuBoxFlag = "1";
          break;
        case "e1":
          this.$store.state.mapMenuBoolean = true;
          this.$store.state.mapMenuBoolean = !this.$store.state.mapMenuBoolean;
          this.$store.state.mapMenuBoxFlag = "2";
          break;
      }
@@ -1156,23 +1169,27 @@
          PDelevationTool.render();
          break;
        case "d3": //路径分析
          this.isRouter = !this.isRouter;
          let value;
          if (this.isRouter) {
            value = {
              name: "Analysis",
              id: 3,
              show: true
            };
          } else {
            value = {
              name: "close",
              name: "Analysis",
              id: 3,
              show: false
            };
          }
          this.$bus.$emit("mapChangeBox", value);
          break;
        case "d4": //剖面分析
          if (window.AnalysisDXPM) {
            window.AnalysisDXPM.end && window.AnalysisDXPM.end();
            window.AnalysisDXPM.end && window.AnalysisDXPM.end("cancel");
            this.clear(res);
          } else {
            this.addterrainSectionAnalysis();
@@ -1205,9 +1222,8 @@
              "auto",
              (data) => {
                if (TFvolumetricMeasurementTool.popupData) {
                  TFvolumetricMeasurementTool.popupData.value = `填方:${
                    data.volume.fill.toFixed(4) + data.unit.fill
                  }<br>挖方:${data.volume.dig.toFixed(4) + data.unit.dig}`;
                  TFvolumetricMeasurementTool.popupData.value = `填方:${data.volume.fill.toFixed(4) + data.unit.fill
                    }<br>挖方:${data.volume.dig.toFixed(4) + data.unit.dig}`;
                } else {
                  data.id = sgworld.Core.getuid();
                  this.measureData.set(data.id, TFvolumetricMeasurementTool);
@@ -1226,7 +1242,7 @@
          var that = this;
          window.model = sgworld.Creator.create3DTilesets(
            "",
            modelUrl,
            modelUrl + '/tileset/m/SN/tileset.json',
            {},
            {},
            "0",
@@ -1248,8 +1264,7 @@
                close: () => {
                  if (this.$store.state.pipelineEntity.length != 0) {
                    for (var i in this.$store.state.pipelineEntity) {
                      var item = this.$store.state.pipelineEntity[i];
                      sgworld.Viewer.entities.remove(item);
                      sgworld.Viewer.entities.remove(this.$store.state.pipelineEntity[i]);
                    }
                  }
                },
@@ -1314,7 +1329,7 @@
            window.Excavation = sgworld.Analysis.TerrainExcavation(
              10,
              {},
              function () {}
              function () { }
            );
          }
          break;
@@ -1417,7 +1432,7 @@
        2,
        2,
        method,
        (value) => {}
        (value) => { }
      );
    },
    addterrainSectionAnalysis() {
@@ -1454,9 +1469,17 @@
      );
    },
    setWander(res) {
      ;
      switch (res) {
        case "c1":
          window.sgworld.Analysis.setPointFly();
          if (window.PointMY != null) {
            window.PointMY.drawHandler && window.PointMY.drawHandler.destroy();
            window.PointMY.end && window.PointMY.end();
            window.PointMY = null;
          } else {
            window.PointMY = window.sgworld.Analysis.setPointFly();
          }
          break;
        case "c2":
          var url = window.location.href;
@@ -1586,6 +1609,147 @@
    menuChange(res) {
      this.setListTwoMenu = this.setListTwoMenuAll[res];
    },
    async layersStart() {
      const data = await perms_selectLayers();
      if (data.code != 200) {
        return this.$message.error("图层列表查询失败");
      }
      var std = data.result;
      var that = this;
      var checkKey = [];
      var val = std.filter((str) => {
        if (str.type == 1) {
          return str;
        }
        if (str.url != null && str.type == 2) {
          if (str.isShow == 1) {
            checkKey.push(str.id);
            that.setAddLayers(str);
          }
          return str;
        }
      });
      var res = this.setTreeData(val);
      for (var i in res) {
        res[i].children = res[i].children.filter((val) => {
          if (val.children != null) {
            return val;
          }
        });
      }
      this.$store.state.treeData = res;
      // this.$refs.tree.setCheckedKeys(checkKey);
      this.$store.state.checkedKeys = checkKey
    },
    setTreeData(source) {
      let cloneData = JSON.parse(JSON.stringify(source)); // 对源数据深度克隆
      return cloneData.filter((father) => {
        // 循环所有项
        let branchArr = cloneData.filter((child) => father.id == child.pid); // 对比ID,分别上下级菜单,并返回数据
        branchArr.length > 0 ? (father.children = branchArr) : ""; // 给父级添加一个children属性,并赋值
        // 属于同一对象问题,例如:令 a=b、c=1 ,然后再令 b.c=c , 那么 a.c=b.c=c=1 ;同理,后续令 c.d=2 ,那么 a.c.d 也是=2;
        // 由此循环多次后,就能形成相应的树形数据结构
        return father.pid == 0; // 返回一级菜单
      });
    },
    setAddLayers(res) {
      if (res.serveType == "WMS") {
        var resource = geoServerURl;
        if (res.resource != null && res.resource != undefined) {
          resource = res.resource;
        }
        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;
          Viewer.flyTo(tileset);
        });
      }
    },
  },
  mounted() {
    this.measureData = new Map();
@@ -1594,6 +1758,7 @@
      polyline: Cesium.Color.fromCssColorString("#ffff00").withAlpha(0.6),
      polygon: Cesium.Color.fromCssColorString("#ffff00").withAlpha(0.6),
    };
    this.$bus.$on("setChangeTwoMenu", (res) => {
      if (res == 8) {
        this.setLayerScene();
@@ -1606,7 +1771,9 @@
    this.$store.state.layerMnage = false;
    this.$store.state.treeData = null;
    this.$store.state.checkedKeys = [];
    this.setCoverage("a1");
    // this.setCoverage("a1");
    this.layersStart()
  },
};
</script>
@@ -1628,7 +1795,7 @@
    font-family: Microsoft YaHei;
    font-weight: 400;
    border: 1px solid rgba(0, 0, 0, 0);
    padding: 10px;
    padding: 5px;
    min-width: 100px;
    margin-left: 10px;
    margin-top: 10px;
@@ -1649,8 +1816,8 @@
  }
  .menuTwoImage {
    width: 40px;
    height: 40px;
    width: 30px;
    height: 30px;
    display: inline-block;
  }
}