管道基础大数据平台系统开发-【前端】-新系統界面
Surpriseplus
2023-02-26 5b3b9895f857d217ef42f96b7ad1aa68103236c4
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,16 +1169,20 @@
          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);
@@ -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);
@@ -1314,7 +1330,7 @@
            window.Excavation = sgworld.Analysis.TerrainExcavation(
              10,
              {},
              function () {}
              function () { }
            );
          }
          break;
@@ -1417,7 +1433,7 @@
        2,
        2,
        method,
        (value) => {}
        (value) => { }
      );
    },
    addterrainSectionAnalysis() {
@@ -1454,9 +1470,17 @@
      );
    },
    setWander(res) {
      debugger;
      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 +1610,136 @@
    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
    },
    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") {
        debugger
        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 +1748,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 +1761,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 +1785,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 +1806,8 @@
  }
  .menuTwoImage {
    width: 40px;
    height: 40px;
    width: 30px;
    height: 30px;
    display: inline-block;
  }
}