<template>
|
<div
|
id="mapView"
|
class="MapBox "
|
v-loading="loading"
|
element-loading-background="rgba(0, 0, 0, 0.8)"
|
>
|
<div class="topMenu box_divm">
|
<el-form
|
:inline="true"
|
:model="formInline"
|
class="demo-form-inline"
|
>
|
<el-form-item>
|
<el-link
|
@click="showLeftMenu(1)"
|
:underline="false"
|
title="图层列表"
|
><i class="el-icon-s-operation"></i></el-link>
|
</el-form-item>
|
<el-form-item>
|
<el-select
|
:popper-append-to-body="false"
|
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
|
@click="setMapAddDraw()"
|
:underline="false"
|
><i class="el-icon-edit-outline"></i>绘制</el-link>
|
</el-form-item>
|
<el-form-item>
|
<el-link
|
:disabled="layerExtent == null"
|
@click="setMapRemoveDraw()"
|
:underline="false"
|
title="图层列表"
|
><i class="el-icon-delete"></i>清除</el-link>
|
</el-form-item>
|
|
<el-form-item>
|
<el-link
|
@click="showMapApply = true"
|
:underline="false"
|
:disabled="layerExtent == null"
|
>出图申请
|
</el-link>
|
</el-form-item>
|
<el-form-item>
|
<el-link
|
@click="getShowMapList"
|
:underline="false"
|
>出图列表</el-link>
|
</el-form-item>
|
<el-form-item>
|
<el-link
|
@click="changeMenulayer"
|
:underline="false"
|
v-show="isActive"
|
>影像</el-link>
|
<el-link
|
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 box_divm">
|
<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="treeData"
|
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 box_divm"
|
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%; ">
|
<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>
|
|
<el-dialog
|
title="出图列表"
|
:visible.sync="showMapList"
|
>
|
<el-table
|
ref="singleTable"
|
:data="exportable"
|
style="width: 100%"
|
border
|
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
|
@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, 50, 100]"
|
:page-size="listdata.pageSize"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="count"
|
>
|
</el-pagination>
|
</div>
|
</el-dialog>
|
<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 { OverviewMap, defaults as defaultControls, FullScreen, ScaleLine, Rotate } from "ol/control.js"
|
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, perms_selectLayers } from "../../api/api.js"
|
import moment from "moment"
|
import { image_layer } from "../../assets/js/index.js"
|
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",
|
treeData: [],
|
arrList: [],
|
layername: [
|
1, 2, 5, 13, 15, 16, 31
|
],
|
defaultProps: {
|
children: "children",
|
label: "cnName",
|
},
|
draw: null,
|
vector: null,
|
source: null,
|
layerExtent: null,
|
listdata: {
|
name: null,
|
pageSize: 10,
|
pageIndex: 1,
|
},
|
count: 0,
|
|
}
|
},
|
|
mounted() {
|
this.LayerStart()
|
this.initMap()
|
this.showMapLayer()
|
},
|
methods: {
|
setTreeData(source) {
|
let cloneData = JSON.parse(JSON.stringify(source)); // 对源数据深度克隆
|
return cloneData.filter((father) => {
|
// 循环所有项
|
let branchArr = cloneData.filter((child) => father.id == child.pid); // 对比ID，分别上下级菜单，并返回数据
|
branchArr.length > 0 ? (father.children = branchArr) : ""; // 给父级添加一个children属性，并赋值
|
// 属于同一对象问题，例如：令 a=b、c=1 ，然后再令 b.c=c ， 那么 a.c=b.c=c=1 ；同理，后续令 c.d=2 ,那么 a.c.d 也是=2；
|
// 由此循环多次后，就能形成相应的树形数据结构
|
return father.pid == 0; // 返回一级菜单
|
});
|
},
|
async LayerStart() {
|
const data = await perms_selectLayers()
|
if (data.code != 200) {
|
return this.$message.error("图层列表查询失败")
|
}
|
var res = data.result;
|
|
var val = [];
|
var std = [];
|
for (var i in res) {
|
var str = res[i];
|
|
if (str.type == 1 && this.layername.indexOf(str.id) != -1) {
|
val.push(str)
|
} else if (str.url != null && str.type == 2 && this.layername.indexOf(str.pid) != -1) {
|
if (str.isShow == 1) {
|
|
std.push(str.id)
|
this.showMapLayer(str)
|
this.tableData.push({
|
name: str.cnName,
|
ename: str.enName,
|
})
|
}
|
val.push(str)
|
}
|
}
|
var res = this.setTreeData(val);
|
this.treeData = res;
|
this.$refs.tree.setCheckedKeys(std)
|
},
|
showMapLayer(val) {
|
if (val == undefined) return;
|
if (val.serveType == "WMS") {
|
var layer2 = new Image({
|
name: val.cnName,
|
source: new ImageWMS({
|
crossOrigin: "anonymous",
|
url: geoServerURl,
|
|
params: {
|
FORMAT: "image/png",
|
VERSION: "1.1.1",
|
LAYERS: val.url,
|
},
|
}),
|
})
|
mapView.addLayer(layer2)
|
}
|
|
},
|
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 + "/export/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].ename)
|
}
|
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]
|
var str = 0
|
if (layer.values_.name == data.cnName) {
|
layer.setVisible(nodes) //显示图层
|
if (nodes == true) {
|
str++
|
this.tableData.push({
|
name: data.cnName,
|
ename: data.enName
|
})
|
} else {
|
this.tableData.some((item, i) => {
|
if (item.name === data.cnName) {
|
this.tableData.splice(i, 1)
|
}
|
})
|
}
|
}
|
}
|
|
if (str == 0 && nodes == true) {
|
this.showMapLayer(data)
|
// this.tableData.push({
|
// name: data.cnName,
|
// ename: data.enName,
|
// })
|
}
|
|
// 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",
|
}),
|
controls: defaultControls().extend([new FullScreen(), new ScaleLine(), new Rotate()]),
|
})
|
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;
|
|
width: 100%;
|
height: 70px;
|
padding-left: 20px;
|
}
|
.left_Menu {
|
z-index: 40;
|
width: 300px;
|
|
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;
|
}
|
.bottomContent {
|
width: calc(100% - 40px);
|
height: calc(93% - 40px);
|
padding: 20px;
|
display: flex;
|
justify-content: space-between;
|
overflow: auto;
|
}
|
.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;
|
|
z-index: 40;
|
top: 15%;
|
margin-left: 30%;
|
padding: 1%;
|
}
|
/deep/.el-form-item {
|
margin-top: 10px;
|
}
|
/deep/ .el-tree-node {
|
.is-leaf + .el-checkbox .el-checkbox__inner {
|
display: inline-block;
|
}
|
|
.el-checkbox .el-checkbox__inner {
|
display: none;
|
}
|
}
|
}
|
</style>
|
