<template>
|
<div class="mapView">
|
<div id="sdkContainer">
|
<div class="menuBox">
|
<!-- 一级菜单展示效果 -->
|
<div class="menuContent" v-show="!menuIsShow" :class="{ menuActive: menuIsShow }">
|
<div class="menuItemBox" :id="item.id" v-for="(item, index) in menuOption" :key="index">
|
<!-- -->
|
<el-dropdown @command="handleCommand">
|
<span class="el-dropdown-link">
|
{{ item.name }}
|
<i v-show="item.children" class="el-icon-arrow-down el-icon--right"></i>
|
</span>
|
<div v-if="item.children">
|
<el-dropdown-menu v-show="item.children" slot="dropdown">
|
<el-dropdown-item style="text-align: center" :command="res"
|
v-for="(res, key) in item.children" :key="key">{{ res.name }}</el-dropdown-item>
|
</el-dropdown-menu>
|
</div>
|
</el-dropdown>
|
</div>
|
<!-- 关闭菜单事件 -->
|
<div class="closeMenu" @click="setMenuClose">
|
<i :size="20" class="el-icon-d-arrow-left"></i>
|
</div>
|
</div>
|
<!-- 菜单展开事件 -->
|
<div v-show="menuIsShow" @click="menuIsShow = !menuIsShow" class="rightMenu">
|
<i :size="20" class="el-icon-d-arrow-left"></i>
|
</div>
|
</div>
|
<!-- 图层管理 -->
|
<layer-manager ref="layerManager"></layer-manager>
|
<!-- 坐标定位 -->
|
<location ref="location"></location>
|
<!-- 知识图谱 -->
|
<knowledge ref="knowledge"></knowledge>
|
<!-- 线路漫游 -->
|
<lineRoaming ref="lineRoaming"></lineRoaming>
|
<!-- 地下模式 -->
|
<undergroundMode ref="undergroundMode"></undergroundMode>
|
<!-- 数据分析 -->
|
<dataAnalysis ref="dataAnalysis"></dataAnalysis>
|
<!-- 数据统计 -->
|
<dataStatistics ref="dataStatistics"></dataStatistics>
|
<!-- 属性信息 -->
|
<attributeInfo ref="attributeInfo"></attributeInfo>
|
<map-info :childObj="childObj" ref="mapInfo"></map-info>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import mapInit from '@/assets/js/mapSdk/index.js';
|
import mapData from '@/assets/js/mapSdk/mapData.js';
|
import layerManager from './layerManager.vue';
|
import menuManager from '@/assets/js/mapSdk/menuManager.js';
|
import location from './location.vue';
|
import knowledge from './knowledge.vue';
|
import lineRoaming from './lineRoaming.vue';
|
import { layer_selectAll } from "@/api/mapView/map.js";
|
import configTools from '@/assets/js/configTools';
|
import store from "@/store";
|
import mapServer from '@/assets/js/mapSdk/mapServe';
|
import undergroundMode from './undergroundMode.vue';
|
import dataAnalysis from './dataAnalysis.vue';
|
import dataStatistics from './dataStatistics.vue'
|
import attributeInfo from './attributeInfo.vue';
|
import mapInfo from './mapInfo.vue';
|
export default {
|
name: 'mapView',
|
components: { layerManager, location, knowledge, lineRoaming, undergroundMode, dataAnalysis, dataStatistics, attributeInfo, mapInfo },
|
data() {
|
return {
|
menuIsShow: false,
|
menuOption: [],
|
childMenuIsShow: true,
|
childMenuOption: [],
|
childObj: [],
|
};
|
},
|
mounted() {
|
this.mapViewStart();
|
this.$busEvent.$on('CHANGE_MAPINFO', res => {
|
|
this.setMapInfo(res)
|
|
});
|
|
},
|
beforeDestroy() {
|
this.$store.dispatch('mapLayers/changeLayerTree', [])
|
this.$store.dispatch('mapLayers/changeDefaultLayer', [])
|
},
|
|
|
methods: {
|
setMapInfo(res) {
|
// console.log(res);
|
if (res.length > 0) {
|
this.childObj = res;
|
setTimeout(() => {
|
this.$refs && this.$refs.mapInfo && this.$refs.mapInfo.open();
|
}, 200);
|
|
|
}
|
|
},
|
mapViewStart() {
|
this.menuOption = mapData.menuData;
|
this.$nextTick(() => {
|
mapInit.Init();
|
setTimeout(() => {
|
if(config.baseModel.url){
|
mapServer.addLayer(config.baseModel);
|
}
|
this.getSelectLayers();
|
}, 500);
|
|
});
|
},
|
getSelectLayers() {
|
layer_selectAll().then(response => {
|
if (response.data.code != 200) return
|
const defaultLayer = [];
|
const val = response.data.result.filter(item => {
|
item.checked = false;
|
if (item.type == 2 && item.isShow == 1) {
|
item.checked = true;
|
mapServer.addLayer(item)
|
defaultLayer.push(item.id)
|
}
|
return item;
|
})
|
this.$store.dispatch('mapLayers/changeDefaultLayer', defaultLayer)
|
var obj = configTools.getTreeData(val)
|
this.$store.dispatch('mapLayers/changeLayerTree', obj)
|
})
|
},
|
setMenuClose() {
|
this.menuIsShow = !this.menuIsShowx;
|
},
|
setMenuClick(res) {
|
if (res.children) return;
|
menuManager.init(res);
|
},
|
handleCommand(command) {
|
this.setPopCloseAll();
|
const obj = menuManager.init(command);
|
if (obj) {
|
this.setPopShow(obj);
|
}
|
},
|
setPopCloseAll() {
|
this.$refs && this.$refs.layerManager && this.$refs.layerManager.close();
|
this.$refs && this.$refs.location && this.$refs.location.close();
|
this.$refs && this.$refs.knowledge && this.$refs.knowledge.close();
|
},
|
setPopShow(response) {
|
console.log(response);
|
switch (response) {
|
case '图层管理':
|
this.$refs && this.$refs.layerManager && this.$refs.layerManager.open();
|
break;
|
case '坐标定位':
|
this.$refs && this.$refs.location && this.$refs.location.open();
|
break;
|
case '知识图谱':
|
this.$refs && this.$refs.knowledge && this.$refs.knowledge.open();
|
break;
|
case '线路漫游':
|
this.$refs && this.$refs.lineRoaming && this.$refs.lineRoaming.open();
|
break;
|
case '地下模式':
|
this.$refs && this.$refs.undergroundMode && this.$refs.undergroundMode.open();
|
break;
|
case '数据分析':
|
this.$refs && this.$refs.dataAnalysis && this.$refs.dataAnalysis.open();
|
break;
|
case '属性信息':
|
this.$refs && this.$refs.attributeInfo && this.$refs.attributeInfo.open();
|
break;
|
case '数据统计':
|
this.$refs && this.$refs.dataStatistics && this.$refs.dataStatistics.open();
|
break;
|
default:
|
break;
|
}
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.mapView {
|
width: calc(100% - 20px);
|
height: calc(100% - 20px);
|
position: absolute;
|
margin: 10px;
|
border-radius: 5px;
|
|
.menuBox {
|
position: absolute;
|
z-index: 40;
|
top: 20px;
|
right: 2px;
|
border-radius: 0 6px 6px 0;
|
font-family: microsoft yahei;
|
|
.menuContent {
|
display: flex;
|
height: 40px;
|
border: 1px solid rgb(245, 245, 245);
|
border-radius: 5px 5px 5px 5px;
|
}
|
|
.menuActive {
|
width: 0px;
|
transition: width 10s linear 10s;
|
-webkit-transition: width 10s linear 10s;
|
}
|
|
.rightMenu {
|
width: 30px;
|
height: 40px;
|
background: rgba(255, 255, 255, 1);
|
border: 1px solid rgb(245, 245, 245);
|
color: #4ab1fc;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
border-radius: 5px;
|
}
|
|
.closeMenu {
|
width: 30px;
|
height: 100%;
|
background: rgb(255, 255, 255);
|
color: #4ab1fc;
|
display: flex;
|
position: relative;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.menuItemBox {
|
color: #7a7a7a;
|
background: rgb(255, 255, 255);
|
line-height: 40px;
|
padding: 0px 10px;
|
font-size: 14px;
|
}
|
|
.menuItemBox:hover {
|
color: #4ab1fc;
|
}
|
}
|
|
.childMenuBox {
|
padding: 10px;
|
width: auto;
|
color: #7a7a7a;
|
background: rgba(245, 245, 245, 1);
|
position: absolute;
|
z-index: 41;
|
top: 123px;
|
border-radius: 3px;
|
min-width: 20px;
|
transform: translate(-100%, 0);
|
text-align: center;
|
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
|
|
div {
|
font-family: microsoft yahei;
|
font-size: 12px;
|
}
|
|
div:hover {
|
color: #4ab1fc;
|
}
|
}
|
}
|
</style>
|
