代码更新

surprise

2024-04-01 2cbbc0e4c0357260f370c47365810608c19131c9

 src/components/Screen/ProjectTree.vue

@@ -1,27 +1,15 @@
<template>
  <div class="project_tree" :class="{ left_main_show: !leftMenuOpen }">
    <div class="project_tree__title">工程项目</div>
    <el-input style="width: 80%" placeholder="输入关键字进行查询" suffix-icon="el-icon-search" v-model="filterText" size="mini"
      :filter-node-method="filterNode">
    </el-input>
    <div class="tree-container">
      <el-tree
        :data="treeData"
        show-checkbox
        node-key="id"
        default-expand-all
        :props="defaultProps"
        ref="tree"
        class="el-tree"
        @check-change="handleCheckChange"
      >
        <div
          style="display: flex"
          class="custom-tree-node"
          slot-scope="{ node, data }"
        >
      <el-tree :data="treeData" show-checkbox node-key="id" :props="defaultProps" ref="tree" class="el-tree"
        @check="handleCheckChange" :filter-node-method="filterNode" @node-click="handleLeftclick">
        <div style="display: flex" class="custom-tree-node" slot-scope="{ node, data }">
          <div style="">
            <i
              v-if="data.children && data.children.length > 0"
              style="color: yellow"
              class="el-icon-folder-opened"
            ></i>
            <i v-if="data.children && data.children.length > 0" style="color: yellow" class="el-icon-folder-opened"></i>
            <i v-else style="color: skyblue" class="el-icon-folder-opened"></i>
          </div>
          <!-- <div style="">
@@ -32,35 +20,30 @@
            ></i>
            <i v-else style="color: skyblue" class="el-icon-folder-opened"></i>
          </div> -->
          <div
            :style="
              data.children && data.children.length > 0
                ? 'padding-left: 20px'
                : 'padding-left: 20px'
            "
            class="tree-label"
            :title="node.label || '-'"
          >
          <div :style="data.children && data.children.length > 0
    ? 'padding-left: 20px'
    : 'padding-left: 20px'
    " class="tree-label" :title="node.label || '-'">
            {{ node.label }}
          </div>
        </div>
      </el-tree>
    </div>
    <div class="changeBaseLayer">
    <!-- <div class="changeBaseLayer">
      <div @click="changeMenulayer" class="CenDiv">
        <div
          id="cenBg"
          v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
        ></div>
      </div>
    </div>
    </div> -->
  </div>
</template>

<script>
import { right_menu, right_list, image_layer } from "@/assets/js/index.js"

import { perms_selectLayers } from "@/api/api.js"
import { perms_selectLayers, comprehensive_selectPubById } from "@/api/api.js"

export default {
  data() {
@@ -68,7 +51,7 @@
      treeData: [],
      defaultProps: {
        children: "children",
        label: "label",
        label: "cnName",
      },
      typeIndex: null,
      leftMenuOpen: false,
@@ -82,6 +65,8 @@
      isActive: false,
      isMenuLayer: true,
      openEcharts: false,
      filterText: "",
      mptLayer: [],
    }
  },

@@ -90,81 +75,438 @@
    this.rightMenu = right_menu
    this.changeSelectli = this.rightList[0].id
    this.changeSelectStyle = this.rightMenu[0].id
    this.addImageLayer()

    this.$bus.$on("changeProjectLayer", (res) => {
      this.setShowCheckedLayer();
    })
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    },
    obj(newVal, oldVal) {
      if (newVal) {
        this.addImageLayer()
      }
    }
  },
  computed: {
    obj() {
      return this.$store.state.showThematicFlag
    }
  },
  methods: {
    // 查询
    filterNode(value, data) {

      if (!value) return true;
      return data.cnName.indexOf(value) !== -1;
    },
    setShowCheckedLayer() {
      var value = this.$refs.tree.getCheckedNodes();
      var std = [];
      for (var i in value) {
        std.push(value[i].id)
      }
      if (std.indexOf(3) == -1) {
        std.push(3);
        this.$refs.tree.setCheckedKeys(std)
      }
      this.getWMSLayer();

    },
    async addImageLayer() {
      const data = await perms_selectLayers()
      if (data.code != 200) {
        return this.$message.error("图层列表查询失败")
      }
      var std = []
      var layer_list = []
      var layer_groups = []
      for (var i in data.result) {
        if (data.result[i].type == 1) {
          layer_groups.push({
            id: data.result[i].id,
            label: data.result[i].cnName,
            type: data.result[i].type,
            isEdit: false,
            children: [],
          })
        } else if (data.result[i].type == 2) {
          if (data.result[i].url != null) {
            var layer_entity = {
              id: data.result[i].id,
              pid: data.result[i].pid,
              label: data.result[i].cnName,
              resource: data.result[i].url,
              type: data.result[i].type,
              isEdit: false,
            }
            layer_list.push(layer_entity)
            if (data.result[i].isShow == 1) {
              std.push(data.result[i].id)
              this.setAddImageLayer(layer_entity)
            }
          }
        }
      }
      for (var i in layer_list) {
        for (var j in layer_groups) {
          if (layer_list[i].pid === layer_groups[j].id) {
            layer_groups[j].children.push(layer_list[i])
          }
        }
      }
      this.treeData = layer_groups
      var std = data.result;
      var that = this;
      var checkKey = [];

      this.$refs.tree.setCheckedKeys(std)
      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);
          }
          return str;
        }
      });
      var value = std.filter((str) => {
        if (str.url != null && str.type == 2 && str.isShow == 1) {
          return str;
        }
      })
      this.$refs.tree.setCheckedKeys(checkKey)
      var res = this.setTreeData(val);
      this.treeData = res
      this.setShowImageLayer(value)
    },
    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; // 返回一级菜单
      });
    },
    handleCheckChange(data, checked, indeterminate) {
      if (data.children != null) return
      var std = []
      for (var i = 0; i < Viewer.imageryLayers._layers.length; i++) {
        var val_id = Viewer.imageryLayers._layers[i].imageryProvider.name
        if (val_id == data.label) {
          std.push(data.label)
          const img_layer = Viewer.imageryLayers._layers[i]
          img_layer.show = checked



      // var wmsLayer = [];
      // var tilesetLayer = [];
      // var tmsLayer = [];
      // var mptLayer = [];
      // for (var i in data) {
      //   if (data[i].type == 2) {
      //     switch (data[i].serveType) {
      //       case "WMS":
      //         wmsLayer.push(data[i])
      //         break;
      //       case "Tileset":
      //         tilesetLayer.push(data[i])
      //         break;
      //       case "TMS":
      //         tmsLayer.push(data[i])
      //         break;
      //       case "Mpt":
      //         mptLayer.push(data[i])
      //         break;
      //     }
      //   }
      // }


      if (data.type == 1) {
        this.childOption = [];
        this.getchilds(data);
        var listWMS = [];
        var listWFS = [];
        var listTileset = [];
        var listTMS = [];
        var listMpt = [];
        for (var i in this.childOption) {
          switch (this.childOption[i].serveType) {
            case 'WMS':
              listWMS.push(this.childOption[i])
              break;
            case 'Tileset':
              listTileset.push(this.childOption[i])
              break;
            case 'Mpt':
              listMpt.push(this.childOption[i])
              break;
            case 'TMS':
              listTMS.push(this.childOption[i])
              break;

          }
        }
        this.getWMSLayer();
        this.setShowTilesetLayer(listTileset);
        this.setShowMptLayer(listMpt);
        this.setShowTMSLayer(listTMS);
      } else if (data.type == 2) {
        if (data.serveType == "WMS") {
          this.getWMSLayer();
        } else if (data.serveType == "Tileset") {
          this.setShowTilesetLayer([data]);
        } else if (data.serveType == "Mpt") {
          this.setShowMptLayer([data]);
        } else if (data.serveType == "TMS") {
          this.setShowTMSLayer([data]);
        }
      }
      if (std.length == 0 && checked == true) {
        this.setAddImageLayer(data)
    },
    handleLeftclick(data, node) {

      if (node.checked == true) {
        if (data.serveType == 'Tileset') {
          for (var i in Viewer.scene.primitives._primitives) {
            if (
              Viewer.scene.primitives._primitives[i].id == data.cnName
            ) {
              Viewer.flyTo(Viewer.scene.primitives._primitives[i]);
            }
          }
        }
      }
    },
    getchilds(source) {
      if (source.children) {
        var child = source.children
        for (var i in child) {
          if (child[i].children) {
            this.getchilds(child[i])
          } else {
            this.childOption.push(child[i])
          }
        }
      } else {
        this.childOption.push(source)
      }
    },
    setAddTMSLayers(res) {
      var url = res.url;
      if (res.url.indexOf("{host}") != -1) {
        url = res.url.replace("{host}", iisHost);
      }

      if (res.pubid && res.pubid > 0) {
        this.setQueryPubid(res);
      } else {
        var layer = Viewer.imageryLayers.addImageryProvider(
          new Cesium.UrlTemplateImageryProvider({
            url: url,
            maximumLevel: 18,
          })
        );
        layer.name = res.cnName;
        setTimeout(() => {
          this.getWMSLayer();
        }, 100);
      }
    },
    async setQueryPubid(res) {
      const data = await comprehensive_selectPubById({ id: res.pubid })
      if (data.code != 200) {

      } 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,
          })
        );
        layer.name = res.cnName;

        if (data.result.geom) {
          var wkt = this.$wkt.parse(data.result.geom);
          Viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(wkt.coordinates[1], wkt.coordinates[0], 2000),
          });
        }
        setTimeout(() => {
          this.getWMSLayer();
        }, 100);
      }
    },
    setShowTMSLayer(result) {
      var value = this.$refs.tree.getCheckedNodes();
      var std = [];
      for (var i in value) {
        std.push(value[i].id)
      }
      for (var i in result) {
        var tile = result[i]
        if (std.indexOf(tile.id) != -1) {
          this.setAddTMSLayers(tile)

        } else {
          for (var i = 0; i < window.Viewer.imageryLayers._layers.length; i++) {
            var val_id = window.Viewer.imageryLayers._layers[i].name;
            if (val_id == tile.cnName) {
              window.Viewer.imageryLayers.remove(
                window.Viewer.imageryLayers._layers[i]
              );
            }
          }
        }
      }
    },
    setShowMptLayer(result) {
      var value = this.$refs.tree.getCheckedNodes();
      var std = [];
      for (var i in value) {
        std.push(value[i].id)
      }
      for (var i in result) {
        var tile = result[i]
        if (std.indexOf(tile.id) != -1) {
          this.setAddMPTLayers(tile)

        } else {
          for (var i in this.mptLayer) {
            if (this.mptLayer[i].treeobj.name == tile.cnName) {
              this.mptLayer[i].deleteObject();
              this.mptLayer.splice(i, 1)
            }
          }
        }
      }
    },
    setAddMPTLayers(res) {
      if (res.url.indexOf("{host}") != -1) {
        res.url = res.url.replace("{host}", iisHost);
      }
      var url = res.url.split(';')

      var layer = sgworld.Creator.createImageryProvider(res.cnName, "wms", {
        url: url[0],
        layers: url[1]
      }, "0", undefined, true, "");

      this.mptLayer.push(layer)
      setTimeout(() => {
        this.getWMSLayer();
      }, 100);
    },
    getWMSLayer() {
      var value = this.$refs.tree.getCheckedNodes();
      var std = [];
      for (var i in value) {
        if (value[i].type == 2 && value[i].serveType == "WMS") {
          std.push(value[i])
        }
      }
      this.setShowWMSLayer(std);
    },






    setShowTilesetLayer(result) {
      var value = this.$refs.tree.getCheckedNodes();
      var std = [];
      for (var i in value) {
        std.push(value[i].id)
      }
      for (var i in result) {
        var tile = result[i]
        if (std.indexOf(tile.id) != -1) {
          this.setAddTilesetLayers(tile)
        } else {
          for (var j in Viewer.scene.primitives._primitives) {
            if (Viewer.scene.primitives._primitives[j].id == tile.cnName) {
              Viewer.scene.primitives.remove(Viewer.scene.primitives._primitives[j])
            }
          }
        }
      }

    },
    setAddTilesetLayers(res) {
      var url;
      if (res.url.indexOf("{host}") != -1) {
        url = res.url.replace("{host}", iisHost);
      } else {
        url = modelUrl + "/" + res.url
      }
      var tileset = Viewer.scene.primitives.add(
        new Cesium.Cesium3DTileset({
          name: res.cnName,
          url: url, //192.168.20.106,to4
          maximumScreenSpaceError: url.indexOf("/pnts/") > -1 ? 16 : 64, // 最大屏幕空间错误：16
          maximumMemoryUsage: 768, // 最大内存：512
          dynamicScreenSpaceError: true, // 减少离相机较远的屏幕空间错误：false
          skipLevelOfDetail: true, // 在遍历时候跳过详情：false
        })
      );
      tileset.readyPromise.then((tileset) => {
        tileset.id = res.cnName;
        tileset.layerId = res.id;
        this.getTilesetArgs(tileset, res);
      });
    },
    async getTilesetArgs(tileset, res) {
      if (res.pubid > 0) {
        const data = await comprehensive_selectPubById({ id: res.pubid })
        if (data.code != 200) {
        } else {
          this.reload(tileset, data.result.json)
        }
      } else {
        this.tileSet(tileset, parseFloat(res.elev))
      }
    },
    reload(tileset, res) {
      var vm = JSON.parse(res)
      var pos = Cesium.Cartesian3.fromDegrees(vm.lon, vm.lat, vm.height);
      var converter = Cesium.Transforms.eastNorthUpToFixedFrame;
      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);
    },
    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);
      Viewer.flyTo(tileset);
    },




    setShowWMSLayer(res) {
      var url = [];
      this.setClearWmsLayer();

      for (var i in res) {
        if (res[i].url) {
          url.push(res[i].url)
        }
      }
      url = url.reverse();
      this.setAddImageLayer(url)
    },
    setShowImageLayer(res) {

      var url = [];
      for (var i in res) {
        url.push(res[i].enName)
      }
      url = url.reverse();
      this.setAddImageLayer(url)
    },
    setClearWmsLayer() {
      for (var i = 0; i < window.Viewer.imageryLayers._layers.length; i++) {
        var val_id = window.Viewer.imageryLayers._layers[i].imageryProvider.name;
        if (val_id == "Wms_Layer") {
          window.Viewer.imageryLayers.remove(
            window.Viewer.imageryLayers._layers[i]
          );
        }
      }
    },


    setAddImageLayer(res) {
      let layerWMS = new Cesium.WebMapServiceImageryProvider({
      var layerWMS = new Cesium.WebMapServiceImageryProvider({
        url: geoServerURl,
        layers: res.resource,
        layers: res.toString(),
        parameters: {
          transparent: true,
          format: "image/png",
          srs: "EPSG:4490",
          styles: "",
        },
      })
      layerWMS.name = res.label
      Viewer.imageryLayers.addImageryProvider(layerWMS)
        tileWidth: 512,
        tileHeight: 512,
      });
      layerWMS.name = "Wms_Layer";
      window.Viewer.scene.imageryLayers.addImageryProvider(layerWMS);
    },
    changeMenulayer() {
      this.isActive = !this.isActive
@@ -182,6 +524,10 @@
        Viewer.imageryLayers._layers[3].show = true
      }
    },
    // filterNode(value, data) {
    //   if (!value) return true
    //   return data.label.indexOf(value) !== -1
    // },
  },
}
</script>
@@ -189,27 +535,61 @@
<style lang="scss" scoped>
.project_tree {
  margin: 0;
  width: 300px;
  width: 100%;
  height: 100%;
  transition: width 2s;
  background: url("~@/assets/img/themic/左框.png") no-repeat center;
  background: url("~@/assets/img/Screen/prjectree.png") no-repeat center;

  background-size: 100% 100%;

  &__title {
    color: #fff;
    height: 30px;
    font-size: 20px;
    width: 130px;
    text-align: center;
    width: 140px;
    padding-top: 15px;
    color: #fff;
    background: linear-gradient(0deg,
        rgba(81, 192, 243, 0.65) 0%,
        rgba(255, 255, 255, 0.65) 86%);
    -webkit-background-clip: text;
    font-size: 17.5px;
    font-family: HYLingXinJ, HYLingXinJ-regular;
    font-weight: normal;
    letter-spacing: 1.05px;
  }

  .el-input {
    width: 80%;
    padding: 5px 0 5px 30px;
  }

  .tree-container {
    margin: 10px;
    height: 90%;
    height: 85%;
    overflow-y: auto;

    /deep/ .tree-label {
      color: #eee !important;
    }

    /deep/ .el-tree {
      color: #eee !important;
    }
  }

  .changeBaseLayer {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    overflow: hidden;
  }

  .CenDiv {
    height: 40px;
    width: 60px;

    margin-right: 7%;
    border-radius: 5px;
    bottom: 3%;
@@ -226,6 +606,7 @@
    background-size: 100% 100%;
    border-radius: 5px;
  }

  .menuLayer {
    height: 40px;
    width: 60px;
@@ -234,6 +615,31 @@
    background-size: 100% 100%;
    border-radius: 5px;
  }
}

/*  滚动条样式 */

::-webkit-scrollbar {
  width: 4px;
  height: 4px;
  background-color: #409eff;
}

::-webkit-scrollbar-track {
  background: #eee;
}

::-webkit-scrollbar-thumb {
  background: #409eff;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #409eff;
}

::-webkit-scrollbar-corner {
  background: #409eff;
}
</style>

@@ -248,20 +654,24 @@
      margin-left: -14px;
    }

    .el-tree-node__content > label.el-checkbox {
    .el-tree-node__content>label.el-checkbox {
      margin-right: -30px;
    }
    .el-tree-node__content > .el-tree-node__expand-icon {

    .el-tree-node__content>.el-tree-node__expand-icon {
      visibility: hidden;
    }
    .el-tree .el-tree-node .is-leaf + .el-checkbox .el-checkbox__inner {

    .el-tree .el-tree-node .is-leaf+.el-checkbox .el-checkbox__inner {
      display: block;
      visibility: visible;
    }

    .el-tree .el-tree-node .el-checkbox .el-checkbox__inner {
      display: none;
      // visibility: hidden;
    }

    .tree-label {
      font-size: 16px;
      color: #fff;