管道基础大数据平台系统开发-【前端】-新系統界面
src/views/exportMap/index.vue
@@ -109,7 +109,7 @@
              node-key="id"
              :props="defaultProps"
              :default-expanded-keys="[1]"
              @check-change="handleTreeNodeClick"
              @check="handleTreeNodeClick"
              ref="tree"
            >
            </el-tree>
@@ -174,6 +174,7 @@
        ref="singleTable"
        :data="exportable"
        style="width: 100%"
        border
        height="200"
        @selection-change="handleSelectionChange"
      >
@@ -317,15 +318,18 @@
        { label: "A2", value: "A2" },
        { label: "A3", value: "A3" },
        { label: "A4", value: "A4" },
        { label: "A5", value: "A5" },
        { label: "A6", value: "A6" },
        // { label: "A5", value: "A5" },
        // { label: "A6", value: "A6" },
      ],
      value: "A4",
      treeData: [],
      arrList: [],
      layername: [
        1, 2, 5, 13, 15, 16, 31
      ],
      defaultProps: {
        children: "children",
        label: "label",
        label: "cnName",
      },
      draw: null,
      vector: null,
@@ -337,99 +341,97 @@
        pageIndex: 1,
      },
      count: 0,
    }
  },
  mounted() {
    this.LayerStart()
    this.initMap()
    this.showMapLayer()
  },
  methods: {
    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; // 返回一级菜单
      });
    },
    async LayerStart() {
      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.tableData.push({
                name: layer_entity.label,
              })
              this.showMapLayer(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])
          }
        }
      }
      layer_groups = layer_groups.filter((res) => {
        if (res.children != null && res.children.length != 0) {
          return res
        }
      })
      this.treeData = layer_groups;
      var res = data.result;
      // for (var i in data.result) {
      //   if (data.result[i].type == 2 && data.result[i].url != null) {
      //     for (var j = 0; j <  window.mapView.imageryLayers._layers.length; j++) {
      //       var val_id = window.mapView.imageryLayers._layers[j]
      //       if (val_id.show == true) {
      //         if (val_id.imageryProvider.name == data.result[i].cnName) {
      //           std.push(data.result[i].id)
      //         }
      //       }
      //     }
      //   }
      // }
      debugger
      var val = [];
      var std = [];
      var layerWMS = [];
      for (var i in res) {
        var str = res[i];
        if (str.type == 1 && this.layername.indexOf(str.id) != -1) {
          val.push(str)
        } else if (str.url != null && str.type == 2 && this.layername.indexOf(str.pid) != -1) {
          if (str.isShow == 1) {
            std.push(str.id)
            layerWMS.push(str)
            this.tableData.push({
              name: str.cnName,
              ename: str.enName,
            })
          }
          val.push(str)
        }
      }
      var res = this.setTreeData(val);
      this.treeData = res;
      this.$refs.tree.setCheckedKeys(std)
      this.showMapLayer(layerWMS);
    },
    setClearMap() {
      var layers_ol = mapView.getAllLayers();
      for (var i in layers_ol) {
        var layerOl = layers_ol[i];
        if (layerOl.values_.name == "Wms_Layer") {
          mapView.removeLayer(layers_ol[i]); //显示图层
        }
      }
    },
    showMapLayer(val) {
      debugger
      if (val == undefined) return;
      var layer2 = new Image({
        name: val.label,
        source: new ImageWMS({
          crossOrigin: "anonymous",
          url: geoServerURl,
      if (val) {
        this.setClearMap();
        var url = [];
        for (var i in val) {
          if (val[i].url) {
            url.push(val[i].url)
          }
          params: {
            FORMAT: "image/png",
            VERSION: "1.1.1",
            LAYERS: val.resource,
          },
        }),
      })
      mapView.addLayer(layer2)
        }
        url = url.reverse()
        console.log(url)
        var layer2 = new Image({
          name: "Wms_Layer",
          source: new ImageWMS({
            crossOrigin: "anonymous",
            url: geoServerURl,
            params: {
              FORMAT: "image/png",
              VERSION: "1.1.1",
              LAYERS: url.toString(),
            },
          }),
        });
        mapView.addLayer(layer2)
      }
    },
    showLeftMenu(res) {
      switch (res) {
@@ -534,7 +536,7 @@
      var token = "?token=" + getToken()
      var a = document.createElement("a") // 创建一个a标签元素
      a.style.display = "none" // 设置元素不可见
      a.href = BASE_URL + "/mark/downloadFile" + token + "&guid=" + guid
      a.href = BASE_URL + "/export/downloadFile" + token + "&guid=" + guid
      document.body.appendChild(a) // 加入
      a.click() // 触发点击,下载
@@ -598,13 +600,13 @@
      this.loading = true
      var val_data = []
      for (var i in this.tableData) {
        val_data.push(this.tableData[i].name)
        val_data.push(this.tableData[i].ename)
      }
      if (this.isActive) {
        val_data.push("矢量图")
        val_data.push("高德矢量")
      } else {
        val_data.push("影像注记")
        val_data.push("影像图")
        // val_data.push("影像注记")
        val_data.push("高德影像")
      }
      this.setExportMapLayer(val_data)
      this.showMapApply = false
@@ -612,36 +614,55 @@
    },
    handleClose() { },
    handleTreeNodeClick(data, nodes) {
      if (data.children != null) return
      var layers = mapView.getAllLayers()
      for (var i in layers) {
        var layer = layers[i]
        var str = 0
        if (layer.values_.name == data.label) {
          layer.setVisible(nodes) //显示图层
          if (nodes == true) {
            str++
            this.tableData.push({
              name: data.label,
            })
          } else {
            this.tableData.some((item, i) => {
              if (item.name === data.label) {
                this.tableData.splice(i, 1)
              }
            })
          }
      var value = this.$refs.tree.getCheckedNodes();
      this.showMapLayer(value)
      var std = [];
      for (var i in value) {
        if (value[i].type == 2) {
          var str = value[i]
          std.push({
            name: str.cnName,
            ename: str.enName,
          })
        }
      }
      if (str == 0 && nodes == true) {
        this.showMapLayer(data)
        this.tableData.push({
          name: data.label,
        })
      }
      this.tableData = std;
      // if (data.children != null) return
      // this.tableData = this.arrList
      // var layers = mapView.getAllLayers()
      // for (var i in layers) {
      //   var layer = layers[i]
      //   var str = 0
      //   if (layer.values_.name == data.cnName) {
      //     layer.setVisible(nodes) //显示图层
      //     if (nodes == true) {
      //       str++
      //       this.tableData.push({
      //         name: data.cnName,
      //         ename: data.enName
      //       })
      //     } else {
      //       this.tableData.some((item, i) => {
      //         if (item.name === data.cnName) {
      //           this.tableData.splice(i, 1)
      //         }
      //       })
      //     }
      //   }
      // }
      // if (str == 0 && nodes == true) {
      //   this.showMapLayer(data)
      //   // this.tableData.push({
      //   //   name: data.cnName,
      //   //   ename: data.enName,
      //   // })
      // }
      // // this.tableData = this.arrList
    },
    setAddMapLayer() {
      this.dialogVisible = false
@@ -725,6 +746,7 @@
    width: 100%;
    height: 70px;
    padding-left: 20px;
    margin: 0;
  }
  .left_Menu {
    z-index: 40;
@@ -797,5 +819,14 @@
  /deep/.el-form-item {
    margin-top: 10px;
  }
  /deep/ .el-tree-node {
    .is-leaf + .el-checkbox .el-checkbox__inner {
      display: inline-block;
    }
    .el-checkbox .el-checkbox__inner {
      display: none;
    }
  }
}
</style>