彩色卫星云图接入

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

const API_KEY = 'YOUR_API_KEY';

// 向日葵卫星覆盖范围：[[南, 西], [北, 东]]
const HIMAWARI_BOUNDS: [[number, number], [number, number]] = [
  [0, 67.5],
  [55.77, 135],
];

export default function SatelliteDemo() {
  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([30.0, 100.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/himawari/meta?apikey=${API_KEY}&timezone=Asia/Shanghai`
        ).then(r => r.json());

        // 2. 构建卫星图 URL（注意双层 himawari 路径）
        const url = `https://api.mirror-earth.com/api/vis/himawari/himawari/${time}.jpeg?size=2048&apikey=${API_KEY}&timezone=Asia/Shanghai`;

        // 3. 叠加到地图上
        L.imageOverlay(url, HIMAWARI_BOUNDS, { opacity: 0.9 }).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 HIMAWARI_BOUNDS = [
  [0, 67.5],
  [55.77, 135],
];

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([30.0, 100.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/himawari/meta?apikey=${API_KEY}&timezone=Asia/Shanghai`
    ).then(r => r.json());

    // 2. 构建 URL（注意双层 himawari 路径）
    const url = `https://api.mirror-earth.com/api/vis/himawari/himawari/${time}.jpeg?size=2048&apikey=${API_KEY}&timezone=Asia/Shanghai`;

    // 3. 叠加到地图
    L.imageOverlay(url, HIMAWARI_BOUNDS, { opacity: 0.9 }).addTo(map);
    status.value = `向日葵卫星云图已加载（${time}）`;
  } catch {
    status.value = '卫星云图加载失败，请检查 API Key';
  }
});

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