food/src/views/layout/components/main/home/index.vue

<template>
  <div class="h-100">
    <map-box ref="mapbox" :key="mapBoxKey" @longPress="handleDemo" />
  </div>
</template>

<script>
import MapBox from '@/components/MapBox'

export default {
  name: 'Home',
  data () {
    return {
      mapBoxKey: 0 // 初始化一个变量用于控制map-box组件的重新渲染
    }
  },
  components: {
    MapBox
  },
  computed: {
    airList () {
      return this.$store.state.airList
    },
    /**
     * @description: 侧边栏显隐
     */
    isCollapse () {
      return this.$store.state.app.isCollapse
    }
  },
  methods: {
    // 地图长按事件 测试
    handleDemo (lngLat) {
      console.log('经度:', lngLat.lng)
      console.log('维度:', lngLat.lat)
    },
    /**
     * @description: 创建飞机图标
     */
    makePlanes (planes) {
      this.$refs.mapbox.removePlanes()// 先清除画布上现有的飞机
      planes.forEach((plane, index) => { // 创建所有飞机
        let planeDefaultLngLat
        if (localStorage.getItem(plane.name) !== null) { // 从本地缓存 拿飞机得初始位置
          planeDefaultLngLat = JSON.parse(localStorage.getItem(plane.name))
          plane.lng = planeDefaultLngLat.lng
          plane.lat = planeDefaultLngLat.lat
        } else {
          plane.lng = 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: {
      handler (val) {
        if (val) {
          setTimeout(() => {
            this.mapBoxKey++ // 更新mapBoxKey以触发map-box组件的重新渲染
          }, 500)
        }
      }
    }
  },
  destroyed () {
  }
}
</script>

<style></style>