12/src/views/User/HmOutFlux/atmosDeposition/atmsamplemap.vue

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

<script setup>
import { ref, onMounted, watch } from 'vue'; // 新增watch用于监听计算方式变化
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';

// 1. 接收父组件传递的计算方式（重量/体积）
const props = defineProps({
  calculationMethod: {
    type: String,
    required: true,
    default: 'weight' // 默认按重量计算
  }
});

const mapContainer = ref(null);
const mapInstance = ref(null); // 保存地图实例
const markers = ref([]); // 保存所有标记点实例及对应数据，用于后续更新弹窗

// 2. 定义重量/体积对应的指标分类（核心：区分需要展示的字段）
const metricsMap = {
  weight: [ // 重量相关指标
    { label: 'Cr mg/kg', key: 'Cr mg/kg' },
    { label: 'As mg/kg', key: 'As mg/kg' },
    { label: 'Cd mg/kg', key: 'Cd mg/kg' },
    { label: 'Hg mg/kg', key: 'Hg mg/kg' },
    { label: 'Pb mg/kg', key: 'Pb mg/kg' },
    { label: '颗粒物重量 mg', key: '颗粒物的重量 mg' }
  ],
  volume: [ // 体积相关指标
    { label: 'Cr ug/m³', key: 'Cr ug/m3' },
    { label: 'As ug/m³', key: 'As ug/m3' },
    { label: 'Cd ug/m³', key: 'Cd ug/m3' },
    { label: 'Hg ug/m³', key: 'Hg ug/m3' },
    { label: 'Pb ug/m³', key: 'Pb ug/m3' },
    { label: '标准体积 m³', key: '标准体积 m3' },
    { label: '颗粒物浓度 ug/m³', key: '颗粒物浓度ug/m3' },
  ]
};

// 辅助函数：数值格式化
function formatValue(value) {
  if (value === undefined || value === null || value === '') return '未知';
  return parseFloat(value);
}

// 辅助函数：位置格式化（处理"广东省韶关市"前缀）
function formatLocation(fullLocation) {
  if (!fullLocation) return '未知位置';
  const processed = fullLocation.replace(/^广东省韶关市/, '').trim().replace(/^韶关市/, '');
  return processed || '未知位置';
}

// 3. 生成弹窗内容（根据计算方式动态生成）
function generatePopupContent(item, method) {
  const metrics = metricsMap[method]; // 获取当前计算方式对应的指标
  // 生成指标HTML片段
  const metricsHtml = metrics.map(metric => `
    <div class="data-item">
      <span class="item-label">${metric.label}:</span>
      <span class="item-value">${formatValue(item[metric.key])}</span>
    </div>
  `).join('');

  // 弹窗整体结构（非指标信息保持不变）
  return `
    <div class="popup-container">
      <div class="popup-header">
        <h3 class="popup-title">${formatLocation(item.采样 || '未知采样点')}</h3>
      </div>
      <ul class="popup-info-list">
        <li>
          <span class="info-label">采样点ID:</span>
          <span class="info-value">${item.样品名称 || '未知'}</span>
        </li>
      </ul>
      <div class="grid-container">
        <div class="grid-item">${metricsHtml}</div>
      </div>
    </div>
  `;
}

onMounted(() => {
  if (!mapContainer.value) {
    console.error('❌ 地图容器未找到！');
    return;
  }

  // 初始化地图
  const map = L.map(mapContainer.value, {
    center: [24.7, 114], // 韶关大致中心
    zoom: 8.5,
    minZoom: 8.3,
  });
  mapInstance.value = map;

  // 区县颜色映射（保持不变）
  const districtColorMap = {
    "武江区": "#FF6B6B",
    "浈江区": "#4ECDC4",
    "曲江区": "#FFD166",
    "始兴县": "#A0DAA9",
    "仁化县": "#6A0572",
    "翁源县": "#1A535C",
    "乳源瑶族自治县": "#FF9F1C",
    "新丰县": "#87CEEB",
    "乐昌市": "#118AB2",
    "南雄市": "#06D6A0",
  };

  // 加载区县边界（保持不变）
  fetch('/data/韶关市各区县边界图.geojson')
    .then(res => {
      if (!res.ok) throw new Error(`区县边界加载失败：${res.status}`);
      return res.json();
    })
    .then(geojson => {
      console.log('✅ 区县边界数据加载完成，要素数：', geojson.features.length);
      
      L.geoJSON(geojson, {
        style: (feature) => {
          const districtName = feature.properties.name;
          const color = districtColorMap[districtName] || '#cccccc';
          return {
            fillColor: color,
            fillOpacity: 0.7,
            color: '#333333',
            weight: 2,
          };
        },
      }).addTo(map);

       fetch('/data/乐昌市.geoJson') // 假设文件路径为 /data/乐昌市.geojson
        .then(res => {
          if (!res.ok) throw new Error(`乐昌市边界加载失败：${res.status}`);
          return res.json();
        })
        .then(lechangGeojson => {
          console.log('✅ 乐昌市边界数据加载完成', lechangGeojson);
          
          // 为乐昌市设置更突出的样式（与原有边界区分）
          L.geoJSON(lechangGeojson, {
            style: () => {
              return {
                fillColor: districtColorMap["乐昌市"], // 复用原有颜色
                fillOpacity: 0.5, // 透明度略低，避免覆盖原有边界
                color: '#000000', // 边框颜色加深
                weight: 4, // 边框加粗，突出显示
                dashArray: '5, 5', // 可选：添加虚线效果，进一步区分
              };
            },
          }).addTo(map);
        })
        .catch(err => {
          console.warn('⚠️ 乐昌市边界加载失败（不影响主地图）：', err);
        });

      // 加载大气数据并创建标记点
      fetch('http://localhost:3000/table/Atmosphere_summary_data')
        .then(res => {
          if (!res.ok) throw new Error(`大气数据加载失败：${res.status}`);
          return res.json();
        })
        .then(atmosphereData => {
          console.log('✅ 大气数据加载完成，记录数：', atmosphereData.length);
          markers.value = []; // 清空标记点数组
          
          atmosphereData.forEach((item, idx) => {
            try {
              // 提取经纬度（保持不变）
              const latField = ['latitude', 'lat', '纬度'].find(key => item[key] !== undefined);
              const lngField = ['longitude', 'lng', '经度'].find(key => item[key] !== undefined);
              
              if (!latField || !lngField) {
                console.error(`❌ 未找到经纬度字段（第${idx}条）`);
                return;
              }
              
              // 清理经纬度数据（保持不变）
              const cleanLat = String(item[latField]).replace(/[^\d.-]/g, '');
              const cleanLng = String(item[lngField]).replace(/[^\d.-]/g, '');
              
              const lat = parseFloat(parseFloat(cleanLat).toFixed(6));
              const lng = parseFloat(parseFloat(cleanLng).toFixed(6));
              
              // 坐标范围校验（保持不变）
              if (isNaN(lat) || isNaN(lng) || lat < 22.7 || lat > 25.5 || lng < 112.7 || lng > 115.3) {
                console.warn(`❌ 坐标超出范围（第${idx}条）：`, lat, lng);
                return;
              }
              
              // 创建标记点（保持不变）
              const marker = L.circleMarker([lat, lng], {
                radius: 3.5,
                color: '#FF3333',
                fillColor: '#FF3333',
                fillOpacity: 0.9,
                weight: 1.5,
                zIndexOffset: 1000,
              }).addTo(map);

              // 绑定初始弹窗内容（根据默认计算方式）
              marker.bindPopup(generatePopupContent(item, props.calculationMethod));
              
              // 保存标记点实例和对应数据，用于后续更新
              markers.value.push({ marker, item });
            } catch (err) {
              console.error(`❌ 处理大气数据失败（第${idx}条）：`, err);
            }
          });

          console.log(`✅ 成功创建 ${markers.value.length} 个大气数据标记点`);
        })
        .catch(err => {
          console.error('❌ 大气数据加载失败：', err);
          alert('大气数据接口错误：' + err.message);
        });
    })
    .catch(err => {
      console.error('❌ 区县边界加载失败：', err);
      alert('区县边界加载错误：' + err.message);
    });
});

// 4. 监听计算方式变化，更新所有标记点的弹窗内容
watch(
  () => props.calculationMethod,
  (newMethod) => {
    markers.value.forEach(({ marker, item }) => {
      // 重新绑定弹窗内容（使用新的计算方式）
      marker.bindPopup(generatePopupContent(item, newMethod));
    });
    console.log(`✅ 已切换为${newMethod === 'weight' ? '重量' : '体积'}计算方式，弹窗内容已更新`);
  }
);
</script>

<style scoped>
/* 样式保持不变，仅需确保弹窗内容布局适配单组数据 */
.map-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}
.map-container {
  width: 100% !important;
  height: 100% !important;
}

/* 弹窗样式 */
::v-deep .leaflet-popup-content-wrapper {
  padding: 0 !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

::v-deep .leaflet-popup-content {
  margin: 0 !important;
  width: auto !important;
  max-width: 300px; /* 适当减小最大宽度，适配单列布局 */
}

::v-deep .popup-container {
  min-width: 280px;
  padding: 12px;
  font-family: "Microsoft YaHei", sans-serif;
}

::v-deep .popup-header {
  margin-bottom: 10px;
}

::v-deep .popup-title {
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: #0066CC;
  margin: 0 0 5px;
  padding-bottom: 6px;
  border-bottom: 1.5px solid #0066CC;
}

::v-deep .popup-info-list {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

::v-deep .popup-info-list li {
  display: flex;
  margin: 0;
  padding: 3px 6px;
  background: #f9f9f9;
  border-radius: 3px;
}

::v-deep .info-label {
  flex: 0 0 85px;
  font-weight: 600;
  color: #333;
  font-size: 13px;
}

::v-deep .info-value {
  flex: 1;
  color: #666;
  font-size: 13px;
   white-space: nowrap;
}

::v-deep .grid-container {
  display: grid;
  grid-template-columns: 1fr; /* 改为单列布局，适配分类后的指标 */
  gap: 6px;
}

::v-deep .grid-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

::v-deep .data-item {
  display: flex;
  justify-content: space-between;
  padding: 6px 8px;
  background: #f9f9f9;
  border-radius: 3px;
}

::v-deep .item-label {
  font-weight: 600;
  color: #555;
  font-size: 13px;
}

::v-deep .item-value {
  color: #000;
  font-size: 13px;
}

/* 隐藏弹窗箭头 */
::v-deep .leaflet-popup-tip {
  display: none;
}

/* 标记点样式 */
::v-deep .leaflet-circle-marker {
  stroke-width: 1.5px !important;
}

/* 大气数据标记点的悬停效果 */
::v-deep .leaflet-marker-pane .leaflet-circle-marker[fill="#118AB2"]:hover {
  fill-opacity: 1 !important;
  stroke-width: 2.5px !important;
}
</style>