<template>
|
<div class="themaic">
|
<div class="left_menu" :class="{ left_main_show: !leftMenuOpen }">
|
<div class="tree-container">
|
<el-tree
|
:data="treeData"
|
show-checkbox
|
node-key="id"
|
default-expand-all
|
:props="defaultProps"
|
ref="tree"
|
@check-change="handleCheckChange"
|
>
|
</el-tree>
|
</div>
|
|
<div class="changeBaseLayer">
|
<div @click="changeMenulayer" class="CenDiv">
|
<div
|
id="cenBg"
|
v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
|
></div>
|
</div>
|
</div>
|
</div>
|
<div class="center_content">
|
<div id="MapView" class="MapView">
|
<div class="leftEchart" v-show="openEcharts">
|
<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 class="rightEchart" v-show="openEcharts">
|
>
|
<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 class="left_content">
|
<div v-show="leftMenuOpen" @click="showLeftMenu">
|
<i style="color: skyblue" class="el-icon-caret-left"></i>
|
</div>
|
<div v-show="!leftMenuOpen" @click="showLeftMenu">
|
<i style="color: skyblue" class="el-icon-caret-right"></i>
|
</div>
|
</div>
|
<div class="right_content">
|
<div v-show="!rightMenuOpen" @click="showRightMenu">
|
<i style="color: skyblue" class="el-icon-caret-left"></i>
|
</div>
|
<div v-show="rightMenuOpen" @click="showRightMenu">
|
<i style="color: skyblue" class="el-icon-caret-right"></i>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="right_menu" :class="{ right_main_show: !rightMenuOpen }">
|
<div class="content_right">
|
<ul>
|
<li
|
@click="changeRightList(item)"
|
v-for="item in rightList"
|
:class="item.id == changeSelectli ? 'changeliStyle' : ''"
|
>
|
{{ item.name }}
|
</li>
|
</ul>
|
</div>
|
<div class="bottom_right">
|
<div
|
v-for="item in rightMenu"
|
class="right_item"
|
:class="{ changeStyle: changeSelectStyle == item.id }"
|
@click="changeRightMenu(item)"
|
>
|
{{ item.name }}
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import mapsdk from '../../components/mapsdk.vue';
|
import { right_menu, right_list, image_layer } from './index.js';
|
import echart11 from '../../components/echart11.vue';
|
import echart12 from '../../components/echart12.vue';
|
import echart13 from '../../components/echart13.vue';
|
import echart14 from '../../components/echart14.vue';
|
import echart15 from '../../components/echart15.vue';
|
import echart16 from '../../components/echart16.vue';
|
import echart21 from '../../components/echart21.vue';
|
import echart22 from '../../components/echart22.vue';
|
import echart23 from '../../components/echart23.vue';
|
import echart24 from '../../components/echart24.vue';
|
import echart25 from '../../components/echart25.vue';
|
import echart26 from '../../components/echart26.vue';
|
import echart31 from '../../components/echart31.vue';
|
import echart32 from '../../components/echart32.vue';
|
import echart33 from '../../components/echart33.vue';
|
import echart34 from '../../components/echart34.vue';
|
import echart35 from '../../components/echart35.vue';
|
import echart36 from '../../components/echart36.vue';
|
import echart41 from '../../components/echart41.vue';
|
import echart42 from '../../components/echart42.vue';
|
import echart43 from '../../components/echart43.vue';
|
import echart44 from '../../components/echart44.vue';
|
import echart45 from '../../components/echart45.vue';
|
import echart46 from '../../components/echart46.vue';
|
import axios from 'axios';
|
export default {
|
components: {
|
mapsdk,
|
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 {
|
typeIndex: null,
|
leftMenuOpen: false,
|
rightMenuOpen: false,
|
changeSelectStyle: null,
|
changeSelectli: null,
|
rightMenu: [],
|
rightList: [],
|
treeData: [],
|
centerFlag: false,
|
isActive: false,
|
isMenuLayer: true,
|
openEcharts: false,
|
defaultProps: {
|
children: 'children',
|
label: 'label',
|
},
|
};
|
},
|
mounted() {
|
this.treeData = image_layer;
|
this.rightList = right_list[0];
|
this.rightMenu = right_menu;
|
this.changeSelectli = this.rightList[0].id;
|
this.changeSelectStyle = this.rightMenu[0].id;
|
this.initMapView();
|
this.addImageLayer();
|
},
|
created() {},
|
methods: {
|
changeRightList(res) {
|
this.changeSelectli = res.id;
|
if (res.layer != null) {
|
var layer = res.layer;
|
this.$refs.tree.setCheckedKeys(layer);
|
}
|
if (res.index != null) {
|
this.openEcharts = true;
|
this.typeIndex = res.index;
|
} else {
|
this.openEcharts = false;
|
this.typeIndex = null;
|
}
|
var vid = res.id;
|
|
if (vid.indexOf('b') != -1) {
|
var url = geoserverWFS + '%27' + res.name + '%27';
|
axios.get(url).then((res) => {
|
if (res.status == 200) {
|
var point = res.data.features[0].geometry.coordinates;
|
//定位
|
MapViewer.camera.flyTo({
|
//跳转视角
|
destination: new Cesium.Cartesian3.fromDegrees(
|
point[0],
|
point[1],
|
8000
|
),
|
});
|
}
|
});
|
} else if (vid.indexOf('a') != -1) {
|
//定位
|
MapViewer.camera.flyTo({
|
//跳转视角
|
destination: new Cesium.Cartesian3.fromDegrees(105.02, 34.9, 8000000),
|
});
|
} else if (vid.indexOf('c') != -1) {
|
var url = geoserverWFSLine + '%27' + res.name + '%27';
|
axios.get(url).then((res) => {
|
if (res.status == 200) {
|
if (res.data.features.length == 0) return;
|
var std = [];
|
for (var i in res.data.features) {
|
var featurLayer = res.data.features[i];
|
var path = featurLayer.geometry.coordinates[0];
|
for (var j in path) {
|
std.push(path[j][0], path[j][1], 50);
|
}
|
}
|
this.showPathLine(std);
|
}
|
});
|
}
|
},
|
showPathLine(res) {
|
sgworld.Creator.getFlyData(res, (data) => {
|
data.showPoint = false;
|
data.showLine = true;
|
data.mode = 1;
|
data.height = 1000;
|
|
// 弹窗数据
|
window.PathAnimationData = {
|
flyData: data,
|
};
|
window.PathAnimationData.winIndex = layer.open({
|
type: 2,
|
title: '路径动画',
|
shade: false,
|
area: ['352px', '690px'],
|
offset: 'r',
|
skin: 'other-class',
|
content: SmartEarthRootUrl + 'Workers/path/Path.html',
|
end: function () {
|
PathAnimationData.fly && PathAnimationData.fly.exit();
|
},
|
});
|
});
|
},
|
showLeftMenu() {
|
this.leftMenuOpen = !this.leftMenuOpen;
|
var a = 0;
|
var layer = setInterval(() => {
|
a++;
|
this.$bus.$emit('resizeEchart', true);
|
if (a == 20) {
|
clearInterval(layer);
|
this.$bus.$emit('resizeEchart', true);
|
}
|
}, 100);
|
},
|
showRightMenu() {
|
this.rightMenuOpen = !this.rightMenuOpen;
|
var a = 0;
|
var layer = setInterval(() => {
|
a++;
|
this.$bus.$emit('resizeEchart', true);
|
if (a == 20) {
|
clearInterval(layer);
|
this.$bus.$emit('resizeEchart', true);
|
}
|
}, 100);
|
},
|
changeRightMenu(res) {
|
this.rightList = right_list[parseInt(res.id) - 1];
|
this.changeSelectStyle = res.id;
|
},
|
initMapView() {
|
window.sgworld = new SmartEarth.SGWorld('MapView', {
|
licenseServer: window.sceneConfig.licenseServer,
|
});
|
|
window.MapViewer = window.sgworld._Viewer;
|
Viewer.imageryLayers._layers[0].show = false;
|
//定位
|
sgworld.Navigate.jumpTo({
|
//跳转视角
|
destination: new Cesium.Cartesian3.fromDegrees(
|
116.3911,
|
39.9115,
|
100000
|
),
|
});
|
for (var i in gaoDeBaseUrl) {
|
sgworld.Creator.createUrlTemplateImageryProvider(
|
gaoDeBaseUrl[i].label,
|
gaoDeBaseUrl[i].url,
|
'0',
|
undefined,
|
true,
|
''
|
);
|
}
|
|
//显示fps
|
MapViewer.scene.debugShowFramesPerSecond = false;
|
//导航控件
|
window.sgworld.navControl('nav', false);
|
//比例尺
|
window.sgworld.navControl('scale', false);
|
},
|
changeMenulayer() {
|
this.isActive = !this.isActive;
|
this.isMenuLayer = !this.isMenuLayer;
|
this.setLayerVisible();
|
},
|
setLayerVisible() {
|
if (this.isActive == true) {
|
MapViewer.imageryLayers._layers[1].show = true;
|
MapViewer.imageryLayers._layers[2].show = false;
|
MapViewer.imageryLayers._layers[3].show = false;
|
} else {
|
MapViewer.imageryLayers._layers[1].show = false;
|
MapViewer.imageryLayers._layers[2].show = true;
|
MapViewer.imageryLayers._layers[3].show = true;
|
}
|
},
|
addImageLayer() {
|
var val_layer = this.treeData[0].children;
|
var std = [];
|
for (var i = 0; i < val_layer.length; i++) {
|
let layerWMS = new Cesium.WebMapServiceImageryProvider({
|
url: geoServerURl,
|
layers: val_layer[i].resource,
|
parameters: {
|
transparent: true,
|
format: 'image/png',
|
},
|
});
|
layerWMS.name = val_layer[i].label;
|
window.MapViewer.imageryLayers.addImageryProvider(layerWMS);
|
std.push(val_layer[i].id);
|
}
|
this.$refs.tree.setCheckedKeys(std);
|
},
|
handleCheckChange(data, checked, indeterminate) {
|
if (data.children != null) return;
|
for (var i = 0; i < window.MapViewer.imageryLayers._layers.length; i++) {
|
var val_id =
|
window.MapViewer.imageryLayers._layers[i].imageryProvider.name;
|
if (val_id == data.label) {
|
const img_layer = window.MapViewer.imageryLayers._layers[i];
|
img_layer.show = checked;
|
}
|
}
|
},
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.themaic {
|
width: 100%;
|
height: 100%;
|
background: #303030;
|
position: relative;
|
display: flex;
|
overflow: hidden;
|
.left_menu {
|
margin: 0;
|
width: 300px;
|
height: 100%;
|
transition: width 2s;
|
background: #133a5f;
|
.tree-container {
|
margin: 10px;
|
}
|
|
.changeBaseLayer {
|
width: 100%;
|
height: 80px;
|
margin-top: calc(190% - 10px);
|
display: flex;
|
align-items: flex-end;
|
justify-content: flex-end;
|
.CenDiv {
|
height: 40px;
|
width: 60px;
|
margin: 2%;
|
border-radius: 5px;
|
}
|
.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;
|
}
|
}
|
}
|
.center_content {
|
flex: 1;
|
height: 100%;
|
.MapView {
|
width: 100%;
|
height: 100%;
|
overflow: hidden;
|
margin: 0;
|
padding: 0;
|
float: left;
|
position: relative;
|
.leftEchart {
|
z-index: 60;
|
position: absolute;
|
height: 100%;
|
width: 20%;
|
margin-left: 1.5%;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
}
|
.rightEchart {
|
z-index: 60;
|
position: absolute;
|
height: 100%;
|
width: 20%;
|
right: 0;
|
opacity: 0.5;
|
margin-right: 1.5%;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
}
|
.right_content {
|
width: 10px;
|
height: 100%;
|
z-index: 60;
|
display: flex;
|
align-items: center;
|
right: 0;
|
position: absolute;
|
padding: 0px 5px;
|
}
|
.left_content {
|
width: 10px;
|
height: 100%;
|
z-index: 60;
|
left: 0;
|
position: absolute;
|
display: flex;
|
align-items: center;
|
padding: 0px 5px;
|
}
|
}
|
}
|
.item_menu {
|
height: 100%;
|
display: flex;
|
align-items: center;
|
}
|
.left_main_show {
|
width: 0;
|
}
|
.right_menu {
|
margin: 0;
|
width: 300px;
|
height: 100%;
|
transition: width 2s;
|
background: #133a5f;
|
|
.content_right {
|
width: calc(100% -20px);
|
height: 95%;
|
li {
|
border-bottom: 1px solid white;
|
padding: 10px 10px;
|
color: white;
|
}
|
li:hover {
|
color: #409eff;
|
}
|
.changeliStyle {
|
color: #409eff;
|
}
|
}
|
|
.bottom_right {
|
width: 100%;
|
height: 5%;
|
display: flex;
|
position: relative;
|
.right_item {
|
align-items: center;
|
display: flex;
|
height: calc(100% - 2px);
|
flex-grow: 1;
|
justify-content: center;
|
font-size: 16px;
|
font-family: Source Han Sans SC;
|
font-weight: 400;
|
color: white;
|
border-bottom: 1px solid white;
|
border-top: 1px solid white;
|
border-left: 1px solid white;
|
}
|
}
|
.changeStyle {
|
background: #409eff;
|
}
|
}
|
|
.right_main_show {
|
width: 0;
|
}
|
.echart1 {
|
width: 88%;
|
height: 27%;
|
border: 3px solid rgba(204, 204, 204, 0.76);
|
border-radius: 10px;
|
background: rgba(0, 0, 0, 0.4);
|
}
|
|
/deep/ .el-tree {
|
padding-top: 15px;
|
padding-left: 10px;
|
// 不可全选样式
|
.el-tree-node {
|
.is-leaf + .el-checkbox .el-checkbox__inner {
|
display: inline-block;
|
}
|
.el-checkbox .el-checkbox__inner {
|
display: none;
|
}
|
}
|
}
|
}
|
</style>
|
