<template>
|
<div class="navigationBar">
|
<div class="menuBtn">
|
<el-button class="right-menuBtn" @click="handleMenuListShow">
|
<img src="@/assets/img/navigation/menuicon.png" />
|
</el-button>
|
</div>
|
<div class="menuList" v-show="showMenuList.show">
|
<ul>
|
<li
|
v-for="(value, key) in menuList"
|
:key="value.id"
|
@click="handleMenuClick(value.attr)"
|
@tap="handleMenuClick(key)"
|
>
|
<div class="menuItem">
|
<img
|
:src="showState[value.attr].show ? value.imgActive : value.img"
|
:class="showState[value.attr].show ? 'Active' : 'noActive'"
|
/>
|
<span>{{ value.name }}</span>
|
</div>
|
</li>
|
|
</ul>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import store from "@/utils/store2.js";
|
export default {
|
name: "NavigationBar",
|
data() {
|
return {
|
showMenuList: store.MenuList,
|
resetShowState: store.resetLink,
|
favoriteShowState: store.favorite,
|
menuList: [
|
{
|
id: "0001tc",
|
name: "图层",
|
attr: "layer",
|
img: require("@/assets/img/navigation/tuc.png"),
|
imgActive: require("@/assets/img/navigation/tucA.png"),
|
},
|
// {
|
// id: "0002my",
|
// name: "漫游",
|
// attr: "roam",
|
// img: require("@/assets/img/navigation/my.png"),
|
// imgActive: require("@/assets/img/navigation/myA.png"),
|
// },
|
// {
|
// id: '0003tj',
|
// name: '统计',
|
// attr: 'statistics',
|
// img: require("@/assets/img/navigation/tj.png"),
|
// imgActive: require("@/assets/img/navigation/tjA.png"),
|
// },
|
{
|
id: "0004sc",
|
name: "位置",
|
attr: "location",
|
img: require("@/assets/img/navigation/sc.png"),
|
imgActive: require("@/assets/img/navigation/scA.png"),
|
},
|
// {
|
// id: '0005sz',
|
// name: '设置',
|
// attr: 'setting',
|
// img: require("@/assets/img/navigation/setting.png"),
|
// imgActive: require("@/assets/img/navigation/settingA.png")
|
// },
|
// {
|
// id: '0006fw',
|
// name: '复位',
|
// img: require("@/assets/img/navigation/u53.png")
|
// },
|
// {
|
// id: '0006fw',
|
// name: '收藏',
|
// img: require("@/assets/img/navigation/u53.png")
|
// },
|
],
|
showState: {
|
layer: store.layerPanel,
|
roam: store.roamPanel,
|
statistics: store.statisticsPanel,
|
location: store.locationCollection,
|
setting: store.settingPanel,
|
},
|
};
|
},
|
methods: {
|
// 点击右上角菜单按钮
|
handleMenuListShow() {
|
// 清除定点绕飞
|
// if (window.pointerFly) {
|
// window.pointerFly.end && window.pointerFly.end();
|
// window.pointerFly = null;
|
// }
|
//清除搜索点
|
flyPoint && Viewer.entities.remove(flyPoint);
|
flyPoint = undefined;
|
this.showMenuList.show = !this.showMenuList.show;
|
store.setMenuListShow(this.showMenuList.show);
|
},
|
|
// 点击右上角菜单项
|
handleMenuClick(attr) {
|
debugger;
|
console.log('点击右上角菜单项');
|
//清除搜索点
|
flyPoint && Viewer.entities.remove(flyPoint);
|
flyPoint = undefined;
|
switch (attr) {
|
case "layer":
|
if (store.layerPanel.show) {
|
store.setLayerPanelShow(false);
|
} else {
|
store.setLayerPanelShow(true);
|
//关闭漫游
|
store.setRoamPanelShow(false);
|
store.setStatisticsPanelShow(false);
|
store.setLocationCollectionShow(false);
|
store.setSettingPanelShow(false);
|
store.setAddFavoriteShow(false);
|
}
|
break;
|
case "roam":
|
if (store.roamPanel.show) {
|
store.setRoamPanelShow(false);
|
} else {
|
store.setRoamPanelShow(true);
|
store.setLayerPanelShow(false);
|
store.setStatisticsPanelShow(false);
|
store.setLocationCollectionShow(false);
|
store.setSettingPanelShow(false);
|
store.setAddFavoriteShow(false);
|
}
|
break;
|
case "statistics":
|
if (store.statisticsPanel.show) {
|
store.setStatisticsPanelShow(false);
|
} else {
|
store.setStatisticsPanelShow(true);
|
store.setLayerPanelShow(false);
|
store.setRoamPanelShow(false);
|
store.setLocationCollectionShow(false);
|
store.setSettingPanelShow(false);
|
store.setAddFavoriteShow(false);
|
}
|
break;
|
case "location":
|
if (store.locationCollection.show) {
|
store.setLocationCollectionShow(false);
|
} else {
|
store.setLocationCollectionShow(true);
|
store.setLayerPanelShow(false);
|
store.setRoamPanelShow(false);
|
store.setStatisticsPanelShow(false);
|
store.setSettingPanelShow(false);
|
store.setAddFavoriteShow(false);
|
}
|
|
break;
|
case "setting":
|
if (store.settingPanel.show) {
|
store.setSettingPanelShow(false);
|
} else {
|
store.setSettingPanelShow(true);
|
store.setLayerPanelShow(false);
|
store.setRoamPanelShow(false);
|
store.setStatisticsPanelShow(false);
|
store.setLocationCollectionShow(false);
|
store.setAddFavoriteShow(false);
|
}
|
break;
|
case 5:
|
sgworld.Navigate.jumpTo({
|
//跳转视角
|
destination: new Cesium.Cartesian3.fromDegrees(
|
116.508368,
|
39.79346,
|
769687
|
),
|
});
|
break;
|
case 6:
|
if (store.addFavorite.show) {
|
store.setAddFavoriteShow(false);
|
} else {
|
store.setAddFavoriteShow(true);
|
store.setLayerPanelShow(false);
|
store.setRoamPanelShow(false);
|
store.setStatisticsPanelShow(false);
|
store.setLocationCollectionShow(false);
|
store.setSettingPanelShow(false);
|
}
|
break;
|
}
|
},
|
},
|
};
|
</script>
|
|
<style scoped>
|
.navigationBar {
|
position: absolute;
|
top: 0.55rem;
|
right: 0.15rem;
|
/* width: 64px; */
|
}
|
.menuBtn .el-button {
|
padding: 0 !important;
|
font-size: 0.24rem;
|
border: unset;
|
float: unset;
|
display: block;
|
background: rgba(18, 126, 255, 1);
|
}
|
.menuBtn img {
|
width: 24px;
|
margin: 3px;
|
}
|
/* .menuBtn {
|
margin-left: 25px;
|
width: 22px;
|
height: 20px;
|
background-image: url("~@/assets/img/navigation/menuicon.png");
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
} */
|
|
.menuList {
|
position: absolute;
|
width: 40px;
|
margin-top: 0.1rem;
|
right: -0.05rem;
|
background-color: white;
|
border-radius: 10px;
|
}
|
|
.menuItem {
|
width: 32px;
|
color: black;
|
margin: 0px auto;
|
margin-top: 10px;
|
margin-bottom: 7px;
|
/* padding-bottom: 7px; */
|
border-bottom: 1px solid #e8e8e9;
|
text-align: center;
|
cursor: pointer;
|
/* border-bottom: 1px solid #e8e8e9; */
|
/* pointer-events:none */
|
}
|
|
li:last-child .menuItem {
|
border: none;
|
}
|
|
img {
|
width: 24px;
|
/* height: 24px; */
|
text-align: center;
|
}
|
|
.menuItem span {
|
display: block;
|
text-align: center;
|
}
|
</style>
|
