<template>
|
<div
|
id="mapView"
|
class="MapBox"
|
v-loading="loading"
|
|
element-loading-background="rgba(0, 0, 0, 0.8)"
|
>
|
<div class="topMenu">
|
<el-form
|
:inline="true"
|
:model="formInline"
|
class="demo-form-inline"
|
>
|
<el-form-item>
|
<el-link
|
style="color: white"
|
@click="showLeftMenu(1)"
|
:underline="false"
|
title="图层列表"
|
><i class="el-icon-s-operation"></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"
|
@click="setMapAddDraw()"
|
:underline="false"
|
><i class="el-icon-edit-outline"></i>绘制</el-link>
|
</el-form-item>
|
<el-form-item>
|
<el-link
|
:disabled="layerExtent == null"
|
style="color: white"
|
@click="setMapRemoveDraw()"
|
:underline="false"
|
title="图层列表"
|
><i class="el-icon-delete"></i>清除</el-link>
|
</el-form-item>
|
|
<el-form-item>
|
<el-link
|
style="color: white"
|
@click="showMapApply = true"
|
:underline="false"
|
:disabled="layerExtent == null"
|
>出图申请
|
</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>
|
<el-link
|
style="color: white"
|
@click="changeMenulayer"
|
:underline="false"
|
v-show="isActive"
|
>影像</el-link>
|
<el-link
|
style="color: white"
|
v-show="!isActive"
|
@click="changeMenulayer"
|
:underline="false"
|
>矢量</el-link>
|
</el-form-item>
|
<el-form-item label="旋转角度">
|
<el-input
|
v-model="formInline.role"
|
placeholder="请输入内容"
|
@change="setMapRole"
|
></el-input>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div
|
id="leftMenu"
|
class="left_Menu"
|
:class="{ left_main_show: !leftMenuOpen }"
|
>
|
<div class="menu_content">
|
<div
|
class="topHeader"
|
v-show="lefMenuContent"
|
>
|
<div>图层列表</div>
|
<div @click="showLeftMenu(2)"><i class="el-icon-s-fold"></i></div>
|
</div>
|
<el-divider></el-divider>
|
<div class="bottomContent">
|
<div
|
style="width: 100%"
|
v-show="lefMenuContent"
|
>
|
<el-tree
|
:data="data"
|
show-checkbox
|
node-key="id"
|
:props="defaultProps"
|
:default-expanded-keys="[1]"
|
@check-change="handleTreeNodeClick"
|
ref="tree"
|
>
|
</el-tree>
|
</div>
|
</div>
|
</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>
|
<div style="padding:1%;border:1px solid white">
|
<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>
|
</div>
|
</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
|
style="color: white"
|
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="descr"
|
label="标题"
|
> </el-table-column>
|
<el-table-column
|
property="name"
|
label="文件名称"
|
> </el-table-column>
|
<el-table-column
|
property="createName"
|
label="出图人"
|
> </el-table-column>
|
<el-table-column
|
property="createTime"
|
:formatter="formatTime"
|
label="日期"
|
>
|
</el-table-column>
|
|
<el-table-column
|
label="操作"
|
width="120"
|
>
|
<template slot-scope="scope">
|
<el-link
|
style="color: white"
|
@click.native.prevent="downloadMap(scope.$index, scope.row)"
|
:underline="false"
|
>下载</el-link>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="pagination_box">
|
<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>
|
|
<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';
|
import moment from 'moment';
|
export default {
|
data() {
|
return {
|
lefMenuContent: false,
|
leftMenuOpen: false,
|
dialogVisible: false,
|
showleftMenu: false,
|
showMapApply: false,
|
showMapList: false,
|
centerFlag: false,
|
isActive: true,
|
isMenuLayer: false,
|
rowtype: true,
|
loading: false,
|
form: {},
|
formInline: { role: '' },
|
layerform: {},
|
tableData: [],
|
exportable: [],
|
multipleSelection: [],
|
options: [
|
{ label: 'A0', value: 'A0' },
|
{ label: 'A1', value: 'A1' },
|
{ label: 'A2', value: 'A2' },
|
{ label: 'A3', value: 'A3' },
|
{ label: 'A4', value: 'A4' },
|
{ label: 'A5', value: 'A5' },
|
{ 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,
|
},
|
],
|
},
|
],
|
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();
|
this.showMapLayer();
|
},
|
methods: {
|
showMapLayer() {
|
var val = this.data[0].children;
|
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,
|
|
params: {
|
FORMAT: 'image/png',
|
VERSION: '1.1.1',
|
LAYERS: val[i].layer,
|
},
|
}),
|
});
|
mapView.addLayer(layer2);
|
std.push(val[i].id);
|
}
|
this.$refs.tree.setCheckedKeys(std);
|
},
|
showLeftMenu(res) {
|
switch (res) {
|
case 1:
|
this.leftMenuOpen = !this.leftMenuOpen;
|
break;
|
case 2:
|
this.leftMenuOpen = false;
|
break;
|
}
|
if (this.leftMenuOpen == true) {
|
setTimeout(() => {
|
this.lefMenuContent = true;
|
}, 200);
|
} else {
|
setTimeout(() => {
|
this.lefMenuContent = false;
|
}, 1100);
|
}
|
},
|
formatTime(row, column) {
|
let date = row[column.property];
|
if (date === undefined || date === null) {
|
return '';
|
}
|
return moment(parseInt(date)).format('YYYY-MM-DD HH:mm:ss');
|
},
|
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() {
|
this.showMapList = true;
|
const data = await exportSelectByPage(this.listdata);
|
|
this.exportable = data.result;
|
|
this.count = data.count;
|
},
|
getYMD() {
|
let myDate = new Date();
|
let myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
|
let myMonth = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
|
let myToday = myDate.getDate(); //获取当前日(1-31)
|
myMonth = myMonth > 9 ? myMonth : '0' + myMonth;
|
myToday = myToday > 9 ? myToday : '0' + myToday;
|
let nowDate = 'V' + myYear + myMonth + myToday;
|
return nowDate;
|
},
|
setExportMapLayer(res) {
|
var token = '?token=' + getToken();
|
var data = {
|
token: token.replace('?token=', ''),
|
title: this.form.name,
|
pageSize: this.value,
|
province: '山东省',
|
scale: '1:20万',
|
resolution: '20米',
|
date: this.getYMD(),
|
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) => {
|
this.loading = false;
|
var value = 'code = ' + rs.code + ', result = ' + rs.result;
|
if ((rs.code = 200)) {
|
this.$message({
|
message: "出图成功,请到出图列表查看并下载",
|
type: 'success',
|
});
|
this.setMapRemoveDraw();
|
} else {
|
this.loading = false;
|
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);
|
}
|
this.layerExtent = null;
|
},
|
|
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() {
|
if (this.formInline.role == '') {
|
this.formInline.role = '0';
|
}
|
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;
|
}
|
this.loading = true;
|
var val_data = [];
|
for (var i in this.tableData) {
|
val_data.push(this.tableData[i].name);
|
}
|
if (this.isActive) {
|
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.children != null) return;
|
var layers = mapView.getAllLayers();
|
for (var i in layers) {
|
var layer = layers[i];
|
if (layer.values_.name == data.label) {
|
layer.setVisible(nodes); //显示图层
|
if (nodes == true) {
|
this.arrList.push({
|
name: data.label,
|
});
|
} else {
|
this.arrList.some((item, i) => {
|
if (item.name === data.label) {
|
this.arrList.splice(i, 1);
|
}
|
});
|
}
|
}
|
}
|
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://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
|
}),
|
});
|
|
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, GaoDeLayer, GaoDeTitle],
|
view: new View({
|
center: transform([105.02, 34.9], 'EPSG:4326', 'EPSG:3857'),
|
zoom: 4,
|
projection: 'EPSG:3857',
|
}),
|
});
|
mapView.getLayers().item(1).setVisible(false);
|
mapView.getLayers().item(2).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(1).setVisible(false);
|
mapView.getLayers().item(2).setVisible(false);
|
mapView.getLayers().item(0).setVisible(true);
|
} else {
|
mapView.getLayers().item(1).setVisible(true);
|
mapView.getLayers().item(2).setVisible(true);
|
mapView.getLayers().item(0).setVisible(false);
|
}
|
},
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.MapBox {
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
.topMenu {
|
z-index: 40;
|
position: absolute;
|
background: rgba(0, 0, 0, 0.5);
|
width: 100%;
|
height: 70px;
|
padding-left: 20px;
|
}
|
.left_Menu {
|
z-index: 40;
|
width: 300px;
|
background: rgba(0, 0, 0, 0.5);
|
height: calc(100% - 220px);
|
position: fixed;
|
left: 0;
|
bottom: 5px;
|
display: flex;
|
transition: width 2s;
|
.menu_content {
|
width: 100%;
|
height: 100%;
|
.topHeader {
|
margin: 10px;
|
display: flex;
|
justify-content: space-between;
|
color: white;
|
}
|
.bottomContent {
|
width: calc(100% - 40px);
|
height: calc(93% - 40px);
|
padding: 20px;
|
display: flex;
|
justify-content: space-between;
|
}
|
.CenDiv {
|
height: 40px;
|
width: 60px;
|
margin: 2%;
|
border-radius: 5px;
|
|
align-self: flex-end;
|
}
|
.CenDiv:hover {
|
border: 1px solid #409eff;
|
}
|
.active {
|
height: 40px;
|
width: 60px;
|
background: url("../../assets/img/Layer/imgLayer2.png") no-repeat center;
|
position: absolute;
|
background-size: 100% 100%;
|
border-radius: 5px;
|
}
|
.menuLayer {
|
height: 40px;
|
width: 60px;
|
background: url("../../assets/img/Layer/imgLayer1.png") no-repeat center;
|
position: absolute;
|
background-size: 100% 100%;
|
border-radius: 5px;
|
}
|
}
|
}
|
.left_main_show {
|
width: 0px;
|
z-index: 20;
|
}
|
.mapApplay {
|
width: 40%;
|
position: absolute;
|
background: #303030;
|
z-index: 40;
|
top: 15%;
|
margin-left: 30%;
|
padding: 1%;
|
label {
|
color: white;
|
}
|
}
|
/deep/.el-form-item__label {
|
color: white;
|
line-height: 70px;
|
}
|
/deep/.el-form-item__content {
|
line-height: 70px;
|
}
|
/deep/.el-input__inner {
|
background-color: transparent !important ;
|
color: #fff;
|
border: 1px solid;
|
}
|
/deep/ .el-select .el-input__inner {
|
border-color: #fff !important;
|
}
|
/deep/ .el-divider--horizontal {
|
margin: 5px 0px;
|
}
|
/*修改table 表体的背景颜色和文字颜色*/
|
/deep/ .el-table {
|
background-color: transparent;
|
|
th,
|
td {
|
background-color: transparent;
|
}
|
.el-table__expanded-cell {
|
background-color: transparent !important;
|
}
|
|
// 表头背景色
|
th.el-table__cell {
|
background-color: #303030;
|
|
color: #fff;
|
}
|
tr > td {
|
background-color: #303030;
|
color: #fff;
|
}
|
|
// hover效果
|
tr:hover > td {
|
background-color: rgba(255, 255, 255, 0.3) !important;
|
}
|
|
tbody tr:hover {
|
background-color: rgba(255, 255, 255, 0.3) !important;
|
// text-align: center;
|
}
|
|
// 滚动条宽高
|
.el-table__body-wrapper::-webkit-scrollbar {
|
width: 5px;
|
height: 5px;
|
}
|
|
.el-table__body-wrapper::-webkit-scrollbar {
|
width: 5px;
|
/*滚动条宽度*/
|
height: 5px;
|
/*滚动条高度*/
|
}
|
/*定义滚动条轨道 内阴影+圆角*/
|
.el-table__body-wrapper::-webkit-scrollbar-track {
|
box-shadow: 0px 1px 3px #216fe6 inset;
|
/*滚动条的背景区域的内阴影*/
|
border-radius: 10px;
|
}
|
|
/*定义滑块 内阴影+圆角*/
|
.el-table__body-wrapper::-webkit-scrollbar-thumb {
|
box-shadow: 0px 1px 3px #216fe6 inset;
|
border-radius: 6px;
|
background-color: #216fe6;
|
}
|
}
|
.pagination_box {
|
margin-top: 20px;
|
/deep/.el-input__inner {
|
background-color: transparent !important;
|
border: 1px solid;
|
color: white;
|
}
|
/deep/.el-pagination__total {
|
color: white;
|
}
|
/deep/.el-pagination__jump {
|
color: white;
|
}
|
/deep/.el-pager li.active {
|
color: #409eff;
|
}
|
/deep/.el-pager li {
|
color: white;
|
background: transparent;
|
}
|
/deep/.el-pager li {
|
color: white;
|
}
|
/deep/.btn-prev {
|
background: transparent;
|
}
|
/deep/.btn-next {
|
background: transparent;
|
}
|
/deep/.btn-next i {
|
color: white;
|
}
|
/deep/.btn-prev i {
|
color: white;
|
}
|
}
|
/deep/.el-loading-spinner i {
|
color: #409eff !important;
|
}
|
}
|
</style>
|
