图层管理页面添加，发布管理修改

Surpriseplus

2023-04-19 3d8de57d1577ada7c263320d0c91503076994b86

 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()"
@@ -87,6 +111,13 @@
        v-if="showlocal"
      >
        <i class="el-icon-tickets"></i>&nbsp;&nbsp;定位
      </div>
      <div
        class="edit"
        @click="pellucidity()"
        v-if="showlocal"
      >
        <i class="el-icon-tickets"></i>&nbsp;&nbsp;透明度
      </div>
      <div
        class="edit"
@@ -185,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 },
@@ -234,6 +268,8 @@
      ],
      childOption: [],
      mptLayer: [],
      optionts: [],
      proValue: null,
    };
  },
  methods: {
@@ -280,6 +316,9 @@
    },
    // 鼠标右击事件
    rightClick(event, object, Node, element) {
      if (object.type == 1) {
        return
      }
      this.currentData = object;
      this.currentNode = Node;

@@ -294,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") {
        this.showlocal = true;
      } else if (Node.level === 3 && Node.data.serveType != "Tileset") {
      } else if (Node.data.children == null && Node.data.serveType != "Tileset") {
        this.showlocal = false;
      }
      this.menuVisible = true;
@@ -397,6 +437,13 @@
            );
          }
        }
        var list = this.$store.state.setAlphaList;
        for (var i = 0; i < list.length; i++) {
          if (list[i].name == label) {
            list.splice(i, 1)
          }
        }

      }
      var layers_ol = window.map.getAllLayers();
      for (var i in layers_ol) {
@@ -420,6 +467,22 @@


    },
    //模型设置透明度
    pellucidity() {
      this.foo();
      this.menuVisible = false
      var tile = this.currentData
      for (var j in Viewer.scene.primitives._primitives) {
        if (Viewer.scene.primitives._primitives[j].id == tile.cnName) {
          this.$store.state.setAlphaDity = this.currentData;
          this.$bus.$emit("showPellucidity", true);
          break;
        }
      }
    },



    //模型定位
    positioning() {
      this.menuVisible = false
@@ -661,6 +724,12 @@
              Viewer.scene.primitives.remove(Viewer.scene.primitives._primitives[j])
            }
          }
          var list = this.$store.state.setAlphaList;
          for (var i = 0; i < list.length; i++) {
            if (list[i].name == tile.cnName) {
              list.splice(i, 1)
            }
          }
        }
      }

@@ -668,7 +737,7 @@

      // if (checked.checkedKeys) {
      //   for (var i in result) {
      //     
      //
      //   }
      // } else {

@@ -737,7 +806,7 @@
      }
    },

    setAddLayers(res) {
    async setAddLayers(res) {

      if (res.serveType == "WMS") {
        var resource = geoServerURl;
@@ -835,13 +904,38 @@
        );

        tileset.readyPromise.then((tileset) => {

          tileset.id = res.cnName;
          tileset.layerId = res.id;
          tileset.pubid = res.pubid;
          // 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,
          alpha: 1
        })
        window.model = tileset
      } else if (res.serveType == "TMS") {
        var url = res.url;
@@ -852,10 +946,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;
@@ -873,7 +968,6 @@
          url: url[0],
          layers: url[1]
        }, "0", undefined, true, "");

        this.mptLayer.push(layer)
        setTimeout(() => {
          this.setChangeWMS();
@@ -904,15 +998,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) {
@@ -1062,6 +1172,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) {
@@ -1069,7 +1232,7 @@
    },
  },
  mounted() {

    this.getMenuProject()
    this.$bus.$on("treeDataCopy", (res) => {
      this.$store.state.treeData = this.treeData;
      this.$store.state.checkedKeys = this.$refs.tree.getCheckedKeys();
@@ -1250,7 +1413,12 @@
    }
  }
}

/deep/ .el-form .el-form-item {
  padding-right: 0px !important;
}
/deep/ .el-form-item {
  margin-bottom: 10px !important;
}
/*.lalala {*/
/*position: relative;*/
/*}*/