HRES 图层图片接入

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

const API_KEY = 'YOUR_API_KEY';

// HRES 覆盖范围：格式为 [[南, 西], [北, 东]]
const HRES_BOUNDS: [[number, number], [number, number]] = [
  [14.9587, 69.9588],
  [55.0412, 140.0799],
];

export default function HresImageDemo() {
  const mapRef = useRef<HTMLDivElement>(null);
  const mapInstance = useRef<any>(null);
  const [clickedValue, setClickedValue] = useState<string | null>(null);
  // 将 hresTime 提升到 loadLayers 外部，点击取值时能访问到
  let hresTime = '';

  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, 105.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;

      // 1. 获取最新时间
      const metaRes = await fetch(
        `https://api.mirror-earth.com/api/vis/hres/meta?apikey=${API_KEY}&timezone=Asia/Shanghai`
      );
      const metaJson = await metaRes.json();
      hresTime = metaJson.data[0];

      // 2. 构建图片 URL 并加载图层
      const url = `https://api.mirror-earth.com/api/vis/part/hres/temperature_2m/${hresTime}.webp?apikey=${API_KEY}&timezone=Asia/Shanghai`;
      L.imageOverlay(url, HRES_BOUNDS, { opacity: 0.7 }).addTo(map);

      // 3. 点击取值
      map.on('click', async (e: any) => {
        const { lat, lng } = e.latlng;
        const res = await fetch(
          `https://api.mirror-earth.com/api/vis/point?model=hres&variable=temperature_2m&time=${hresTime}&lat=${lat}&lon=${lng}&apikey=${API_KEY}`
        );
        const data = await res.json();
        setClickedValue(
          `坐标: ${lat.toFixed(2)}, ${lng.toFixed(2)} | 温度: ${data.data[0]}℃`
        );
      });
    };

    init();

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

  return (
    <div>
      <div ref={mapRef} style={{ width: '100%', height: '500px' }} />
      {clickedValue && (
        <div style={{ padding: '8px 12px', background: '#f6ffed', borderTop: '1px solid #b7eb8f' }}>
          {clickedValue}
        </div>
      )}
    </div>
  );
}

<template>
  <div>
    <div ref="mapRef" style="width: 100%; height: 500px" />
    <div v-if="clickedValue" style="padding: 8px 12px; background: #f6ffed; border-top: 1px solid #b7eb8f">
      {{ clickedValue }}
    </div>
  </div>
</template>

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

const API_KEY = 'YOUR_API_KEY';

// HRES 覆盖范围：格式为 [[南, 西], [北, 东]]
const HRES_BOUNDS = [
  [14.9587, 69.9588],
  [55.0412, 140.0799],
];

const mapRef = ref<HTMLDivElement>();
const clickedValue = ref<string | null>(null);
let map: any = null;
// 提升到 handler 外部，点击取值时能访问到
let hresTime = '';

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

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

  // 1. 获取最新时间
  const metaRes = await fetch(
    `https://api.mirror-earth.com/api/vis/hres/meta?apikey=${API_KEY}&timezone=Asia/Shanghai`
  );
  const metaJson = await metaRes.json();
  hresTime = metaJson.data[0];

  // 2. 构建图片 URL 并加载图层
  const url = `https://api.mirror-earth.com/api/vis/part/hres/temperature_2m/${hresTime}.webp?apikey=${API_KEY}&timezone=Asia/Shanghai`;
  L.imageOverlay(url, HRES_BOUNDS, { opacity: 0.7 }).addTo(map);

  // 3. 点击取值
  map.on('click', async (e: any) => {
    const { lat, lng } = e.latlng;
    const res = await fetch(
      `https://api.mirror-earth.com/api/vis/point?model=hres&variable=temperature_2m&time=${hresTime}&lat=${lat}&lon=${lng}&apikey=${API_KEY}`
    );
    const data = await res.json();
    clickedValue.value = `坐标: ${lat.toFixed(2)}, ${lng.toFixed(2)} | 温度: ${data.data[0]}℃`;
  });
});

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