szdot
e7506728af
【原 因】：完成集群飞机控制主页面 和 控制组件 【过 程】： 【影 响】： # 类型 包含: # feat：新功能（feature） # fix：修补bug # docs：文档（documentation） # style： 格式（不影响代码运行的变动） # refactor：重构（即不是新增功能，也不是修改bug的代码变动） # test：增加测试 # chore：构建过程或辅助工具的变动
98 lines
2.5 KiB
Vue
98 lines
2.5 KiB
Vue
<template>
|
|
<div class="h-100">
|
|
<map-box ref="mapbox" @map-ready="onMapReady">
|
|
<template #content>
|
|
<div v-show="mapReady">
|
|
<!-- <Statistics :plane="plane" /> -->
|
|
</div>
|
|
</template>
|
|
</map-box>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import MapBox from '@/components/MapBox'
|
|
import { waitForMapCanvasReady } from '@/utils'
|
|
// import Statistics from '@/components/Statistics'
|
|
|
|
export default {
|
|
name: 'Home',
|
|
data () {
|
|
return {
|
|
mapReady: false// 地图加载完成后 回调时 设置此值 让地图组件插槽内容 滞后显示
|
|
}
|
|
},
|
|
components: {
|
|
MapBox
|
|
// Statistics
|
|
},
|
|
computed: {
|
|
airList () {
|
|
return this.$store.state.airList
|
|
},
|
|
/**
|
|
* @description: 侧边栏显隐
|
|
*/
|
|
isCollapse () {
|
|
return this.$store.state.app.isCollapse
|
|
}
|
|
},
|
|
methods: {
|
|
// 地图组件回调地图加载完成后 执行
|
|
onMapReady () {
|
|
this.mapReady = true // 标记地图加载完成
|
|
this.makePlanes(this.airList)
|
|
},
|
|
/**
|
|
* @description: 创建飞机图标
|
|
*/
|
|
makePlanes (planes) {
|
|
this.$refs.mapbox.removePlanes()// 先清除画布上现有的飞机
|
|
planes.forEach((plane, index) => { // 创建所有飞机
|
|
let planeDefaultLonLat
|
|
if (localStorage.getItem(plane.name) !== null) { // 从本地缓存 拿飞机得初始位置
|
|
planeDefaultLonLat = JSON.parse(localStorage.getItem(plane.name))
|
|
plane.lon = planeDefaultLonLat.lon
|
|
plane.lat = planeDefaultLonLat.lat
|
|
} else {
|
|
// 缺省 给经纬度 小数点后随机第五位 即有个10米左右的随机距离
|
|
plane.lon = 100 + Number((Math.random() * 0.01).toFixed(5))
|
|
plane.lat = 40 + Number((Math.random() * 0.01).toFixed(5))
|
|
}
|
|
this.$refs.mapbox.makePlane(plane, index)
|
|
})
|
|
}
|
|
},
|
|
mounted () {
|
|
},
|
|
watch: {
|
|
/**
|
|
* @description: 飞机列表更新时候 更新地图
|
|
*/
|
|
airList: {
|
|
async handler () {
|
|
try {
|
|
// 等待地图画布准备好
|
|
await waitForMapCanvasReady(this.$refs.mapbox.map)
|
|
// 画布准备好后执行你自己的逻辑
|
|
this.onMapReady()
|
|
} catch (err) {
|
|
console.debug('等待地图画布准备超时', err)
|
|
}
|
|
},
|
|
immediate: true
|
|
},
|
|
/**
|
|
* @description: 侧边栏显隐
|
|
*/
|
|
isCollapse () {
|
|
return this.$store.state.app.isCollapse
|
|
}
|
|
},
|
|
destroyed () {
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style></style>
|