busroute/src/components/map/map.vue

<template>
  <div
    id="container"
    class="mapContainer"
  />
  <div
    v-if="Item.contrlSelect.option.length"
    class="mapContainer-menus"
  >
    <p>
      <icon
        :name="Item.contrlSelect.icon"
        :size="22"
        style="margin-right: 10px;"
      />
      {{ Item.contrlSelect.title }}
    </p>
    <n-checkbox-group
      v-model:value="checkBoxs"
      checked
      @update:value="checkBoxsChange"
    >
      <n-checkbox
        v-for="(item, index) in Item.contrlSelect.option"
        :key="index"
        :value="item.value"
      >
        <icon
          :name="item.icon"
          :size="20"
        />
        {{ item.label }}
      </n-checkbox>
    </n-checkbox-group>
  </div>
</template>

<script setup lang='ts'>
import { onMounted, ref, watch } from 'vue'
import useStore from '@/pages/store/index'
import MapService from './map.service'

const store = useStore()
const mapService = new MapService()
const props = withDefaults(defineProps<{
  zoom?: number,
  Item?: { contrlSelect: { title: string, option: Any[], icon: string, checked:number[] }, key:string }
}>(), {
  zoom: 13,
  Item: () => ({
    key: '',
    contrlSelect: {
      title: '', option: [], icon: '', checked: []
    }
  })
})
const emit = defineEmits<{(evt: 'update:contrlSelect', value: Any): void
}>()
const checkBoxs = ref(props.Item.contrlSelect.checked)

// checkBox勾选
function checkBoxsChange(params:number[], mate:{actionType:string, value:number}) {
  const { marks } = mapService
  console.log('勾选', marks[props.Item.key][mate.value])
  if (!Object.keys(marks[props.Item.key][mate.value]).length) return
  for (const key in marks[props.Item.key][mate.value]) {
    if (marks[props.Item.key][mate.value][key] && marks[props.Item.key][mate.value][key].markMap) {
      if (mate.actionType === 'check') {
        marks[props.Item.key][mate.value][key].markMap.show()
      } else {
        marks[props.Item.key][mate.value][key].markMap.hide()
      }
    }
  }
}

onMounted(() => {
  mapService._initMap(props.zoom)
  mapService._initMarks(props.Item.key, props.Item.contrlSelect.checked)
})

// 车位置更新
watch(() => store.socektData, (v) => {
  if (v && v.BUS_LINE_INFO && props.Item.key === 'homePage' && checkBoxs.value.includes(1)) {
    const { marks } = mapService
    for (let k = 0; k < v.BUS_LINE_INFO.length; k++) {
      const el = v.BUS_LINE_INFO[k]
      for (let j = 0; j < el.inboundAndOutboundStations.length; j++) {
        const es = el.inboundAndOutboundStations[j]
        if (marks[props.Item.key][1][es.vehicleId]) {
          // 更新位置
          marks[props.Item.key][1][es.vehicleId].markMap.setPosition([ es.lng, es.lat ])
          marks[props.Item.key][1][es.vehicleId].markMap.show()
        } else {
          // 添加位置
          marks[props.Item.key][1][es.vehicleId] = { ...es, markMap: mapService.addMark([ es.lng, es.lat ]) }
        }
      }
    }
  }
}, { deep: true })

// 菜单切换显示隐藏
watch(() => props.Item.key, (v) => {
  console.log('菜单切换', v)
  const { marks } = mapService
  for (const k in marks) {
    for (const j in marks[k]) {
      if (Object.keys(marks[k][j]).length) {
        for (const z in marks[k][j]) {
          if (k === props.Item.key) {
            marks[k][j][z].markMap.show()
          } else {
            marks[k][j][z].markMap.hide()
          }
        }
      }
    }
  }
})
</script>

<style lang="scss" scoped>
.mapContainer {
  width: 100%;
  height: 100%;
  mask-image: radial-gradient(circle at center, #030E25 70%, transparent 76%);

  &-menus {
    min-width: 180px;
    position: absolute;
    bottom: 240px;
    right: 300px;
    z-index: 3;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    overflow: hidden;
    box-sizing: border-box;
    font-size: 20px;

    &>p:first-child {
      color: #FFFFFF;
      background: rgba(33, 133, 232, 1);
      display: flex;
      align-items: center;
      height: 40px;
      padding: 0 10px;
    }

    &>div:last-child {
      background: rgba(25, 39, 56, 0.6);
      border: solid 1px rgba(33, 133, 232, 1);
      ;
    }

    :deep(.n-checkbox) {
      padding: 5px 10px;
      display: flex;
      align-items: center;

      .n-checkbox__label {
        display: flex;
        align-items: center;
        font-size: 20px;

        &>svg {
          margin-right: 5px;
        }
      }
    }
  }
}
</style>