1

Surpriseplus

2022-11-18 8193a3d83d463717b873392b248873fdef0acaa9

1

 src/views/exportMap/index.vue

@@ -46,7 +46,7 @@
          <el-form-item>
            <el-link
              style="color: white"
              @click="showMapList = true"
              @click="getShowMapList"
              :underline="false"
              >出图列表</el-link
            ></el-form-item
@@ -64,6 +64,9 @@
            >
            <el-button plain size="mini" @click="setMapRemoveDraw()"
              >清除</el-button
            >
            <el-button plain size="mini" @click="setExportMapLayer"
              >出图</el-button
            >
          </el-form-item>
        </el-form>
@@ -87,14 +90,6 @@
          </div>
        </div>
        <div class="topContent" v-if="rowtype">
          <el-link
            @click="dialogVisible = true"
            style="color: white"
            :underline="false"
          >
            <i class="el-icon-plus">添加</i></el-link
          >
          <el-divider />
          <el-tree
            :data="data"
            show-checkbox
@@ -106,7 +101,7 @@
          </el-tree>
        </div>
      </div>
      <div v-drag class="mapApplay" v-if="showMapApply">
      <div class="mapApplay" v-if="showMapApply">
        <label>出图申请</label>
        <el-divider />
        <el-form ref="form" :model="form" label-width="80px">
@@ -120,12 +115,10 @@
              style="width: 100%"
              height="200"
            >
              <el-table-column type="index" width="50"> </el-table-column>
              <el-table-column property="date" label="日期" width="120">
              <el-table-column type="index" label="序号" width="50">
              </el-table-column>
              <el-table-column property="name" label="姓名" width="120">
              </el-table-column>
              <el-table-column property="address" label="地址">

              <el-table-column property="name" label="图层名称">
              </el-table-column>
            </el-table>
          </el-form-item>
@@ -136,7 +129,7 @@
          </el-form-item>
        </el-form>
      </div>
      <div v-drag class="mapApplay" v-if="showMapList">
      <div class="mapApplay" v-if="showMapList">
        <div>
          <label>出图列表</label>
          <div style="float: right">
@@ -144,26 +137,46 @@
              ><i class="el-icon-close"></i
            ></el-link>
          </div>
          <div style="float: right; margin-right: 20px">
            <el-button type="warning" size="mini" plain>批量下载</el-button>
          </div>
        </div>
        <el-divider />
        <el-table
          ref="singleTable"
          :data="tableData"
          :data="exportable"
          style="width: 100%"
          height="200"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="index" width="50"> </el-table-column>
          <el-table-column property="date" label="日期" width="120">
          <el-table-column type="index" width="50" label="序号">
          </el-table-column>
          <el-table-column property="name" label="姓名" width="120">
          <el-table-column property="name" label="名称"> </el-table-column>
          <el-table-column property="type" label="类型"> </el-table-column>
          <el-table-column property="descr" label="描述"> </el-table-column>
          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="downloadMap(scope.$index, scope.row)"
                type="text"
                size="small"
              >
                下载
              </el-button>
            </template>
          </el-table-column>
          <el-table-column property="address" label="地址"> </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="listdata.pageIndex"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="listdata.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="count"
          >
          </el-pagination>
        </div>
      </div>
      <div
      <!-- <div
        @click="changeMenulayer"
        class="center CenDiv"
        :class="{ center1: centerFlag }"
@@ -172,8 +185,9 @@
          id="cenBg"
          v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
        ></div>
      </div>
      </div> -->
    </div>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
@@ -218,6 +232,9 @@
import Stroke from 'ol/style/Stroke';
import Circle from 'ol/style/Circle';
import mapviewVue from '../../components/mapview.vue';
import { removeToken, getToken } from '@/utils/auth';
import $ from 'jquery';
import { exportSelectByPage } from '../../api/api.js';
export default {
  data() {
    return {
@@ -233,15 +250,22 @@
      formInline: { role: '' },
      layerform: {},
      tableData: [],
      options: [{}],
      value: '',
      exportable: [],
      multipleSelection: [],
      options: [{ label: '1:20万', value: '1:20万' }],
      value: '1:20万',
      data: [
        {
          id: 1,
          label: '图层',
          children: [],
          children: [
            { label: '阀室', value: '阀室' },
            { label: '站场', value: '站场' },
            { label: '管道中心线', value: '管道中心线' },
          ],
        },
      ],
      arrList: [],
      defaultProps: {
        children: 'children',
        label: 'label',
@@ -249,17 +273,93 @@
      draw: null,
      vector: null,
      source: null,
      layerExtent: null,
      listdata: {
        name: null,
        pageSize: 10,
        pageIndex: 1,
      },
      count: 0,
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      this.listdata.pageIndex = 1;
      this.listdata.pageSize = val;
      this.getShowMapList();
    },
    handleCurrentChange(val) {
      this.listdata.pageIndex = val;
      this.getShowMapList();
    },
    async getShowMapList() {
      const data = await exportSelectByPage(this.listdata);
      this.exportable = data.result;
      this.showMapList = true;
      this.count = data.count;
    },
    setExportMapLayer(res) {
      var token = '?token=' + getToken();
      var data = {
        token: token.replace('?token=', ''),
        title: this.form.name,
        pageSize: 'A4',
        province: '山东省',
        scale: this.value,
        resolution: '20米',
        date: '2022.11.14',
        layers: res.toString(),
        rotation: 0,
        xmin: this.layerExtent.xmin,
        ymin: this.layerExtent.ymin,
        xmax: this.layerExtent.xmax,
        ymax: this.layerExtent.ymax,
      };

      $.ajax({
        async: true,
        url: BASE_URL + '/export/insertMap' + token,
        type: 'POST',
        data: JSON.stringify(data),
        contentType: 'application/json',
        dataType: 'json',
        error: function () {},
        success: (rs) => {
          var value = 'code = ' + rs.code + ', result = ' + rs.result;
          if ((rs.code = 200)) {
            this.$message({
              message: value,
              type: 'success',
            });
          } else {
            this.$message.error(value);
          }
        },
      });
    },
    downloadMap(index, rows) {
      var guid = rows.guid;
      var token = '?token=' + getToken();
      var a = document.createElement('a'); // 创建一个a标签元素
      a.style.display = 'none'; // 设置元素不可见
      a.href = BASE_URL + '/mark/downloadFile' + token + '&guid=' + guid;

      document.body.appendChild(a); // 加入
      a.click(); // 触发点击,下载
      document.body.removeChild(a); // 释放
    },
    setMapRemoveDraw() {
      if (this.draw != null) {
        mapView.removeLayer(this.vector);
      }
    },

    setMapAddDraw() {
      this.setMapRemoveDraw();

@@ -284,9 +384,13 @@
        var extent = geom.getExtent();
        var a1 = transform([extent[0], extent[1]], 'EPSG:3857', 'EPSG:4326');
        var a2 = transform([extent[2], extent[3]], 'EPSG:3857', 'EPSG:4326');
        var std = [a1, a2];
        console.log(std);

        this.layerExtent = {
          xmin: a1[0],
          ymin: a1[1],
          xmax: a2[0],
          ymax: a2[1],
        };
        mapView.removeInteraction(this.draw);
      });
    },
@@ -295,17 +399,40 @@
      var role = (Math.PI / 180) * value;
      mapView.getView().setRotation(role);
    },
    setMapApply() {},
    setMapApply() {
      if (this.layerExtent == null) {
        this.$message.error('请选择出图范围');
        return;
      }
      var val_data = [];
      for (var i in this.tableData) {
        val_data.push(this.tableData[i].name);
      }
      if (this.isActive) {
        val_data.push('矢量图');
        val_data.push('矢量注记');
      } else {
        val_data.push('高德影像');
        val_data.push('高德影像注记');
      }
      this.setExportMapLayer(val_data);
      this.showMapApply = false;
      this.form = {};
    },
    handleClose() {},
    handleTreeNodeClick(data, nodes) {
      if (data.label == '图层') return;

      if (nodes == true) {
        this.arrList.push({
          name: data.label,
        });
        var wmsLayer = new Image({
          source: new ImageWMS({
            ratio: 1,
            url: data.resource,
            crossOrigin: 'anonymous',
            //serverType: 'geoserver',

            params: {
              VERSION: '1.3.0',
              FORMAT: 'image/png',
@@ -319,6 +446,11 @@
        wmsLayer.name = data.label;
        mapView.addLayer(wmsLayer);
      } else {
        this.arrList.some((item, i) => {
          if (item.name === data.label) {
            this.arrList.splice(i, 1);
          }
        });
        var len = mapView.getAllLayers();
        for (var i in len) {
          var layer = mapView.getLayers().item(i);
@@ -327,6 +459,7 @@
          }
        }
      }
      this.tableData = this.arrList;
    },
    setAddMapLayer() {
      this.dialogVisible = false;
@@ -347,26 +480,37 @@
    },
    //地图初始化
    initMap() {
      var vectorLayer = new TileLayer({
      var TiandiLayer = new TileLayer({
        source: new XYZ({
          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
          url: 'http://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=94a34772eb88317fcbf8428e10448561',
        }),
      });
      var imageLayer = new TileLayer({
      var TiandiTitle = new TileLayer({
        source: new XYZ({
          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}',
          url: 'http://t0.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=94a34772eb88317fcbf8428e10448561',
        }),
      });

      var GaoDeLayer = new TileLayer({
        source: new XYZ({
          url: 'http://wprd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=6',
        }),
      });
      var GaoDeTitle = new TileLayer({
        source: new XYZ({
          url: 'http://wprd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=8',
        }),
      });
      window.mapView = new Map({
        target: 'mapView',
        layers: [imageLayer, vectorLayer],
        layers: [TiandiLayer, TiandiTitle, GaoDeLayer, GaoDeTitle],
        view: new View({
          center: transform([105.02, 34.9], 'EPSG:4326', 'EPSG:3857'),
          zoom: 4,
          projection: 'EPSG:3857',
        }),
      });
      mapView.getLayers().item(2).setVisible(false);
      mapView.getLayers().item(3).setVisible(false);
      this.formInline.role = mapView.getView().getRotation();
    },
    //切换底图
@@ -377,10 +521,14 @@
    },
    setLayerVisible() {
      if (this.isActive == true) {
        mapView.getLayers().item(0).setVisible(false);
        mapView.getLayers().item(2).setVisible(false);
        mapView.getLayers().item(3).setVisible(false);
        mapView.getLayers().item(0).setVisible(true);
        mapView.getLayers().item(1).setVisible(true);
      } else {
        mapView.getLayers().item(0).setVisible(true);
        mapView.getLayers().item(2).setVisible(true);
        mapView.getLayers().item(3).setVisible(true);
        mapView.getLayers().item(0).setVisible(false);
        mapView.getLayers().item(1).setVisible(false);
      }
    },
@@ -506,22 +654,22 @@
    .CenDiv:hover {
      border: 1px solid #409eff;
    }
    .active {
      width: 100%;
      height: 100%;
      background: url('../../assets/img/Layer/imgLayer2.png') no-repeat center;
      position: absolute;
      background-size: 100% 100%;
      border-radius: 5px;
    }
    .menuLayer {
      width: 100%;
      height: 100%;
      background: url('../../assets/img/Layer/imgLayer1.png') no-repeat center;
      position: absolute;
      background-size: 100% 100%;
      border-radius: 5px;
    }
    // .active {
    //   width: 100%;
    //   height: 100%;
    //   background: url('../../assets/img/Layer/imgLayer2.png') no-repeat center;
    //   position: absolute;
    //   background-size: 100% 100%;
    //   border-radius: 5px;
    // }
    // .menuLayer {
    //   width: 100%;
    //   height: 100%;
    //   background: url('../../assets/img/Layer/imgLayer1.png') no-repeat center;
    //   position: absolute;
    //   background-size: 100% 100%;
    //   border-radius: 5px;
    // }
  }
}
</style>