雷达拼图接入

import { useEffect, useRef, useState } from 'react';
import 'leaflet/dist/leaflet.css';

const API_KEY = 'YOUR_API_KEY';

// 全国雷达拼图覆盖范围：[[南, 西], [北, 东]]
const RADAR_BOUNDS: [[number, number], [number, number]] = [
  [15.5201, 71.965],
  [54.0081, 148.7043],
];

export default function RadarDemo() {
  const mapRef = useRef<HTMLDivElement>(null);
  const mapInstance = useRef<any>(null);
  const [status, setStatus] = useState('正在加载雷达数据...');

  useEffect(() => {
    if (!mapRef.current || mapInstance.current) return;

    const init = async () => {
      const L: any = await import('leaflet');
      const map = L.map(mapRef.current).setView([35.0, 110.0], 4);
      L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', {
        subdomains: ['a', 'b', 'c', 'd'],
        attribution: '© CartoDB',
      }).addTo(map);
      mapInstance.current = map;

      try {
        // 1. 获取最新雷达时间
        const { data: [time] } = await fetch(
          `https://api.mirror-earth.com/api/vis/radar/meta?apikey=${API_KEY}&timezone=Asia/Shanghai`
        ).then(r => r.json());

        // 2. 构建雷达图 URL（WebP 格式，含透明通道）
        const url = `https://api.mirror-earth.com/api/vis/part/radar/composite_reflectivity/${time}.webp?apikey=${API_KEY}`;

        // 3. 叠加到地图（opacity 可适当提高，无降水区已透明）
        L.imageOverlay(url, RADAR_BOUNDS, { opacity: 0.85 }).addTo(map);
        setStatus(`雷达拼图已加载（${time}）`);
      } catch {
        setStatus('雷达数据加载失败，请检查 API Key');
      }
    };

    init();

    return () => {
      mapInstance.current?.remove();
      mapInstance.current = null;
    };
  }, []);

  return (
    <div>
      <p style={{ padding: '8px 12px', background: '#fafafa', margin: 0 }}>{status}</p>
      <div ref={mapRef} style={{ width: '100%', height: '500px' }} />
    </div>
  );
}

<template>
  <div>
    <p style="padding: 8px 12px; background: #fafafa; margin: 0">{{ status }}</p>
    <div ref="mapRef" style="width: 100%; height: 500px" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';

const API_KEY = 'YOUR_API_KEY';

// 全国雷达拼图覆盖范围：[[南, 西], [北, 东]]
const RADAR_BOUNDS = [
  [15.5201, 71.965],
  [54.0081, 148.7043],
];

const mapRef = ref<HTMLDivElement>();
const status = ref('正在加载雷达数据...');
let map: any = null;

onMounted(async () => {
  const L: any = await import('leaflet');
  await import('leaflet/dist/leaflet.css');

  map = L.map(mapRef.value!).setView([35.0, 110.0], 4);
  L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', {
    subdomains: ['a', 'b', 'c', 'd'],
    attribution: '© CartoDB',
  }).addTo(map);

  try {
    // 1. 获取最新雷达时间
    const { data: [time] } = await fetch(
      `https://api.mirror-earth.com/api/vis/radar/meta?apikey=${API_KEY}&timezone=Asia/Shanghai`
    ).then(r => r.json());

    // 2. 构建雷达图 URL
    const url = `https://api.mirror-earth.com/api/vis/part/radar/composite_reflectivity/${time}.webp?apikey=${API_KEY}`;

    // 3. 叠加到地图
    L.imageOverlay(url, RADAR_BOUNDS, { opacity: 0.85 }).addTo(map);
    status.value = `雷达拼图已加载（${time}）`;
  } catch {
    status.value = '雷达数据加载失败，请检查 API Key';
  }
});

onUnmounted(() => {
  map?.remove();
});
</script>