From 8193a3d83d463717b873392b248873fdef0acaa9 Mon Sep 17 00:00:00 2001
From: Surpriseplus <845948745@qq.com>
Date: 星期五, 18 十一月 2022 12:15:29 +0800
Subject: [PATCH] 1
---
src/views/exportMap/index.vue | 262 +++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 205 insertions(+), 57 deletions(-)
diff --git a/src/views/exportMap/index.vue b/src/views/exportMap/index.vue
index 7abb0e6..973e822 100644
--- a/src/views/exportMap/index.vue
+++ b/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.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>
--
Gitblit v1.9.3