管道基础大数据平台系统开发-【前端】-新系統界面
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>
@@ -348,7 +348,7 @@
  mounted() {
    this.LayerStart()
    this.initMap()
    this.showMapLayer()
  },
  methods: {
    setTreeData(source) {
@@ -371,6 +371,7 @@
      var val = [];
      var std = [];
      var layerWMS = [];
      for (var i in res) {
        var str = res[i];
@@ -380,7 +381,7 @@
          if (str.isShow == 1) {
            std.push(str.id)
            this.showMapLayer(str)
            layerWMS.push(str)
            this.tableData.push({
              name: str.cnName,
              ename: str.enName,
@@ -392,23 +393,42 @@
      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) {
      if (val == undefined) return;
      if (val.serveType == "WMS") {
      if (val) {
        this.setClearMap();
        var url = [];
        for (var i in val) {
          if (val[i].url) {
            url.push(val[i].url)
          }
        }
        url = url.reverse()
        console.log(url)
        var layer2 = new Image({
          name: val.cnName,
          name: "Wms_Layer",
          source: new ImageWMS({
            crossOrigin: "anonymous",
            url: geoServerURl,
            params: {
              FORMAT: "image/png",
              VERSION: "1.1.1",
              LAYERS: val.url,
              LAYERS: url.toString(),
            },
          }),
        })
        });
        mapView.addLayer(layer2)
      }
@@ -594,39 +614,55 @@
    },
    handleClose() { },
    handleTreeNodeClick(data, nodes) {
      if (data.children != null) return
      var value = this.$refs.tree.getCheckedNodes();
      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)
              }
            })
          }
      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.cnName,
        //   ename: data.enName,
        // })
      }
      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
@@ -710,6 +746,7 @@
    width: 100%;
    height: 70px;
    padding-left: 20px;
    margin: 0;
  }
  .left_Menu {
    z-index: 40;