src/components/inspection/inspectionRouteMap.vue

<template>
  <div class="inspection-route-map-container">
    <div id="inspectionRouteMap" style="width: 100%; height: 600px;"></div>
  </div>
</template>
<script>
import { listInspectionRoutePoints } from '@/api/inspection/inspectionPointApi'
import { getCommunityId } from '@/api/community/communityApi'
export default {
  name: 'InspectionRouteMap',
  data() {
    return {
      map: null,
      communityId: '',
      routePoints: [],
      markers: [],
      texts: [],
      polylines: []
    }
  },
  async mounted() {
    this.communityId = getCommunityId()
  },
  methods: {
    loadData(route) {
      this.initMap()
      this.loadRoute(route)
    },
    initMap() {
      this.clearAll()
      const center = [116.397128, 39.916527]
      const container = document.getElementById('inspectionRouteMap')
      if (!container) return
      this.map = new window.AMap.Map(container, {
        center: center,
        zoom: 13,
        resizeEnable: true
      })
    },
    async loadRoute(route) {
      if (!route || !route.inspectionRouteId) return
      try {
        const params = {
          communityId: this.communityId,
          inspectionRouteId: route.inspectionRouteId,
          page: 1,
          row: 1000
        }
        const response = await listInspectionRoutePoints(params)
        this.routePoints = response.inspectionPoints
        this.addPointsToMap(this.routePoints)
      } catch (error) {
        console.error('获取路线点失败:', error)
        this.$message.error(this.$t('inspectionRouteMap.fetchError'))
      }
    },
    addPointsToMap(points) {
      if (!this.map || !points || points.length === 0) return
      this.clearOverlays()
      const path = []
      points.forEach(point => {
        if (!point.lat || !point.lng) return
        const position = [point.lng, point.lat]
        const marker = new window.AMap.Marker({
          map: this.map,
          position: position,
          icon: new window.AMap.Icon({
            size: new window.AMap.Size(25, 35),
            imageSize: new window.AMap.Size(25, 35),
            image: '/img/maper.png'
          })
        })
        this.markers.push(marker)
        const text = new window.AMap.Text({
          map: this.map,
          text: point.inspectionName,
          position: position,
          offset: new window.AMap.Pixel(0, 15),
          style: {
            color: '#3777FF',
            'font-size': '12px',
            'background-color': 'rgba(255,255,255,0.8)',
            'padding': '2px 4px',
            'border-radius': '2px'
          }
        })
        this.texts.push(text)
        path.push(position)
      })
      if (path.length > 1) {
        // 外层（描边）
        const outerPolyline = new window.AMap.Polyline({
          map: this.map,
          path: path,
          strokeColor: '#FFF',
          strokeWeight: 10,
          strokeOpacity: 1,
          lineJoin: 'round'
        })
        this.polylines.push(outerPolyline)
        // 内层（主线）
        this.polylines.push(new window.AMap.Polyline({
          map: this.map,
          path: path,
          strokeColor: '#3777FF',
          strokeWeight: 6,
          strokeOpacity: 0.9,
          lineJoin: 'round'
        }))
      }
      if (path.length > 0) {
        this.map.setCenter(path[0])
        this.map.setZoom(16)
      }
    },
    clearAll() {
      this.clearOverlays()
      if (this.map) {
        this.map.destroy()
        this.map = null
      }
    },
    clearOverlays() {
      this.markers.forEach(m => m.setMap(null))
      this.markers = []
      this.texts.forEach(t => t.setMap(null))
      this.texts = []
      this.polylines.forEach(p => p.setMap(null))
      this.polylines = []
    }
  },
  beforeDestroy() {
    this.clearAll()
  }
}
</script>
<style scoped>
.inspection-route-map-container {
  width: 100%;
  height: 100%;
}
</style>