dtScreen/src/components/TongzhouTrafficMap.vue

<template>
  <div class="map-wrapper">
    <div ref="mapContainer" class="map-container"></div>

    <div class="map-legend" :style="privateStyle.legend" v-if="(!mode || mode === '路口')"
      :class="{ 'legend-hidden': !legendVisible }">
      <div class="legend-header">
        <div class="legend-title">图例</div>
        <div class="legend-close-btn" @click="toggleLegend">✕</div>
      </div>
      <div class="legend-list">
        <div class="legend-item all-select" @click="toggleAll">
          <div class="legend-dot"
            :style="{ backgroundColor: isAllSelected ? '#fff' : 'transparent', border: '1px solid #fff' }"></div>
          <div class="legend-label" style="font-weight: bold;">全选</div>
        </div>

        <div v-for="item in statusConfig" class="legend-item" @click="toggleRouteVisible(item.name)" :key="item.name"
          :class="{ 'is-inactive': !activeLegends.includes(item.name) }"
          v-if="!mode || (mode === '路口' && !['干线协调', '勤务路线'].includes(item.name))">

          <div class="legend-dot"
            :style="{ backgroundColor: ['离线', '降级', '故障'].includes(item.name) ? 'transparent' : item.color }"
            :class="{ 'special-route': ['干线协调', '勤务路线'].includes(item.name), 'is-status-wrapper': ['离线', '降级', '故障'].includes(item.name) }">

            <span v-if="!['离线', '降级', '故障'].includes(item.name)">
              {{ item.name.charAt(0) }}
            </span>

            <img v-else
              :src="require(`@/assets/images/icon_${item.name === '离线' ? 'lixian' : item.name === '降级' ? 'jiangji' : 'guzhang'}.png`)"
              class="status-icon" />
          </div>

          <div class="legend-label">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <div class="legend-show-btn" v-if="(!mode || mode === '路口') && !legendVisible" @click="toggleLegend">
      <div class="legend-show-icon">☰</div>
    </div>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';

export default {
  name: "TrafficMap",
  props: {
    amapKey: { type: String, default: '您的Key' },
    securityJsCode: { type: String, default: '您的安全密钥' },
    mode: { type: String, default: '', validator: (value) => ['', '路口', '干线', '特勤'].includes(value) }
  },
  data() {
    return {
      AMap: null,
      map: null,
      infoWindow: null,
      trafficLayer: null,
      routeGroups: {},
      polylines: [],
      privateStyle: {
        legend: {}
      },
      legendVisible: true,
      activeLegends: ["中心计划", "干线协调", "勤务路线", "定周期控制", "感应控制", "自适应控制", "手动控制", "特殊控制", "离线", "降级", "故障"],
      // 核心修正：增加生命周期标识，防止组件销毁后异步回调继续执行
      _isDestroyed: false,
      // 状态类型配置
      statusConfig: [
        { name: "中心计划", color: "#004CDE", type: "normal" },
        { name: "干线协调", color: "#13C373", type: "route" },
        { name: "勤务路线", color: "#BC301D", type: "route" },
        { name: "定周期控制", color: "#3296FA", type: "normal" },
        { name: "感应控制", color: "#FF864C", type: "normal" },
        { name: "自适应控制", color: "#9F6EFE", type: "normal" },
        { name: "手动控制", color: "#EB9F36", type: "normal" },
        { name: "特殊控制", color: "#A26218", type: "normal" },
        { name: "离线", color: "#7A7A7A", type: "abnormal" },
        { name: "降级", color: "#D9C13B", type: "abnormal" },
        { name: "故障", color: "#FF3938", type: "abnormal" }
      ],
      // 真实路口数据
      intersectionData: [],
      // 按状态分类的路口数据
      statusIntersections: {}
    };
  },
  mounted() {
    this._isDestroyed = false; // 重置标识
    this.loadMapData().then(() => {
      this.classifyIntersectionsByStatus();
      this.updateMapByMode();
      this.initAMap();
    });

    if (this.$route.path === '/home') {
      this.privateStyle.legend = { right: "25%" };
    }
  },
  watch: {
    mode: {
      handler() {
        this.updateMapByMode();
        this.updateMapDisplay();
      },
      immediate: false
    }
  },
  beforeDestroy() {
    // 1. 立即设置销毁状态
    this._isDestroyed = true;

    // 2. 关闭弹窗
    if (this.infoWindow) {
      try {
        this.infoWindow.close();
      } catch (e) {
        console.warn('关闭信息窗口时出错:', e);
      }
      this.infoWindow = null;
    }

    // 3. 清理覆盖物引用
    if (this.routeGroups) {
      Object.values(this.routeGroups).forEach(overlays => {
        if (Array.isArray(overlays)) {
          overlays.forEach(o => {
            try {
              if (o.setMap) o.setMap(null);
            } catch (e) {
              console.warn('清理覆盖物时出错:', e);
            }
          });
        }
      });
      this.routeGroups = {};
    }

    // 4. 销毁地图实例并清空引用
    if (this.map) {
      try {
        this.map.destroy();
      } catch (e) {
        console.warn('销毁地图实例时出错:', e);
      }
      this.map = null;
    }

    // 5. 清理其他引用
    this.AMap = null;
  },
  computed: {
    isAllSelected() {
      return this.activeLegends.length === this.statusConfig.length;
    }
  },
  methods: {
    // 动态加载地图数据
    async loadMapData() {
      try {
        const mapDataModule = await import('@/mock/map_data_gaode.json');
        this.intersectionData = mapDataModule.default || [];
        console.log('地图数据加载成功，共', this.intersectionData.length, '个路口');
      } catch (error) {
        console.error('地图数据加载失败:', error);
        this.intersectionData = [];
      }
    },

    // 检查地图环境是否安全可用
    isMapReady() {
      return !this._isDestroyed && this.map && typeof this.map.add === 'function';
    },

    // 将真实路口数据按状态类型分类
    classifyIntersectionsByStatus() {
      // 首先为勤务路线和干线协调各分配4条数据
      const routeData = this.intersectionData.slice(0, 8);
      const remainingData = this.intersectionData.slice(8);
      
      // 计算正常状态数据需要分配的状态类型数量（11-2-3=6）
      const normalStatusCount = 6;
      const abnormalStatusCount = 3;
      const chunkSize = Math.floor(remainingData.length / (normalStatusCount + abnormalStatusCount));
      
      // 计算异常状态的最大数量（不超过10个）
      const maxAbnormalCount = 10;

      this.statusIntersections = {
        "中心计划": remainingData.slice(0, chunkSize),
        "干线协调": routeData.slice(0, 4),
        "勤务路线": routeData.slice(4, 8),
        "定周期控制": remainingData.slice(chunkSize, chunkSize * 2),
        "感应控制": remainingData.slice(chunkSize * 2, chunkSize * 3),
        "自适应控制": remainingData.slice(chunkSize * 3, chunkSize * 4),
        "手动控制": remainingData.slice(chunkSize * 4, chunkSize * 5),
        "特殊控制": remainingData.slice(chunkSize * 5, chunkSize * 6),
        "离线": remainingData.slice(chunkSize * 6, Math.min(chunkSize * 7, chunkSize * 6 + maxAbnormalCount)),
        "降级": remainingData.slice(chunkSize * 7, Math.min(chunkSize * 8, chunkSize * 7 + maxAbnormalCount)),
        "故障": remainingData.slice(chunkSize * 8, Math.min(chunkSize * 9, chunkSize * 8 + maxAbnormalCount))
      };
    },

    updateMapByMode() {
      switch (this.mode) {
        case '路口':
          this.activeLegends = ["中心计划", "定周期控制", "感应控制", "自适应控制", "手动控制", "特殊控制", "离线", "降级", "故障"];
          break;
        case '干线':
          this.activeLegends = ["干线协调"];
          break;
        case '特勤':
          this.activeLegends = ["勤务路线"];
          break;
        default:
          this.activeLegends = this.statusConfig.map(item => item.name);
      }
    },

    updateMapDisplay() {
      if (this.infoWindow) this.infoWindow.close();
      if (!this.isMapReady()) return;

      Object.keys(this.routeGroups).forEach(name => {
        const overlays = this.routeGroups[name];
        if (overlays && overlays.length > 0) {
          if (this.activeLegends.includes(name)) {
            this.map.add(overlays);
          } else {
            this.map.remove(overlays);
          }
        }
      });
    },

    async initAMap() {
      if (this._isDestroyed) return;

      window._AMapSecurityConfig = { securityJsCode: this.securityJsCode };
      try {
        // 固定加载需要的插件
        const AMap = await AMapLoader.load({
          key: this.amapKey,
          version: "2.0",
          plugins: ['AMap.Driving']
        });

        // 异步回来后，首先检查组件是否还在
        if (this._isDestroyed) return;

        this.AMap = AMap;
        this.map = new AMap.Map(this.$refs.mapContainer, {
          zoom: 14.5,
          mapStyle: "amap://styles/darkblue",
          center: [116.663, 39.905],
        });

        this.map.on('complete', () => {
          if (!this._isDestroyed) {
            this.drawStaticRoutes();
            this.enableTrafficLayer();
          }
        });
      } catch (err) {
        console.error('地图加载失败:', err);
      }
    },

    enableTrafficLayer() {
      if (!this.isMapReady() || !this.AMap.TileLayer) return;
      this.trafficLayer = new this.AMap.TileLayer.Traffic({
        zIndex: 10,
        autoRefresh: true
      });
      this.map.add(this.trafficLayer);
    },

    drawStaticRoutes() {
      if (!this.isMapReady()) return;

      this.statusConfig.forEach((config, index) => {
        // 使用箭头函数保持 this 指向 Vue 实例
        setTimeout(() => {
          if (!this.isMapReady()) return;

          try {
            const intersections = this.statusIntersections[config.name] || [];
            const markers = [];
            let polyline = null;

            // 路线逻辑：对于路线类型，创建连接线
            if (["干线协调", "勤务路线"].includes(config.name)) {
              if (intersections.length >= 2) {
                const path = intersections.map(item => [item["位置-经度"], item["位置-纬度"]]);
                polyline = new this.AMap.Polyline({
                  path: path,
                  strokeColor: config.color,
                  strokeWeight: 6,
                  strokeOpacity: 0.6,
                  zIndex: 15
                });
              }
            }

            // 为每个路口创建标记
            intersections.forEach((item, idx) => {
              const position = [item["位置-经度"], item["位置-纬度"]];
              const markerConfig = {
                ...config,
                name: config.name,
                id: item["路口编号"],
                road: item["路口名称"],
                time: new Date().toLocaleString('zh-CN')
              };
              markers.push(this.createTrafficLightMarker(position, markerConfig));
            });

            const overlays = [...markers, polyline].filter(Boolean);
            this.routeGroups[config.name] = overlays;

            if (this.isMapReady() && this.activeLegends.includes(config.name)) {
              this.map.add(overlays);
            }
          } catch (e) {
            console.warn('处理路线数据时出错:', e);
          }
        }, index * 200);
      });
    },

    createTrafficLightMarker(position, config) {
      if (!position || !config) return null;

      try {
        const isAbnormal = ["离线", "降级", "故障"].includes(config.name);
        const lng = Number(position[0] || position.lng);
        const lat = Number(position[1] || position.lat);

        // 验证坐标有效性
        if (isNaN(lng) || isNaN(lat)) return null;

        // 3. 【视觉优化】调整 Marker 大小比例
        // 异常状态图标略大（为了警示），普通点位略小且半透明
        const size = isAbnormal ? '18px' : '14px';
        const opacity = isAbnormal ? '1' : '0.85';
        const shadow = isAbnormal ? `0 0 10px ${config.color || '#999'}` : `0 0 5px ${config.color || '#999'}`;

        const marker = new this.AMap.Marker({
          position: [lng, lat],
          zIndex: isAbnormal ? 110 : 100, // 异常图标显示在更上层
          content: `
          <div class="pure-light-node ${isAbnormal ? 'breathe abnormal-node' : ''}"
              style="
                width: ${size};
                height: ${size};
                background: ${config.color || '#999'};
                box-shadow: ${shadow};
                opacity: ${opacity};
                border: 1.5px solid rgba(255,255,255,0.7);
                font-size: 12px;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #fff;
                padding: 8px;
              ">
            <span style="transform: scale(0.7); font-weight: bold;">${config.name.charAt(0)}</span>
          </div>
        `,
          offset: new this.AMap.Pixel(-8, -8),
          extData: {
            ...config,
            position: [lng, lat],
            statusColor: config.color || '#999',
            statusLabel: isAbnormal ? config.name : "正常运行",
            road: config.road || '未知路口',
            time: config.time || new Date().toLocaleString('zh-CN')
          }
        });

        marker.on('click', (e) => {
          if (!this._isDestroyed) {
            this.openLightInfo(e.target.getExtData(), e.lnglat);
            this.$emit('map-crossing-click', e.target.getExtData(), e.lnglat);
          }
        });

        return marker;
      } catch (e) {
        console.warn('创建标记时出错:', e);
        return null;
      }
    },

    openLightInfo(data, position) {
      if (!this.isMapReady()) return;

      const infoWindowId = `info-window-${Date.now()}`;
      const content = `
        <div class="custom-info-card" id="${infoWindowId}">
          <div class="close-btn" data-id="${infoWindowId}">✕</div>
          <div class="card-header">
            <div class="status-dot" style="background: ${data.statusColor}">
              <span>${data.name.charAt(0)}</span>
            </div>
            <span class="status-text">${data.statusLabel}</span>
          </div>
          <div class="card-body">
            <div class="info-line"><span class="label">路口：</span><span class="value">${data.road}</span></div>
            <div class="info-line"><span class="label">路口编号：</span><span class="value digital">${data.id || 'N/A'}</span></div>
            <div class="info-line"><span class="label">发生时间：</span><span class="value digital">${data.time}</span></div>
          </div>
        </div>
      `;

      if (!this.infoWindow) {
        this.infoWindow = new this.AMap.InfoWindow({
          isCustom: true,
          offset: new this.AMap.Pixel(0, -20)
        });
      }

      this.infoWindow.setContent(content);
      this.infoWindow.open(this.map, position);

      // 添加关闭按钮事件监听器
      setTimeout(() => {
        const closeBtn = document.querySelector(`#${infoWindowId} .close-btn`);
        if (closeBtn) {
          closeBtn.addEventListener('click', () => {
            if (this.infoWindow) this.infoWindow.close();
          });
        }
      }, 100);
    },

    toggleAll() {
      const targetState = !this.isAllSelected;
      if (!this.isMapReady()) return;

      if (targetState) {
        this.activeLegends = this.statusConfig.map(item => item.name);
        Object.values(this.routeGroups).forEach(overlays => {
          if (overlays && overlays.length > 0) this.map.add(overlays);
        });
      } else {
        this.activeLegends = [];
        Object.values(this.routeGroups).forEach(overlays => {
          if (overlays && overlays.length > 0) this.map.remove(overlays);
        });
        if (this.infoWindow) this.infoWindow.close();
      }
    },

    toggleRouteVisible(name) {
      if (!this.isMapReady()) return;

      const overlays = this.routeGroups[name] || [];
      const index = this.activeLegends.indexOf(name);
      if (index > -1) {
        this.activeLegends.splice(index, 1);
        this.map.remove(overlays);
        if (this.infoWindow) this.infoWindow.close();
      } else {
        this.activeLegends.push(name);
        this.map.add(overlays);
      }
    },

    focusByLocation(targetPos) {
      if (!this.isMapReady() || !targetPos || targetPos.length !== 2) return;

      let foundMarker = null;
      Object.values(this.routeGroups).forEach(group => {
        const marker = group.find(item => {
          if (!(item instanceof this.AMap.Marker)) return false;
          const pos = item.getExtData().position;
          return Math.abs(pos[0] - targetPos[0]) < 0.0001 && Math.abs(pos[1] - targetPos[1]) < 0.0001;
        });
        if (marker) foundMarker = marker;
      });

      if (foundMarker) {
        const finalPos = foundMarker.getPosition();
        this.map.setZoomAndCenter(17, finalPos, false, 500);
        setTimeout(() => {
          if (!this._isDestroyed) this.openLightInfo(foundMarker.getExtData(), finalPos);
        }, 600);
      }
    },

    toggleLegend() {
      this.legendVisible = !this.legendVisible;
    }
  }
};
</script>

<style scoped>
.map-wrapper {
  width: 100%;
  height: 100vh;
  position: relative;
  background: #010813;
}

.map-container {
  width: 100%;
  height: 100%;
}

::v-deep .pure-light-node.breathe {
  animation: light-breathe 2s infinite ease-in-out;
}

::v-deep .pure-light-node span {
  display: flex;
  transform: scale(0.75);
  align-items: center;
}

::v-deep .pure-light-node:hover {
  transform: scale(1.4);
  filter: brightness(1.2);
}

@keyframes light-breathe {
  0% {
    transform: scale(0.9);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.1);
    opacity: 1;
  }

  100% {
    transform: scale(0.9);
    opacity: 0.8;
  }
}

::v-deep .close-btn {
  position: absolute;
  top: 10px;
  right: 12px;
  color: #8da6c7;
  cursor: pointer;
  font-size: 16px;
  transition: color 0.3s;
  line-height: 1;
  z-index: 10;
}

::v-deep .close-btn:hover {
  color: #ffffff;
}

::v-deep .custom-info-card {
  position: relative;
  background: rgba(10, 15, 24, 0.95);
  border-radius: 10px;
  padding: 12px 16px;
  min-width: 200px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  color: #fff;
}

::v-deep .card-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

::v-deep .status-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 8px;
  font-size: 12px;
  padding: 12px;
  box-sizing: border-box;
}

::v-deep .status-dot span {
  transform: scale(0.75);
}

::v-deep .status-text {
  font-size: 15px;
  font-weight: bold;
}

::v-deep .info-line {
  display: flex;
  margin-bottom: 6px;
  font-size: 13px;
  align-items: center;
}

::v-deep .label {
  color: #8da6c7;
  white-space: nowrap;
}

::v-deep .value {
  color: #ffffff;
}

::v-deep .digital {
  font-family: 'Consolas', monospace;
}

.map-legend {
  position: absolute;
  bottom: 30px;
  right: 40px;
  background: rgba(5, 22, 45, 0.9);
  border: 1px solid #1e4d8e;
  padding: 15px;
  border-radius: 6px;
  z-index: 100;
  transition: all 0.3s ease-in-out;
  opacity: 1;
  max-width: 200px;
  overflow: hidden;
}

.map-legend.legend-hidden {
  opacity: 0;
  transform: translateX(calc(100% + 20px));
  pointer-events: none;
}

.legend-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  border-bottom: 1px solid #1e4d8e;
  padding-bottom: 8px;
}

.legend-close-btn {
  color: #8da6c7;
  cursor: pointer;
  font-size: 16px;
  transition: color 0.3s;
  line-height: 1;
}

.legend-close-btn:hover {
  color: #ffffff;
}

.legend-show-btn {
  position: absolute;
  bottom: 30px;
  right: 20px;
  background: rgba(5, 22, 45, 0.9);
  border: 1px solid #1e4d8e;
  width: 40px;
  height: 40px;
  border-radius: 6px 0 0 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 99;
  transition: all 0.3s ease-in-out;
}

.legend-show-btn:hover {
  background: rgba(10, 30, 60, 0.9);
  border-color: #3a75c4;
}

.legend-show-icon {
  color: #8da6c7;
  font-size: 18px;
  transition: color 0.3s;
}

.legend-show-btn:hover .legend-show-icon {
  color: #ffffff;
}

.legend-title {
  color: #fff;
  font-size: 14px;
}

.legend-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  cursor: pointer;
  transition: 0.3s;
}

.legend-item.is-inactive {
  opacity: 0.2;
  filter: grayscale(1);
}

.legend-dot {
  margin-right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.legend-dot:not(.is-status-wrapper) {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.legend-dot span {
  display: inline-block;
  width: 20px;
  height: 20px;
  font-size: 12px;
  color: #FFF;
  text-align: center;
  transform: scale(0.75);
  line-height: 20px;
}

.legend-dot.special-route {
  position: relative;
  overflow: visible !important;
  z-index: 1;
  border: none !important;
  border-radius: 50%;
}

.legend-dot.special-route span {
  position: relative;
  z-index: 3;
  font-weight: bold;
}

.legend-dot.special-route::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150%;
  height: 3px;
  background-color: inherit;
  opacity: 0.8;
  transform: translate(-50%, -50%) rotate(-45deg);
  pointer-events: none;
  z-index: 0;
}

.legend-dot.special-route::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  z-index: 2;
  background-color: inherit;
  opacity: 1;
}

.legend-label {
  flex: 1;
  color: #d0d9e2;
  font-size: 13px;
}

.legend-status {
  font-size: 11px;
  color: #5b7da8;
}

.all-select {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 12px;
  margin-bottom: 12px !important;
}

.all-select .legend-dot {
  border-radius: 2px;
  transition: all 0.3s;
  width: 10px;
  height: 10px;
}

.legend-dot.is-status-wrapper {
  width: 28px;
  height: 28px;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  margin-right: 0;
  transform: translateX(-15%);
}

.status-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

::v-deep .pure-light-node {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  pointer-events: auto;
}

/* 异常状态增加稍微剧烈一点的呼吸感，但缩小范围 */
@keyframes light-breathe {
  0% {
    transform: scale(0.9);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.1);
    opacity: 1;
  }

  100% {
    transform: scale(0.9);
    opacity: 0.8;
  }
}

/* 首页展示时，如果觉得还是太密，可以给非异常节点降权 */
::v-deep .pure-light-node:not(.abnormal-node) {
  border: 1px solid rgba(255, 255, 255, 0.4);
}
</style>