energy_storage/web/src/components/Home/Map.vue

<template>
  <div class="map">
    <div ref="mapContent" class="mapContent">
      <tdt-map
        ref="tiandituMap"
        :center="center"
        :zoom="zoom"
        @init="init"
        map-style="black"
        class="amap-box"
        :mid="'amap-vue'"
      >
        <tdt-marker
          v-for="marker in markers"
          :position="[marker.lon, marker.lat]"
          :key="marker.id"
          :icon="marker.iconMap"
          style="width: 20px;height: auto"
          @click="clickArrayMarker(marker)"
          :title="marker.name"
        >
        </tdt-marker>
      </tdt-map>
    </div>
    <a-modal
      class="modal"
      ref="modal"
      v-model:open="showCtrModal"
      :destroy-on-close="true"
      :get-container="() => $refs.mapContent"
      :footer="null"
      :title="testVal.name"
      :mask="true"
    >
      <template #closeIcon>
        <i class="iconfont icon-guanbi" style="font-size: 20px; cursor: pointer; color: #fff" />
      </template>
      <div class="modal-content">
        <div class="home-modal">
          <Modal :station-id="changeStationId"></Modal>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { getReq, postReq } from '@/request/api'
import Modal from '@/components/Home/Modal.vue'
import { loadTMap } from '@/utils/loadTMap'
import { gcj02ToWgs84, wgs84ToGcj02 } from '@/utils/gcj02ToWgs84'
import { TdtMap } from 'vue-tianditu'

export default {
  name: 'Map',
  components: { Modal, TdtMap },

  data() {
    return {
      center: [112.870000,34.180000], // 默认中心点（河南）
      zoom: 6,
      map: null,
      currentMarker: {},
      showCtrModal: false,
      markers: [],
      testVal: {
        name: '场站211',
        id: '2'
      },
      changeStationId: '',
      targetKey: '98d875e39cf0ebab01e56a0f86c5ed44'
    }
  },
  mounted() {
    this.$nextTick(()=>{
      this.initMap()
    })
  },
  beforeUnmount() {
    if(this.map){
      // this.map.destory()
      this.map=null
    }
  },
  methods: {
    init(map) {
      this.map = map
      this.getMarkList()
    },
    async getMarkList() {
      try {
        let query = {
          role_id: localStorage.getItem('permission')[0].role_id
        }
        const res = await getReq('/queryStationList', query)
        if (res.errcode === 0) {
          this.markers = res.data.map((item) => {
            return {
              ...item,
              iconMap: (item.status === 1)
                ? require('../../assets/home/homeIcon.png')
                : require('../../assets/home/homeIcon1.png')
            }
          })
        } else {
          this.markers = []
          throw res
        }
      } catch (error) {
        console.log(error, 'eeeeeeeeeeeeeeee')
      }
    },
    async initMap() {
      try {
        const [mapKey] = await Promise.all([this.getSysConfig('map-key')])
        await loadTMap(mapKey)
      } catch (err) {
        console.error('天地图加载失败:', err)
      }
    },

   

  

    async getSysConfig() {
      let sysConfig=this.targetKey
      // try {
      //   const query = {}
      //   const res = await getReq('/', query)
      //   if (res.errcode === 0) {
      //     sysConfig = res.data.value
      //   } else {
      //     throw res
      //   }
      // } catch (error) {
      //   sysConfig = this.targetKey
      // }
      return sysConfig
    },

    async clickArrayMarker(currentVal) {
      this.changeStationId = currentVal.station_id
      this.testVal.name=currentVal.name
      this.showCtrModal = true
    }
  }
}
</script>

<style scoped lang="scss">
/* 保持原有样式不变 */
.map {
  width: 100%;
  height: 100%;

  .mapContent{
    height:100%;
  }
  .icon1 {
    width: 32px;
    height: 80px;
    background: url('../../assets/home/homeIcon1.png');
    background-size: contain;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .icon {
    width: 32px;
    height: 80px;
    background: url('../../assets/home/homeIcon.png');
    background-size: contain;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  :deep(.ant-modal-root .ant-modal-mask) {
    background-color: #000 !important;
  }
 
  :deep(.modal.ant-modal) {
    width: 68% !important;
    height: 80% !important;
    min-width: 1200px !important;
    border: none;
    padding: 20px;
    background-image: url('../../assets/home/modal-bg.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    & > div {
      height: 100%;
    }
    .ant-modal-content {
      height: 100%;
      width: 96%;
      margin: auto;
      box-shadow: none;
      background: transparent!important;
      .ant-modal-close {
        position: absolute;
        right: 0;
        top: 3px;
      }
      .ant-modal-body {
        height: calc(100% - 45px);
        color: #fff;
        // padding: 10px;
        div > span {
          //   margin-right: 10px;
        }
      }
      .ant-modal-header {
        height: 45px;
        position: absolute;
        top: -45px;
        text-align: center;
        width: 96%;
        background: transparent;
        div {
          font-size: 32px;

          color: #fff;
        }
      }
    }
  }
  .modal-content {
    height: calc(100% - 45px);

    min-height: 700px;
  }
  .home-modal {
    height: 100%;
  }

  :deep(.tdt-marker-icon){
    height:auto!important;
  }
}
</style>