77 lines
1.5 KiB
Vue
77 lines
1.5 KiB
Vue
|
<template>
|
||
|
|
<div class="h-100">
|
||
|
|
<map-box ref="mapbox"/>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import MapBox from '@/components/MapBox'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'Home',
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
}
|
||
|
|
},
|
||
|
|
components: {
|
||
|
|
MapBox
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
airList () {
|
||
|
|
return this.$store.state.airList
|
||
|
|
},
|
||
|
|
/**
|
||
|
|
* @description: 侧边栏显隐
|
||
|
|
*/
|
||
|
|
isCollapse () {
|
||
|
|
return this.$store.state.app.isCollapse
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
/**
|
||
|
|
* @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 {
|
||
|
|
plane.lon = 0
|
||
|
|
plane.lat = 0
|
||
|
|
}
|
||
|
|
this.$refs.mapbox.makePlane(plane, index)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted () {
|
||
|
|
if (this.airList.length > 0) {
|
||
|
|
this.makePlanes(this.airList)// 创建飞机图标
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
/**
|
||
|
|
* @description: 飞机列表更新时候 更新地图
|
||
|
|
*/
|
||
|
|
airList: {
|
||
|
|
handler (val) {
|
||
|
|
this.makePlanes(val)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
/**
|
||
|
|
* @description: 侧边栏显隐
|
||
|
|
*/
|
||
|
|
isCollapse () {
|
||
|
|
return this.$store.state.app.isCollapse
|
||
|
|
}
|
||
|
|
},
|
||
|
|
destroyed () {
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style></style>
|