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