Files
openclaw-market/hooks/use-heatmap-data.ts
richarjiang e79d721615 feat: 用 react-map-gl + MapLibre 替换 react-simple-maps 实现 2D 地图
- 替换 react-simple-maps/d3-geo/topojson-client 为 react-map-gl + maplibre-gl
- 使用 CARTO dark-matter 免费暗色瓦片,自带国家/城市名标注
- 基于 locale 动态切换地图标注语言(name:zh / name_en)
- MapLibre 原生 heatmap + circle 双层渲染替代 SVG 热力图
- 提取 MapPopup 组件,配合 react-map-gl Popup 实现点击弹窗
- continent page 改为 dynamic import (ssr: false)
- dev 模式去掉 Turbopack 以兼容 maplibre-gl
- 删除 heatmap-layer.tsx 和 react-simple-maps 类型声明
2026-03-13 14:46:23 +08:00

53 lines
1.1 KiB
TypeScript

"use client";
import { useState, useEffect, useCallback } from "react";
export interface ClawInfo {
id: string;
name: string;
isOnline: boolean;
}
export interface HeatmapPoint {
lat: number;
lng: number;
weight: number;
clawCount: number;
onlineCount: number;
city: string;
country: string;
claws: ClawInfo[];
}
interface HeatmapData {
points: HeatmapPoint[];
lastUpdated: string;
}
export function useHeatmapData(refreshInterval = 30000) {
const [data, setData] = useState<HeatmapData>({ points: [], lastUpdated: "" });
const [isLoading, setIsLoading] = useState(true);
const fetchData = useCallback(async () => {
try {
const res = await fetch("/api/v1/heatmap");
if (res.ok) {
const json = await res.json();
setData(json);
}
} catch {
// silently fail, will retry on next interval
} finally {
setIsLoading(false);
}
}, []);
useEffect(() => {
fetchData();
const interval = setInterval(fetchData, refreshInterval);
return () => clearInterval(interval);
}, [fetchData, refreshInterval]);
return { ...data, isLoading, refresh: fetchData };
}