<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>
|
</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';
|
|
export default {
|
name: 'mapView',
|
components: { layerManager, location, knowledge, lineRoaming },
|
data() {
|
return {
|
menuIsShow: false,
|
menuOption: [],
|
childMenuIsShow: true,
|
childMenuOption: [],
|
};
|
},
|
mounted() {
|
this.mapViewStart();
|
},
|
methods: {
|
mapViewStart() {
|
this.menuOption = mapData.menuData;
|
this.$nextTick(() => {
|
mapInit.Init();
|
});
|
},
|
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) {
|
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;
|
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(245, 245, 245, 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: rgba(245, 245, 245, 1);
|
color: #4ab1fc;
|
display: flex;
|
position: relative;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.menuItemBox {
|
color: #7a7a7a;
|
background: rgba(245, 245, 245, 1);
|
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>
|
