<template>
|
<div class="rightMenuBox">
|
<ul>
|
<li>显示此处经纬度</li>
|
<li>显示当前视角</li>
|
<li v-show="deepDetection">开启深度检测</li>
|
<li i
|
v-show="!deepDetection">关闭深度检测</li>
|
<li id="generate-sql">
|
<div class="link">
|
<span><i class="iconfont icon-fuzhi"></i>特效效果</span>
|
<span>></span>
|
</div>
|
<div class="submenu menu"
|
id="right-menu2">
|
<ul>
|
<li>开启雾天</li>
|
<li>开启雨天</li>
|
<li>开启雪天</li>
|
<li>关闭天气</li>
|
</ul>
|
</div>
|
</li>
|
<li id="copy">
|
<div class="link">
|
<span><i class="iconfont icon-fuzhi"></i>视角切换</span>
|
<span>></span>
|
</div>
|
<div class="submenu menu"
|
id="right-menu3">
|
<ul>
|
<li>绕此处环绕</li>
|
<li>关闭绕此处环绕</li>
|
<li>定位到此处</li>
|
</ul>
|
</div>
|
</li>
|
</ul>
|
</div>
|
</template>
|
<script></script>
|
<script lang="ts" setup>
|
import { ref, onMounted, reactive, defineProps, defineEmits, watch } from "vue";
|
import righManager from "@/assets/js/map/righManager";
|
import store from "../../store";
|
import rightManager from "@/assets/js/map/righManager";
|
|
const deepDetection = ref(true);
|
|
const setMenuStart = () => {
|
var itemli = document.getElementsByTagName("li");
|
for (var i = 0; i < itemli.length; i++) {
|
itemli[i].onclick = function (e) {
|
store.state.rightMenuIndex = e.target.innerHTML;
|
};
|
}
|
};
|
const setMenuClick = (res) => {
|
if (res == "开启深度检测") {
|
deepDetection.value = false;
|
} else if (res == "关闭深度检测") {
|
deepDetection.value = true;
|
}
|
rightManager.setMenuClick(res);
|
store.state.rightMenuIndex = null;
|
};
|
onMounted(() => {
|
righManager.addEvent();
|
setMenuStart();
|
});
|
watch(
|
() => store.state.rightMenuIndex,
|
(newVal, oldVal) => {
|
if (newVal) {
|
setMenuClick(newVal);
|
}
|
},
|
{ immediate: true, deep: true }
|
);
|
</script>
|
|
<style lang="less" scoped>
|
.rightMenuBox {
|
position: absolute;
|
z-index: 40;
|
background: rgba(35, 47, 42, 0.7);
|
border: 1px solid #30bcff;
|
li {
|
list-style: none;
|
color: white;
|
padding: 10px;
|
border-bottom: 1px solid gray;
|
font-size: 14px;
|
}
|
li:hover {
|
color: #30bcff;
|
}
|
.link {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
.submenu {
|
padding: 0;
|
left: 119px;
|
margin-top: -30px;
|
position: absolute;
|
width: 140px;
|
background: rgba(35, 47, 42, 0.7);
|
border: 1px solid #30bcff;
|
display: none;
|
}
|
}
|
</style>
|
