管道基础大数据平台系统开发-【前端】-新系統界面
src/views/Tools/LayerTree.vue
@@ -16,11 +16,11 @@
      @node-contextmenu="rightClick"
      @check-change="handleCheckChange"
      :default-checked-keys="handleTreeCheck"
      :expand-on-click-node="false"
    >
      <span
        class="slot-t-node"
        slot-scope="{ node, data }"
        @dblclick="editNode(data)"
      >
        <span v-show="!data.isEdit">
          <span :class="[data.id >= 99 ? 'slot-t-node--label' : '']">{{
@@ -47,20 +47,51 @@
      :style="{ ...rightClickMenuStyle }"
      v-show="menuVisible"
    >
      <div @click="addSameLevelNode()" v-show="firstLevel">
      <div
        @click="addSameLevelNode()"
        v-show="firstLevel"
      >
        <i class="el-icon-plus"></i>&nbsp;&nbsp;添加图层组
      </div>
      <div class="add" @click="addChildNode()">
      <div
        class="add"
        @click="addChildNode()"
      >
        <i class="el-icon-plus"></i>&nbsp;&nbsp;添加图层
      </div>
      <div class="delete" @click="deleteNode()">
      <div
        class="delete"
        @click="deleteNode()"
      >
        <i class="el-icon-delete"></i>&nbsp;&nbsp;删除
      </div>
      <div class="edit" @click="editNode()">
      <div
        class="edit"
        @click="editNode()"
      >
        <i class="el-icon-edit"></i>&nbsp;&nbsp;重命名
      </div>
      <div class="edit" @click="showLayerAttribute()" v-show="!firstLevel">
      <div
        class="edit"
        @click="showLayerAttribute()"
        v-if="!showlocal"
        v-show="!firstLevel"
      >
        <i class="el-icon-tickets"></i>&nbsp;&nbsp;属性
      </div>
      <div
        class="edit"
        @click="positioning()"
        v-show="showlocal"
      >
        <i class="el-icon-tickets"></i>&nbsp;&nbsp;定位
      </div>
      <div
        class="edit"
        @click="histogram()"
        v-show="shwoHistogram"
      >
        <i class="el-icon-tickets"></i>&nbsp;&nbsp;钻孔柱状图
      </div>
      <!-- <div
        class="edit"
@@ -83,7 +114,11 @@
      :modal="false"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="addFormServer" label-width="100px">
      <el-form
        ref="form"
        :model="addFormServer"
        label-width="100px"
      >
        <el-form-item label="服务类型">
          <!-- <el-input v-model="addFormServer.type"></el-input> -->
          <el-select
@@ -115,8 +150,14 @@
          <el-slider v-model="addFormServer.opacity"></el-slider>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="setAddServer">确 定</el-button>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="setAddServer"
        >确 定</el-button>
      </span>
    </el-dialog>
    <queryinfo ref="queryinfo" />
@@ -135,12 +176,14 @@
import View from "ol/View.js";
import { Fill, Stroke, Style } from "ol/style.js";
import { perms_selectLayers } from "../../api/api.js";
import { perms_selectLayers, inquiry_selectDomains } from "../../api/api.js";
export default {
  name: "tree",
  components: { queryinfo },
  data() {
    return {
      shwoHistogram: false,
      showlocal: false,
      eleId: "",
      isShow: false,
      currentData: "",
@@ -182,6 +225,28 @@
    };
  },
  methods: {
    //转孔柱状图
    async histogram() {
      this.menuVisible = false
      var layer = this.currentData.enName.replaceAll("_", "");
      this.$store.state.mapSpaceQueryLayer = layer;
      this.$store.state.mapPopBoxFlag = "2";
      this.$refs && this.$refs.queryinfo && this.$refs.queryinfo.close();
      this.$refs &&
        this.$refs.queryinfo &&
        this.$refs.queryinfo.open("属性", null, {
          close: () => {
            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();
            }
          },
        });
    },
    NodeBlur(Node, data) {
      if (data.label.length === 0) {
        this.$message.error("菜单名不可为空!");
@@ -215,10 +280,20 @@
    rightClick(event, object, Node, element) {
      this.currentData = object;
      this.currentNode = Node;
      if (this.currentData.enName == "s_explorationpoint") {
        this.shwoHistogram = true;
      } else {
        this.shwoHistogram = false;
      }
      if (Node.level === 3) {
        this.firstLevel = false;
      } else {
        this.firstLevel = true;
      }
      if (Node.level === 3 && Node.data.serveType == "Tileset") {
        this.showlocal = true;
      } else if (Node.level === 3 && Node.data.serveType != "Tileset") {
        this.showlocal = false;
      }
      this.menuVisible = true;
@@ -246,6 +321,7 @@
    },
    // 增加同级节点事件
    addSameLevelNode() {
      this.menuVisible = false
      this.foo();
      if (this.currentNode.level == 2) {
        this.appendNodetitle = this.currentData.label;
@@ -259,6 +335,7 @@
    // 增加子级节点事件
    addChildNode() {
      this.foo();
      this.menuVisible = false
      // if (this.currentNode.level >= 2) {
      //   this.$message.error("最多只支两级!");
      //   return false;
@@ -287,6 +364,7 @@
    // 删除节点
    deleteNode() {
      this.foo();
      this.menuVisible = false
      var label = this.currentNode.data.cnName;
      if (this.currentNode.data.serveType == "WMS") {
        for (var i in window.Viewer.imageryLayers._layers) {
@@ -330,10 +408,11 @@
    //属性显示
    showLayerAttribute(data) {
      this.foo();
      this.menuVisible = false
      this.currentData = data ? data : this.currentData;
      var layer = this.currentData.layer.replaceAll("_", "");
      var layer = this.currentData.enName.replaceAll("_", "");
      this.$store.state.mapSpaceQueryLayer = layer;
      // this.$store.state.mapPopBoolean = true;
      this.$store.state.mapPopBoxFlag = "2";
      this.$refs && this.$refs.queryinfo && this.$refs.queryinfo.close();
      this.$refs &&
@@ -351,9 +430,21 @@
          },
        });
    },
    //模型定位
    positioning() {
      this.menuVisible = false
      for (var i in Viewer.scene.primitives._primitives) {
        if (
          Viewer.scene.primitives._primitives[i].id == this.currentData.cnName
        ) {
          Viewer.flyTo(Viewer.scene.primitives._primitives[i]);
        }
      }
    },
    // 编辑节点
    editNode(data) {
      this.foo();
      this.menuVisible = false
      this.currentData = data ? data : this.currentData;
      if (!this.currentData.isEdit) {
        this.$set(this.currentData, "isEdit", true);
@@ -480,9 +571,7 @@
    },
    setAddLayers(res) {
      if (res.serveType == "WMS") {
        // var resource = geoServerURl;
        var resource = "http://192.168.20.205:8088/geoserver/LF/wms";
        var resource = geoServerURl;
        if (res.resource != null && res.resource != undefined) {
          resource = res.resource;
        }
@@ -558,6 +647,7 @@
        });
        window.map.addLayer(vectorLayer);
      } else if (res.serveType == "Tileset") {
        var tileset = Viewer.scene.primitives.add(
          new Cesium.Cesium3DTileset({
            name: res.cnName,
@@ -569,11 +659,31 @@
          })
        );
        tileset.readyPromise.then(function (tileset) {
        tileset.readyPromise.then((tileset0) => {
          tileset.id = res.cnName;
          this.tileSet(tileset, parseFloat(res.elev))
          Viewer.flyTo(tileset);
        });
      }
    },
    tileSet(tileset, height) {
      //3dtile模型的边界球体
      var boundingSphere = tileset.boundingSphere;
      //迪卡尔空间直角坐标=>地理坐标(弧度制)
      var cartographic_original = Cesium.Cartographic.fromCartesian(boundingSphere.center);
      //地理坐标(弧度制)=>迪卡尔空间直角坐标
      var Cartesian3_original = Cesium.Cartesian3.fromRadians(cartographic_original.longitude, cartographic_original.latitude, cartographic_original.height);
      var Cartesian3_offset = Cesium.Cartesian3.fromRadians(cartographic_original.longitude, cartographic_original.latitude, height);
      //获得地面和offset的转换
      var translation = Cesium.Cartesian3.subtract(Cartesian3_offset, Cartesian3_original, new Cesium.Cartesian3());
      //修改模型矩阵
      tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
    },
    setTreeData(source) {
      let cloneData = JSON.parse(JSON.stringify(source)); // 对源数据深度克隆
@@ -685,6 +795,7 @@
    },
  },
  mounted() {
    this.$bus.$on("treeDataCopy", (res) => {
      this.$store.state.treeData = this.treeData;
      this.$store.state.checkedKeys = this.$refs.tree.getCheckedKeys();
@@ -828,6 +939,16 @@
  z-index: 8;
}
.tree-container /deep/ .el-tree-node {
  .is-leaf + .el-checkbox .el-checkbox__inner {
    display: inline-block;
  }
  .el-checkbox .el-checkbox__inner {
    display: none;
  }
}
.tree-container
  /deep/
  .el-tree-node