<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) {
|
MapViewer.imageryLayers.get(2).show = true;
|
MapViewer.imageryLayers.get(1).show = false;
|
} else {
|
MapViewer.imageryLayers.get(2).show = false;
|
MapViewer.imageryLayers.get(1).show = true;
|
}
|
// 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',
|
// }),
|
// });
|
//地图初始化
|
window.SG = new SmartEarth.SGWorld('map', {
|
licenseServer: window.sceneConfig.licenseServer,
|
});
|
|
window.MapViewer = window.SG._Viewer;
|
|
//定位
|
SG.Navigate.jumpTo({
|
//跳转视角
|
destination: new Cesium.Cartesian3.fromDegrees(105.02, 34.9, 8000000),
|
});
|
|
MapViewer.imageryLayers.addImageryProvider(
|
new Cesium.WebMapTileServiceImageryProvider({
|
url: 'http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=94a34772eb88317fcbf8428e10448561',
|
layer: 'tdtBasicLayer',
|
style: 'default',
|
format: 'image/jpeg',
|
tileMatrixSetID: 'GoogleMapsCompatible',
|
show: false,
|
})
|
);
|
|
MapViewer.imageryLayers.addImageryProvider(
|
new Cesium.WebMapTileServiceImageryProvider({
|
url: 'http://t0.tianditu.com/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=94a34772eb88317fcbf8428e10448561',
|
layer: 'tdtVecBasicLayer',
|
style: 'default',
|
format: 'image/jpeg',
|
tileMatrixSetID: 'GoogleMapsCompatible',
|
show: false,
|
})
|
);
|
MapViewer.imageryLayers.addImageryProvider(
|
new Cesium.WebMapTileServiceImageryProvider({
|
url: 'http://t0.tianditu.com/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=94a34772eb88317fcbf8428e10448561',
|
layer: 'tdtAnnoLayer',
|
style: 'default',
|
format: 'image/jpeg',
|
tileMatrixSetID: 'GoogleMapsCompatible',
|
})
|
);
|
if (this.wmsLayer == null) {
|
this.getWmsLayerUrl(this.layerFlag);
|
}
|
},
|
getWmsLayerUrl(res) {
|
this.isActive = true;
|
this.isMenuLayer = false;
|
this.setLayerVisible();
|
if (this.wmsLayer != null) {
|
this.wmsLayer.deleteObject();
|
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';
|
}
|
var urls = gisServerUrl + '/wmsserver/' + value;
|
|
this.wmsLayer = SG.Creator.createImageryProvider(
|
'gisserver',
|
'wms',
|
{
|
url: urls,
|
layers: '',
|
parameters: {
|
format: 'image/png',
|
transparent: true,
|
},
|
},
|
'0',
|
undefined,
|
true,
|
''
|
);
|
//
|
// this.wmsLayer = new Image({
|
// source: new ImageWMS({
|
// ratio: 1,
|
// url: gisServerUrl + '/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: #454545;
|
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>
|
