<template>
|
<div class="exportmap">
|
<div id="mapView" class="mapView">
|
<div class="topMenu">
|
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
<el-form-item>
|
<el-link
|
style="color: white"
|
@click="setLeftMenu"
|
:underline="false"
|
>图层</el-link
|
>
|
</el-form-item>
|
<el-form-item>
|
<el-link
|
style="color: white"
|
@click="changeMenulayer"
|
:underline="false"
|
><i class="el-icon-menu"></i>底图</el-link
|
>
|
</el-form-item>
|
<el-form-item>
|
<el-select v-model="value" placeholder="请选择">
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-link style="color: white" :underline="false"
|
><i class="el-icon-rank"></i>
|
</el-link>
|
</el-form-item>
|
<el-form-item>
|
<el-link
|
style="color: white"
|
@click="showMapApply = !showMapApply"
|
:underline="false"
|
>出图申请
|
</el-link></el-form-item
|
>
|
<el-form-item>
|
<el-link
|
style="color: white"
|
@click="getShowMapList"
|
:underline="false"
|
>出图列表</el-link
|
></el-form-item
|
>
|
<el-form-item label="旋转">
|
<el-input
|
v-model="formInline.role"
|
placeholder="请输入内容"
|
></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button plain size="mini" @click="setMapRole">旋转</el-button>
|
<el-button plain size="mini" @click="setMapAddDraw()"
|
>绘制</el-button
|
>
|
<el-button plain size="mini" @click="setMapRemoveDraw()"
|
>清除</el-button
|
>
|
<el-button plain size="mini" @click="setExportMapLayer"
|
>出图</el-button
|
>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div class="leftMeu" v-if="showleftMenu">
|
<div class="topHeader">
|
<div style="float: left">图层</div>
|
<div style="float: right">
|
<el-link @click="showleftMenu = false" :underline="false"
|
><i class="el-icon-close"></i
|
></el-link>
|
</div>
|
<div style="float: right; margin-right: 5%">
|
<el-link :underline="false" @click="changeRowType"
|
><i
|
:class="
|
rowtype == true ? 'el-icon-arrow-down' : 'el-icon-arrow-up'
|
"
|
></i
|
></el-link>
|
</div>
|
</div>
|
<div class="topContent" v-if="rowtype">
|
<el-tree
|
:data="data"
|
show-checkbox
|
node-key="id"
|
:props="defaultProps"
|
:default-expanded-keys="[1]"
|
@check-change="handleTreeNodeClick"
|
>
|
</el-tree>
|
</div>
|
</div>
|
<div class="mapApplay" v-if="showMapApply">
|
<label>出图申请</label>
|
<el-divider />
|
<el-form ref="form" :model="form" label-width="80px">
|
<el-form-item label="出图名称">
|
<el-input v-model="form.name"></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-table
|
ref="singleTable"
|
:data="tableData"
|
style="width: 100%"
|
height="200"
|
>
|
<el-table-column type="index" label="序号" width="50">
|
</el-table-column>
|
|
<el-table-column property="name" label="图层名称">
|
</el-table-column>
|
</el-table>
|
</el-form-item>
|
|
<el-form-item>
|
<el-button type="primary" @click="setMapApply">立即创建</el-button>
|
<el-button @click="showMapApply = false">取消</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div class="mapApplay" v-if="showMapList">
|
<div>
|
<label>出图列表</label>
|
<div style="float: right">
|
<el-link @click="showMapList = false" :underline="false"
|
><i class="el-icon-close"></i
|
></el-link>
|
</div>
|
</div>
|
<el-divider />
|
<el-table
|
ref="singleTable"
|
:data="exportable"
|
style="width: 100%"
|
height="200"
|
@selection-change="handleSelectionChange"
|
>
|
<el-table-column type="index" width="50" label="序号">
|
</el-table-column>
|
<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>
|
<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
|
@click="changeMenulayer"
|
class="center CenDiv"
|
:class="{ center1: centerFlag }"
|
>
|
<div
|
id="cenBg"
|
v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
|
></div>
|
</div> -->
|
</div>
|
|
<el-dialog
|
title="提示"
|
:visible.sync="dialogVisible"
|
width="30%"
|
:before-close="handleClose"
|
>
|
<el-form ref="layerform" :model="layerform" label-width="80px">
|
<el-form-item label="服务名称">
|
<el-input v-model="layerform.name"></el-input>
|
</el-form-item>
|
<el-form-item label="服务类型">
|
<el-radio-group v-model="layerform.type">
|
<el-radio label="WMS"></el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="服务地址">
|
<el-input type="textarea" v-model="layerform.resource"></el-input>
|
</el-form-item>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
<el-button type="primary" @click="setAddMapLayer">确 定</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import ImageWMS from 'ol/source/ImageWMS';
|
import Map from 'ol/Map';
|
import XYZ from 'ol/source/XYZ';
|
import View from 'ol/View';
|
import Image from 'ol/layer/Image';
|
import TileLayer from 'ol/layer/Tile';
|
import { transform } from 'ol/proj';
|
import Draw, { createRegularPolygon, createBox } from 'ol/interaction/Draw.js';
|
import { OSM, Vector as VectorSource } from 'ol/source';
|
import { Vector as VectorLayer } from 'ol/layer';
|
import LayerVector from 'ol/layer/Vector';
|
import Style from 'ol/style/Style';
|
import Fill from 'ol/style/Fill';
|
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 {
|
dialogVisible: false,
|
showleftMenu: false,
|
showMapApply: false,
|
showMapList: false,
|
centerFlag: false,
|
isActive: true,
|
isMenuLayer: false,
|
rowtype: true,
|
form: {},
|
formInline: { role: '' },
|
layerform: {},
|
tableData: [],
|
exportable: [],
|
multipleSelection: [],
|
options: [{ label: '1:20万', value: '1:20万' }],
|
value: '1:20万',
|
data: [
|
{
|
id: 1,
|
label: '图层',
|
children: [
|
{ label: '阀室', value: '阀室' },
|
{ label: '站场', value: '站场' },
|
{ label: '管道中心线', value: '管道中心线' },
|
],
|
},
|
],
|
arrList: [],
|
defaultProps: {
|
children: 'children',
|
label: 'label',
|
},
|
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();
|
|
this.source = new VectorSource({ wrapX: false });
|
|
this.vector = new VectorLayer({
|
source: this.source,
|
});
|
mapView.addLayer(this.vector);
|
|
let type = 'Circle';
|
let geometryFunction = createBox();
|
this.draw = new Draw({
|
source: this.source,
|
type,
|
geometryFunction,
|
});
|
mapView.addInteraction(this.draw);
|
this.draw.on('drawend', (e) => {
|
let feature = e.feature;
|
let geom = feature.getGeometry();
|
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');
|
|
this.layerExtent = {
|
xmin: a1[0],
|
ymin: a1[1],
|
xmax: a2[0],
|
ymax: a2[1],
|
};
|
mapView.removeInteraction(this.draw);
|
});
|
},
|
setMapRole() {
|
var value = parseFloat(this.formInline.role);
|
var role = (Math.PI / 180) * value;
|
mapView.getView().setRotation(role);
|
},
|
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',
|
|
params: {
|
VERSION: '1.3.0',
|
FORMAT: 'image/png',
|
LAYERS: '',
|
srs: 'EPSG:900913',
|
tiled: true,
|
styles: '',
|
},
|
}),
|
});
|
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);
|
if (layer.name == data.label) {
|
mapView.removeLayer(layer);
|
}
|
}
|
}
|
this.tableData = this.arrList;
|
},
|
setAddMapLayer() {
|
this.dialogVisible = false;
|
this.data[0].children.push({
|
label: this.layerform.name,
|
type: this.layerform.type,
|
resource: this.layerform.resource,
|
});
|
},
|
|
setLeftMenu() {
|
this.showleftMenu = true;
|
this.rowtype = true;
|
},
|
//左侧菜单点击事件
|
changeRowType() {
|
this.rowtype = !this.rowtype;
|
},
|
//地图初始化
|
initMap() {
|
var TiandiLayer = new TileLayer({
|
source: new XYZ({
|
url: 'http://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=94a34772eb88317fcbf8428e10448561',
|
}),
|
});
|
var TiandiTitle = new TileLayer({
|
source: new XYZ({
|
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: [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();
|
},
|
//切换底图
|
changeMenulayer() {
|
this.isActive = !this.isActive;
|
this.isMenuLayer = !this.isMenuLayer;
|
this.setLayerVisible();
|
},
|
setLayerVisible() {
|
if (this.isActive == true) {
|
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(2).setVisible(true);
|
mapView.getLayers().item(3).setVisible(true);
|
mapView.getLayers().item(0).setVisible(false);
|
mapView.getLayers().item(1).setVisible(false);
|
}
|
},
|
},
|
};
|
</script>
|
|
<style lang="less">
|
.exportmap {
|
width: 100%;
|
height: 100%;
|
background: white;
|
margin: 0;
|
padding: 0;
|
overflow: hidden;
|
.mapView {
|
width: 100%;
|
height: 100%;
|
.topMenu {
|
background: rgba(0, 0, 0, 0.5);
|
z-index: 40;
|
position: absolute;
|
left: 40%;
|
top: 3%;
|
padding-top: 1%;
|
padding-left: 1%;
|
padding-right: 1%;
|
}
|
.mapApplay {
|
width: 40%;
|
position: absolute;
|
background: rgba(0, 0, 0, 0.5);
|
z-index: 40;
|
top: 15%;
|
margin-left: 20%;
|
padding: 1%;
|
label {
|
color: white;
|
}
|
}
|
.mapList {
|
width: 40%;
|
position: absolute;
|
background: rgba(0, 0, 0, 0.5);
|
z-index: 40;
|
top: 15%;
|
margin-left: 20%;
|
padding: 1%;
|
}
|
.leftMeu {
|
position: absolute;
|
width: 13%;
|
z-index: 40;
|
top: 10%;
|
margin-left: 1%;
|
border-radius: 5px;
|
padding: 1%;
|
}
|
.topHeader {
|
padding: 5%;
|
background: rgba(0, 0, 0, 0.5);
|
width: 100%;
|
border-radius: 5px;
|
color: white;
|
height: 25px;
|
border: 1px solid gray;
|
}
|
.topContent {
|
background: rgba(0, 0, 0, 0.5);
|
width: 100%;
|
padding: 5%;
|
border-radius: 5px;
|
border: 1px solid gray;
|
}
|
|
.el-icon-close {
|
color: white;
|
}
|
.el-icon-arrow-down {
|
color: white;
|
}
|
.el-icon-arrow-up {
|
color: white;
|
}
|
|
.contentHeader {
|
border-top: 1px solid gray;
|
padding: 3%;
|
width: 94%;
|
color: white;
|
}
|
.center {
|
margin-left: 1%;
|
}
|
.CenDiv {
|
position: absolute;
|
bottom: 3%;
|
height: 40px;
|
width: 60px;
|
z-index: 101;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
box-shadow: 3px 3px 6px #666;
|
border: 1px solid rgba(204, 204, 204, 0.76);
|
border-radius: 5px;
|
cursor: pointer;
|
}
|
.center1 {
|
margin-left: 1%;
|
}
|
.right {
|
position: absolute;
|
top: 50px;
|
right: 0;
|
width: 20%;
|
height: calc(100% - 50px);
|
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
}
|
.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;
|
// }
|
}
|
}
|
</style>
|
