管道基础大数据平台系统开发-【前端】-新系統界面
Surpriseplus
2023-05-16 dae8fb08b9ff7327da86ed249c9c97a87c90e6f2
src/views/Tools/LayerTree.vue
@@ -1,11 +1,35 @@
<template>
  <div class="lalala tree-container">
    <el-input
      placeholder="输入关键字进行过滤"
      v-model="filterText"
      class="search"
    >
    </el-input>
    <el-form ref="form">
      <el-form-item>
        <el-select
          v-model="$store.state.pigCode"
          clearable
          filterable
          style="width :100%"
          @change="setproChange"
          placeholder="请选择项目"
        >
          <el-option
            v-for="item in optionts"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input
          placeholder="输入关键字进行过滤"
          v-model="filterText"
          class="search"
        >
        </el-input>
      </el-form-item>
    </el-form>
    <el-tree
      ref="tree"
      :data="treeData"
@@ -49,30 +73,30 @@
      :style="{ ...rightClickMenuStyle }"
      v-show="menuVisible"
    >
      <div
      <!-- <div
        @click="addSameLevelNode()"
        v-show="firstLevel"
      >
        <i class="el-icon-plus"></i>&nbsp;&nbsp;添加图层组
      </div>
      <div
      </div> -->
      <!-- <div
        class="add"
        @click="addChildNode()"
      >
        <i class="el-icon-plus"></i>&nbsp;&nbsp;添加图层
      </div>
      <div
      </div> -->
      <!-- <div
        class="delete"
        @click="deleteNode()"
      >
        <i class="el-icon-delete"></i>&nbsp;&nbsp;删除
      </div>
      <div
      </div> -->
      <!-- <div
        class="edit"
        @click="editNode()"
      >
        <i class="el-icon-edit"></i>&nbsp;&nbsp;重命名
      </div>
      </div> -->
      <div
        class="edit"
        @click="showLayerAttribute()"
@@ -192,7 +216,10 @@
import View from "ol/View.js";
import { Fill, Stroke, Style } from "ol/style.js";
import { perms_selectLayers, inquiry_selectDomains, comprehensive_selectPubById } from "../../api/api.js";
import {
  perms_selectLayers, inquiry_selectDomains, comprehensive_selectPubById,
  project_selectDirAll, project_selectByDirid, dataQuerySelectWktById
} from "../../api/api.js";
export default {
  name: "tree",
  components: { queryinfo },
@@ -241,6 +268,8 @@
      ],
      childOption: [],
      mptLayer: [],
      optionts: [],
      proValue: null,
    };
  },
  methods: {
@@ -287,11 +316,14 @@
    },
    // 鼠标右击事件
    rightClick(event, object, Node, element) {
      if (object.type == 1) {
        return
      }
      this.currentData = object;
      this.currentNode = Node;
      this.$store.state.propertiesName = this.currentData;
      if (this.currentData.serveType == "Tileset") {
      if (this.currentData.serveType == "Tileset" || this.currentData.serveType == "3DML") {
        this.showModelAttach = true;
      } else {
        this.showModelAttach = false;
@@ -301,14 +333,15 @@
      } else {
        this.shwoHistogram = false;
      }
      if (Node.level === 3) {
      if (Node.data.children == null) {
        this.firstLevel = false;
      } else {
        this.firstLevel = true;
      }
      if (Node.level === 3 && Node.data.serveType == "Tileset") {
      if (Node.data.children == null && Node.data.serveType == "Tileset" || Node.data.serveType == "3DML") {
        this.showlocal = true;
      } else if (Node.level === 3 && Node.data.serveType != "Tileset") {
      } else if (Node.data.children == null && Node.data.serveType != "Tileset" || Node.data.serveType == "3DML") {
        this.showlocal = false;
      }
      this.menuVisible = true;
@@ -549,6 +582,9 @@
            case 'WFS':
              listWFS.push(this.childOption[i])
              break;
            case '3DML':
              listTileset.push(this.childOption[i])
              break;
            case 'Tileset':
              listTileset.push(this.childOption[i])
              break;
@@ -558,7 +594,6 @@
            case 'TMS':
              listTMS.push(this.childOption[i])
              break;
          }
        }
        this.setChangeWMS(listWMS, checked);
@@ -569,7 +604,7 @@
      } else if (data.type == 2) {
        if (data.serveType == "WMS") {
          this.setChangeWMS([data], checked);
        } else if (data.serveType == "Tileset") {
        } else if (data.serveType == "Tileset" || data.serveType == "3DML") {
          this.setChangeTileset([data], checked);
        } else if (data.serveType == "TMS") {
          this.setChangeTMS([data], checked);
@@ -704,7 +739,7 @@
      // if (checked.checkedKeys) {
      //   for (var i in result) {
      //
      //
      //   }
      // } else {
@@ -773,7 +808,7 @@
      }
    },
    setAddLayers(res) {
    async setAddLayers(res) {
      if (res.serveType == "WMS") {
        var resource = geoServerURl;
@@ -851,7 +886,7 @@
          }),
        });
        window.map.addLayer(vectorLayer);
      } else if (res.serveType == "Tileset") {
      } else if (res.serveType == "Tileset" || res.serveType == "3DML") {
        var url;
        if (res.url.indexOf("{host}") != -1) {
          url = res.url.replace("{host}", iisHost);
@@ -871,13 +906,35 @@
        );
        tileset.readyPromise.then((tileset) => {
          tileset.id = res.cnName;
          tileset.layerId = res.id;
          tileset.pubid = res.pubid;
          this.getTilesetArgs(tileset, res);
          if (res.serveType != '3DML') {
            // Cesium.Matrix4.equals(a,b)判断两个四维矩阵是否相等
            // 整个根节点模型矩阵,该tileSet=>世界坐标系
            // 单位矩阵,对角线值为1.0的4*4矩阵
            if (!Cesium.Matrix4.equals(tileset.root.transform, Cesium.Matrix4.IDENTITY)) {
              // 获取模型的世界坐标(笛卡尔)
              // Cesium.Matrix4.getTranslation 通过仿射变换矩阵获取该tileSet的世界坐标
              const transformCenter = Cesium.Matrix4.getTranslation(
                tileset.root.transform,
                new Cesium.Cartesian3()
              );
              // 将笛卡尔坐标转换为WGS84经纬度坐标(模型的)
              const transformCartographic = Cesium.Cartographic.fromCartesian(
                transformCenter
              );
              // 将笛卡尔坐标转换为WGS84经纬度坐标(截面的)
              const boundingSphereCartographic = Cesium.Cartographic.fromCartesian(
                tileset.boundingSphere.center
              );
              const height = boundingSphereCartographic.height - transformCartographic.height;
              // 从一个Cartesian3对象生成Matrix4变换矩阵(裁切面的)
              window.modelHeight = height;
            } else window.modelHeight = 0;
            this.getTilesetArgs(tileset, res);
          }
        });
        this.$store.state.setAlphaList.push({
          name: res.cnName,
@@ -893,10 +950,11 @@
        if (res.pubid) {
          this.setQueryPubid(res);
        } else {
          var layer = Viewer.imageryLayers.addImageryProvider(
            new Cesium.UrlTemplateImageryProvider({
              url: url,
              maximumLevel: 18,
              maximumLevel: 22,
            })
          );
          layer.name = res.cnName;
@@ -927,7 +985,12 @@
        if (data.code != 200) {
        } else {
          this.reload(tileset, data.result.json)
          if (res.serveType != '3DML') {
            this.reload(tileset, data.result.json)
          } else {
            this.tileSet(tileset, parseFloat(res.elev))
          }
        }
      } else {
        this.tileSet(tileset, parseFloat(res.elev))
@@ -944,15 +1007,31 @@
      } else {
        var url = data.result.url;
        if (res.url.indexOf("{host}") != -1) {
          url = res.url.replace("{host}", iisHost);
        }
        var layer = Viewer.imageryLayers.addImageryProvider(
          new Cesium.UrlTemplateImageryProvider({
            url: url,
            maximumLevel: 18,
          })
        );
        var min = data.result.min;
        var max = data.result.max;
        var layer;
        if (max > 0) {
          layer = Viewer.imageryLayers.addImageryProvider(
            new Cesium.UrlTemplateImageryProvider({
              url: url,
              minimumLevel: min,
              maximumLevel: max,
            })
          );
        } else {
          layer = Viewer.imageryLayers.addImageryProvider(
            new Cesium.UrlTemplateImageryProvider({
              url: url,
              minimumLevel: min,
            })
          );
        }
        layer.name = res.cnName;
        if (data.result.geom) {
@@ -971,7 +1050,7 @@
      var hpr = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(vm.yaw), 0, 0);
      var matrix = Cesium.Transforms.headingPitchRollToFixedFrame(pos, hpr, Cesium.Ellipsoid.WGS84, converter);
      tileset._root.transform = matrix;
      Viewer.flyTo(tileset);
      // Viewer.flyTo(tileset);
    },
    tileSet(tileset, height) {
      //3dtile模型的边界球体
@@ -985,7 +1064,7 @@
      var translation = Cesium.Cartesian3.subtract(Cartesian3_offset, Cartesian3_original, new Cesium.Cartesian3());
      //修改模型矩阵
      tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
      Viewer.flyTo(tileset);
      // Viewer.flyTo(tileset);
    },
    setTreeData(source) {
      let cloneData = JSON.parse(JSON.stringify(source)); // 对源数据深度克隆
@@ -1102,6 +1181,59 @@
      if (!value) return true;
      return data.cnName.indexOf(value) !== -1;
    },
    async setproChange(res) {
      this.$store.state.pigCode = res;
      if (res) {
        var obj = {
          dirid: res,
          pageIndex: 1,
          pageSize: 10,
        }
        const data = await project_selectByDirid(obj);
        if (data.code != 200) {
          this.$message.error("列表获取失败");
          return;
        }
        if (data.result[0]) {
          var geom = data.result[0].geom
          var wkt = this.$wkt.parse(geom)
          Viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(wkt.coordinates[0].toFixed(6), wkt.coordinates[1].toFixed(6), 5000),
          });
        }
        this.setChangeProLayer();
      } else {
        this.$store.state.pigCode = null
        this.setChangeWMS();
      }
    },
    setChangeProLayer() {
      var value = this.$store.state.isProjectLayer;
      if (value.length != 0) {
        var std = [];
        for (var i in value) {
          std.push(value[i].id)
        }
        this.$refs.tree.setCheckedKeys(std);
        this.$bus.$emit("showMenuLayer", value);
      }
    },
    async getMenuProject() {
      const data = await project_selectDirAll();
      if (data.code != 200) {
        return
      }
      this.optionts = data.result;
    },
  },
  watch: {
    filterText(val) {
@@ -1109,7 +1241,7 @@
    },
  },
  mounted() {
    this.getMenuProject()
    this.$bus.$on("treeDataCopy", (res) => {
      this.$store.state.treeData = this.treeData;
      this.$store.state.checkedKeys = this.$refs.tree.getCheckedKeys();
@@ -1290,7 +1422,12 @@
    }
  }
}
/deep/ .el-form .el-form-item {
  padding-right: 0px !important;
}
/deep/ .el-form-item {
  margin-bottom: 10px !important;
}
/*.lalala {*/
/*position: relative;*/
/*}*/