6 changed files with 215 additions and 17 deletions
@ -0,0 +1,158 @@ |
|||
<template> |
|||
<div class="showhideControl"> |
|||
<a-dropdown :trigger="['click']"> |
|||
<template #overlay> |
|||
<a-menu> |
|||
<a-menu-item key="1"> |
|||
<label for="ship-switch" style="margin-top: 2px">船只模型：</label> |
|||
<a-switch id="ship-switch" v-model:checked="shipShow" @change="changeShipShow" checked-children="显示" un-checked-children="隐藏" /> |
|||
</a-menu-item> |
|||
<a-menu-item key="1"> |
|||
<label for="track-switch" style="margin-top: 2px">船只轨迹：</label> |
|||
<a-switch id="track-switch" v-model:checked="trackShow" @change="changeTrackShow" checked-children="显示" un-checked-children="隐藏" /> |
|||
</a-menu-item> |
|||
</a-menu> |
|||
</template> |
|||
<a-button> 地图元素显隐 <CaretUpOutlined /></a-button> |
|||
</a-dropdown> |
|||
</div> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { defineComponent, ref, nextTick, watch } from 'vue'; |
|||
import { CaretUpOutlined } from '@ant-design/icons-vue'; |
|||
import $mitt from '@/utils/earthMap/mitt'; |
|||
export default defineComponent({ |
|||
setup() { |
|||
// 船只显隐 |
|||
const shipShow = ref<boolean>(true); |
|||
// 轨迹显隐 |
|||
const trackShow = ref<boolean>(true); |
|||
// 船只列表 |
|||
const shipList = ref([]); |
|||
// 轨迹列表 |
|||
const trackList = ref([]); |
|||
// 获取船只信息 |
|||
function getShipInfo() { |
|||
// 地图所有场景元素 |
|||
let earthMapElements = window.$earth.getAllObjects(); |
|||
// 获取地图上船只信息 |
|||
let earthMapShips = earthMapElements.filter((item) => item.name && item.name.includes('船')); |
|||
if (earthMapShips.length > 0) { |
|||
// 判断每个船只的显隐状态 初始化按钮状态 |
|||
shipShow.value = earthMapShips.every((item) => item.show === true); |
|||
// 赋值船只列表 |
|||
shipList.value = earthMapShips; |
|||
} else { |
|||
console.log('当前场景没有船只'); |
|||
} |
|||
} |
|||
// 获取轨迹线信息 |
|||
function getTrackInfo() { |
|||
// 地图所有场景元素 |
|||
let earthMapElements = window.$earth.getAllObjects(); |
|||
// 获取地图上轨迹信息 |
|||
let earthMapTracks = earthMapElements.filter((item) => item.name && item.name.includes('轨迹线')); |
|||
if (earthMapTracks.length > 0) { |
|||
// 判断每条轨迹的显隐状态 初始化按钮状态 |
|||
trackShow.value = earthMapTracks.every((item) => item.show === true); |
|||
// 赋值船只列表 |
|||
trackList.value = earthMapTracks; |
|||
} else { |
|||
console.log('当前场景没有轨迹线'); |
|||
} |
|||
} |
|||
// 显隐所有船的模型 |
|||
function changeShipShow(e) { |
|||
if (shipList.value.length > 0) { |
|||
if (!e) { |
|||
// 改变状态 |
|||
trackShow.value = false; |
|||
// 控制显隐 |
|||
trackList.value.forEach((item: any) => { |
|||
item.show = false; |
|||
}); |
|||
} |
|||
// 改变状态 |
|||
shipShow.value = e; |
|||
shipList.value.forEach((item: any) => { |
|||
// 控制显隐 |
|||
item.show = e; |
|||
}); |
|||
} else { |
|||
console.log('当前场景没有船只'); |
|||
} |
|||
} |
|||
// 显隐所有轨迹线 |
|||
function changeTrackShow(e) { |
|||
if (trackList.value.length > 0) { |
|||
if (shipShow.value) { |
|||
// 改变状态 |
|||
trackShow.value = e; |
|||
trackList.value.forEach((item: any) => { |
|||
// 控制显隐 |
|||
item.show = e; |
|||
}); |
|||
} else { |
|||
trackShow.value = false; |
|||
console.log('请先打开显示船只模型'); |
|||
} |
|||
} else { |
|||
console.log('当前场景没有船只'); |
|||
} |
|||
} |
|||
|
|||
// 监听轨迹线按钮状态 |
|||
watch(trackShow, (newValue, _oldValue) => { |
|||
// 发送轨迹线按钮状态 |
|||
$mitt.emit('trackAllChange', newValue); |
|||
}); |
|||
|
|||
// 监听船只模型按钮状态 |
|||
watch(shipShow, (newValue, _oldValue) => { |
|||
// 发送轨迹线按钮状态 |
|||
$mitt.emit('shipAllChange', newValue); |
|||
}); |
|||
|
|||
// 监听mqtt消息 |
|||
$mitt.on('deviceCmd', () => { |
|||
nextTick(() => { |
|||
// 获取船只信息 |
|||
getShipInfo(); |
|||
// 获取轨迹线信息 |
|||
getTrackInfo(); |
|||
}); |
|||
}); |
|||
// 监听轨迹线响应 |
|||
$mitt.on('trackShowChange', (e: boolean) => { |
|||
if (!e) { |
|||
// 改变按钮状态 |
|||
trackShow.value = e; |
|||
} else { |
|||
// 判断每条轨迹的显隐状态 更改按钮状态 |
|||
trackShow.value = window.$earth |
|||
.getAllObjects() |
|||
.filter((item) => item.name && item.name.includes('轨迹线')) |
|||
.every((item) => item.show === true); |
|||
} |
|||
}); |
|||
|
|||
return { |
|||
shipShow, |
|||
trackShow, |
|||
changeShipShow, |
|||
changeTrackShow, |
|||
}; |
|||
}, |
|||
components: { |
|||
CaretUpOutlined, |
|||
}, |
|||
}); |
|||
</script> |
|||
<style lang="less" scoped> |
|||
.showhideControl { |
|||
position: absolute; |
|||
left: 0; |
|||
bottom: 30px; |
|||
z-index: 99999; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue