client_iot-daoshi-template-v/src/composables/useInitMap.js

import { useRouter } from 'vue-router'
import { useStore } from '@/store/root'
import { uniqBy } from '@/utils/utils'
import { getMap } from '@/http/api'
import Message from '@/base/Message/Message'

export const useInitMap = function () {
  const store = useStore()
  getMap()
    .then(({ data }) => {
      store.SET_MAP_DATA(JSON.parse(data.mapData))
      //初始化地图
      onReady(store.currentFloor, data, store.shopList, () => {
        const facilityList = window.Map_QM.getAllIcon().flat(Infinity)

        const list = facilityList.map(item => {
          item.imgUrl.replace('./', '/')
          return item
        })

        window.Map_QM.addEventListener('shop', onClickShop, false)
        store.SET_FACILITY_LIST(uniqBy(list, 'type'))
        window.Map_QM.renderer.domElement.addEventListener('webglcontextlost', onContextLost)
      })
    })
    .catch(() => {
      Message({ text: '地图数据获取失败', type: 'success' })
    })
}
let lastShop
const bounceShopAndChangeColor = data => {
  if (lastShop) window.Map_QM.changeMapIPState(lastShop.houseNumber, lastShop.formatColor)
  lastShop = data
  if (!data) return
  const xaxis = JSON.parse(data.xaxis).map(Number)
  showMapDialog()
  window.Map_QM.addElementLabel(document.getElementById('shopInfo'), xaxis[0], xaxis[2])
  window.Map_QM.changeMapIPState(data.houseNumber, '#516DD8')
}

export const setShopActive = shop => {
  bounceShopAndChangeColor(shop)
  window.Map_QM.setSelectShopMatByName(shop.houseNumber)
}

export const setShopInactive = () => {
  hideMapDialog()
  bounceShopAndChangeColor(null)
}

//点击地图店铺box
function onClickShop(event) {
  const store = useStore()
  store.SET_FACILITY(null)
  if (!event.data) {
    store.SET_SHOP(null)
    bounceShopAndChangeColor(null)
    hideMapDialog()
  } else {
    store.SET_SHOP(event.data.shopData)
    bounceShopAndChangeColor(event.data.shopData)
  }
}

//地图弹框消失
export function hideMapDialog() {
  document.getElementById('shopInfo').style.visibility = 'hidden'
  document.getElementById('fac').style.visibility = 'hidden'
}

//显示地图弹框
function showMapDialog() {
  document.getElementById('shopInfo').style.visibility = 'visible'
}

export const showFacility = fac => {
  window.Map_QM.addElementLabel(document.getElementById('fac'), fac.site.x, -fac.site.y, 100, 'fac')
  document.getElementById('fac').style.visibility = 'visible'
}

//地图初始化
function onReady({ floorOrder, location, angle }, map, shop, callback) {
  //设备楼栋, 设备楼层, 点位(机器点位直连主干道而不在主干道上), 方向    84   85
  window.MainMap_QM.init(callback, {
    build: 0,
    floor: floorOrder,
    navPoint: location,
    angle,
    perc_H: '-50%',
    pathStyle: '3D',
    containerId: 'mapContainer',
    mapData: map,
    shopData: shop
  })
}

//监听地图上下文丢失 刷新页面
function onContextLost() {
  const router = useRouter()
  router.push('/')
  location.reload()
}