<template>
|
<div class="map_box">
|
<div class="header_box">
|
<h3 v-for="(e, i) in title" :key="i">
|
<span v-if="typeIndex == i + 1">{{ e }}</span>
|
</h3>
|
<div class="close">
|
<i class="el-icon-circle-close" @click="close"></i>
|
</div>
|
</div>
|
<div id="map"></div>
|
<div class="left">
|
<echart11 v-if="typeIndex == '1'" class="echart1"></echart11>
|
<echart12 v-if="typeIndex == '1'" class="echart1"></echart12>
|
<echart13 v-if="typeIndex == '1'" class="echart1"></echart13>
|
<echart21 v-if="typeIndex == '2'" class="echart1"></echart21>
|
<echart22 v-if="typeIndex == '2'" class="echart1"></echart22>
|
<echart23 v-if="typeIndex == '2'" class="echart1"></echart23>
|
<echart31 v-if="typeIndex == '3'" class="echart1"></echart31>
|
<echart32 v-if="typeIndex == '3'" class="echart1"></echart32>
|
<echart33 v-if="typeIndex == '3'" class="echart1"></echart33>
|
<echart44 v-if="typeIndex == '4'" class="echart1"></echart44>
|
<echart45 v-if="typeIndex == '4'" class="echart1"></echart45>
|
<echart46 v-if="typeIndex == '4'" class="echart1"></echart46>
|
</div>
|
<div
|
@click="changeMenulayer"
|
class="center CenDiv"
|
:class="{ center1: centerFlag }"
|
>
|
<div
|
id="cenBg"
|
v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
|
></div>
|
</div>
|
<div class="right">
|
<echart14 v-if="typeIndex == '1'" class="echart1"></echart14>
|
<echart15 v-if="typeIndex == '1'" class="echart1"></echart15>
|
<echart16 v-if="typeIndex == '1'" class="echart1"></echart16>
|
<echart24 v-if="typeIndex == '2'" class="echart1"></echart24>
|
<echart25 v-if="typeIndex == '2'" class="echart1"></echart25>
|
<echart26 v-if="typeIndex == '2'" class="echart1"></echart26>
|
<echart34 v-if="typeIndex == '3'" class="echart1"></echart34>
|
<echart35 v-if="typeIndex == '3'" class="echart1"></echart35>
|
<echart36 v-if="typeIndex == '3'" class="echart1"></echart36>
|
<echart41 v-if="typeIndex == '4'" class="echart1"></echart41>
|
<echart42 v-if="typeIndex == '4'" class="echart1"></echart42>
|
<echart43 v-if="typeIndex == '4'" class="echart1"></echart43>
|
</div>
|
</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 { Image as ImageLayer, Tile as TileLayer } from "ol/layer"
|
import echart11 from "./echart11.vue";
|
import echart12 from "./echart12.vue";
|
import echart13 from "./echart13.vue";
|
import echart14 from "./echart14.vue";
|
import echart15 from "./echart15.vue";
|
import echart16 from "./echart16.vue";
|
import echart21 from "./echart21.vue";
|
import echart22 from "./echart22.vue";
|
import echart23 from "./echart23.vue";
|
import echart24 from "./echart24.vue";
|
import echart25 from "./echart25.vue";
|
import echart26 from "./echart26.vue";
|
import echart31 from "./echart31.vue";
|
import echart32 from "./echart32.vue";
|
import echart33 from "./echart33.vue";
|
import echart34 from "./echart34.vue";
|
import echart35 from "./echart35.vue";
|
import echart36 from "./echart36.vue";
|
import echart41 from "./echart41.vue";
|
import echart42 from "./echart42.vue";
|
import echart43 from "./echart43.vue";
|
import echart44 from "./echart44.vue";
|
import echart45 from "./echart45.vue";
|
import echart46 from "./echart46.vue";
|
export default {
|
name: "webmap",
|
props: ["typeIndex"],
|
components: {
|
echart11,
|
echart12,
|
echart13,
|
echart14,
|
echart15,
|
echart16,
|
echart21,
|
echart22,
|
echart23,
|
echart24,
|
echart25,
|
echart26,
|
echart31,
|
echart32,
|
echart33,
|
echart34,
|
echart35,
|
echart36,
|
echart41,
|
echart43,
|
echart42,
|
echart44,
|
echart45,
|
echart46,
|
},
|
data() {
|
return {
|
map: null,
|
wmsLayer: null,
|
layerFlag: null,
|
vectorLayer: null,
|
imageLayer: null,
|
centerFlag: false,
|
isActive: true,
|
isMenuLayer: false,
|
title: [
|
"管道基础数据专题图",
|
"用户使用情况专题图",
|
"项目基本情况专题图",
|
"项目进度管理专题图",
|
"全球项目分布专题图",
|
"全国管网分布专题图",
|
"全国项目足迹专题图",
|
],
|
};
|
},
|
watch: {
|
typeIndex: {
|
immediate: true,
|
handler(val) {
|
if (val) {
|
this.changeFlag(val);
|
if (this.map != null) {
|
this.getWmsLayerUrl(val);
|
}
|
}
|
},
|
},
|
},
|
mounted() {
|
this.initMap();
|
},
|
methods: {
|
changeMenulayer() {
|
this.isActive = !this.isActive;
|
this.isMenuLayer = !this.isMenuLayer;
|
this.setLayerVisible();
|
},
|
setLayerVisible() {
|
if (this.isActive == true) {
|
this.vectorLayer.setVisible(true);
|
this.imageLayer.setVisible(false);
|
} else {
|
this.vectorLayer.setVisible(false);
|
this.imageLayer.setVisible(true);
|
}
|
},
|
close() {
|
this.$emit("close", false);
|
},
|
changeFlag(res) {
|
this.layerFlag = res;
|
if (this.layerFlag > 4) {
|
this.centerFlag = true;
|
} else {
|
this.centerFlag = false;
|
}
|
},
|
// 初始化地图
|
initMap() {
|
this.vectorLayer = 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}",
|
}),
|
});
|
this.imageLayer = 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}",
|
}),
|
});
|
this.map = new Map({
|
target: "map",
|
layers: [this.imageLayer, this.vectorLayer],
|
view: new View({
|
center: transform([105.02, 34.9], "EPSG:4326", "EPSG:3857"),
|
zoom: 4,
|
projection: "EPSG:3857",
|
}),
|
});
|
if (this.wmsLayer == null) {
|
this.getWmsLayerUrl(this.layerFlag);
|
}
|
},
|
getWmsLayerUrl(res) {
|
this.isActive = true;
|
this.isMenuLayer = false;
|
this.setLayerVisible();
|
if (this.wmsLayer != null) {
|
this.map.removeLayer(this.wmsLayer);
|
this.wmsLayer = null;
|
}
|
var value;
|
if (res == 3 || res == 4 || res == 7) {
|
value = "xmzj";
|
} else if (res == 1 || res == 2 || res == 6) {
|
value = "lfgd";
|
} else if (res == 5) {
|
value = "qqxm";
|
}
|
this.wmsLayer = new Image({
|
source: new ImageWMS({
|
ratio: 1,
|
url: "http://192.168.20.39:9055/gisserver/wmsserver/" + value,
|
crossOrigin: "anonymous",
|
//serverType: 'geoserver',
|
params: {
|
VERSION: "1.3.0",
|
FORMAT: "image/png",
|
LAYERS: "",
|
srs: "EPSG:900913",
|
tiled: true,
|
styles: "",
|
},
|
}),
|
});
|
this.map.addLayer(this.wmsLayer);
|
},
|
},
|
beforeDestroy() {},
|
};
|
</script>
|
|
<style scoped lang="less">
|
.map_box {
|
padding: 0;
|
margin: 0;
|
width: 100%;
|
height: 100%;
|
position: relative;
|
}
|
|
.header_box {
|
height: 40px;
|
background: rgb(59, 77, 110);
|
padding: 0 20px;
|
display: flex;
|
|
align-items: center;
|
|
h3 {
|
color: #fff;
|
}
|
|
.close {
|
margin-left: auto;
|
color: #fff;
|
|
i {
|
cursor: pointer;
|
}
|
}
|
}
|
|
#map {
|
padding: 0;
|
margin: 0;
|
width: 100%;
|
height: calc(100% - 40px);
|
}
|
|
.echart1 {
|
width: 88%;
|
height: 28%;
|
border: 3px solid rgba(204, 204, 204, 0.76);
|
border-radius: 10px;
|
background: rgba(0, 0, 0, 0.4);
|
// position: absolute;
|
// top: 40px;
|
// right: 0;
|
}
|
|
.left {
|
position: absolute;
|
top: 50px;
|
left: 0;
|
height: calc(100% - 50px);
|
width: 20%;
|
|
z-index: 100;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
}
|
.center {
|
right: 21%;
|
}
|
.CenDiv {
|
position: absolute;
|
bottom: 1%;
|
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 {
|
right: 1%;
|
}
|
.right {
|
position: absolute;
|
top: 50px;
|
right: 0;
|
width: 20%;
|
height: calc(100% - 50px);
|
// background: rgba(0, 0, 0, 0.4);
|
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>
|
