管道基础大数据平台系统开发-【前端】-新系統界面
Surpriseplus
2023-02-06 4e3d77dcbe421a4d6611ebcdd1ac3165cb36ad4b
src/views/exportMap/index.vue
@@ -3,7 +3,6 @@
    id="mapView"
    class="MapBox"
    v-loading="loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <div class="topMenu">
@@ -111,7 +110,7 @@
            v-show="lefMenuContent"
          >
            <el-tree
              :data="data"
              :data="treeData"
              show-checkbox
              node-key="id"
              :props="defaultProps"
@@ -307,8 +306,9 @@
import mapviewVue from '../../components/mapview.vue';
import { removeToken, getToken } from '@/utils/auth';
import $ from 'jquery';
import { exportSelectByPage } from '../../api/api.js';
import { exportSelectByPage, perms_selectLayers } from '../../api/api.js';
import moment from 'moment';
import { image_layer } from '../../assets/js/index.js';
export default {
  data() {
    return {
@@ -339,41 +339,8 @@
        { label: 'A6', value: 'A6' },
      ],
      value: 'A4',
      data: [
        {
          id: 1,
          label: '图层',
          children: [
            {
              id: 11,
              label: '项目',
              value: '项目',
              layer: 'LF:bs_project',
              isEdit: false,
            },
            {
              id: 12,
              label: '站场',
              value: '站场',
              layer: 'LF:m_sitepoint',
              isEdit: false,
            },
            {
              id: 13,
              label: '管道中心线',
              value: '管道中心线',
              layer: 'LF:m_pipeline',
              isEdit: false,
            },
            {
              id: 14,
              label: '战略通道',
              value: '战略通道',
              layer: 'LF:th_strategic_channel',
              isEdit: false,
            },
          ],
        },
      treeData: [
      ],
      arrList: [],
      defaultProps: {
@@ -392,32 +359,86 @@
      count: 0,
    };
  },
  mounted() {
    this.LayerStart();
    this.initMap();
    this.showMapLayer();
  },
  methods: {
    showMapLayer() {
      var val = this.data[0].children;
    async LayerStart() {
      const data = await perms_selectLayers();
      if (data.code != 200) {
        return this.$message.error("图层列表查询失败");
      }
      var std = [];
      for (var i = 0; i < val.length; i++) {
        var layer2 = new Image({
          name: val[i].label,
          source: new ImageWMS({
            crossOrigin: 'anonymous',
            url: geoServerURl,
      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.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])
          }
        }
      }
      this.treeData = layer_groups;
      for (var i in data.result) {
        if (data.result[i].type == 2 && data.result[i].url != null) {
          for (var j = 0; j < window.Viewer.imageryLayers._layers.length; j++) {
            var val_id = window.Viewer.imageryLayers._layers[j];
            if (val_id.show == true) {
            params: {
              FORMAT: 'image/png',
              VERSION: '1.1.1',
              LAYERS: val[i].layer,
            },
          }),
        });
        mapView.addLayer(layer2);
        std.push(val[i].id);
              if (val_id.imageryProvider.name == data.result[i].cnName) {
                std.push(data.result[i].id);
              }
            }
          }
        }
      }
      this.$refs.tree.setCheckedKeys(std);
    },
    showMapLayer(val) {
      var layer2 = new Image({
        name: val.label,
        source: new ImageWMS({
          crossOrigin: 'anonymous',
          url: geoServerURl,
          params: {
            FORMAT: 'image/png',
            VERSION: '1.1.1',
            LAYERS: val.resource,
          },
        }),
      });
      mapView.addLayer(layer2);
    },
    showLeftMenu(res) {
      switch (res) {
@@ -604,9 +625,12 @@
      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.arrList.push({
              name: data.label,
            });
@@ -619,6 +643,16 @@
          }
        }
      }
      if (str == 0 && nodes == true) {
        this.showMapLayer(data)
        this.arrList.push({
          name: data.label,
        });
      }
      this.tableData = this.arrList;
    },
    setAddMapLayer() {
@@ -728,6 +762,7 @@
        padding: 20px;
        display: flex;
        justify-content: space-between;
        overflow: auto;
      }
      .CenDiv {
        height: 40px;
@@ -890,5 +925,15 @@
  /deep/.el-loading-spinner i {
    color: #409eff !important;
  }
  /deep/.el-tree .el-tree-node__content:hover {
    background-color: transparent !important;
  }
  /deep/.el-tree {
    color: white !important;
    background: transparent !important;
  }
  /deep/.el-tree-node:focus > .el-tree-node__content {
    background: transparent !important;
  }
}
</style>