richard/openclaw-market
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 添加 2D/3D 地图切换与坐标偏移功能

Browse Source 
- 新增 WorldMap 组件，支持 2D 世界地图视图
- 主页添加 2D/3D 视图切换按钮
- 实现确定性坐标偏移算法，分散同城用户位置
- 更新 heatmap 和 register API 使用坐标偏移
This commit is contained in:
richarjiang
2026-03-15 14:19:36 +08:00
parent 7db59c9290
commit 8d094ad5cc
5 changed files with 513 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
app/[locale]/page.tsx
View File

@@ -3,7 +3,7 @@
import { useState } from "react";
import dynamic from "next/dynamic";
import { useTranslations } from "next-intl";
import { Map } from "lucide-react";
import { Globe, Map } from "lucide-react";
import { Navbar } from "@/components/layout/navbar";
import { InstallBanner } from "@/components/layout/install-banner";
import { ParticleBg } from "@/components/layout/particle-bg";
@@ -14,20 +14,29 @@ import { ClawFeed } from "@/components/dashboard/claw-feed";
import { RegionRanking } from "@/components/dashboard/region-ranking";
import { cn } from "@/lib/utils";
const ContinentMap = dynamic(
const WorldMap = dynamic(
() =>
import("@/components/map/continent-map").then((m) => ({
default: m.ContinentMap,
import("@/components/map/world-map").then((m) => ({
default: m.WorldMap,
})),
{ ssr: false }
{
ssr: false,
loading: () => (
<div className="flex h-full items-center justify-center">
<div className="flex flex-col items-center gap-3">
<div className="h-8 w-8 animate-spin rounded-full border-2 border-[var(--accent-cyan)] border-t-transparent" />
<span className="font-mono text-xs text-[var(--text-muted)]">Loading map...</span>
</div>
</div>
),
}
);
const continentSlugs = ["asia", "europe", "americas", "africa", "oceania"] as const;
type ViewMode = "2d" | "3d";
export default function HomePage() {
const [activeContinent, setActiveContinent] = useState<string>("asia");
const tContinents = useTranslations("continents");
const tRegion = useTranslations("regionExplorer");
const [viewMode, setViewMode] = useState<ViewMode>("2d");
const tNavbar = useTranslations("navbar");
return (
<div className="relative min-h-screen">
@@ -35,11 +44,12 @@ export default function HomePage() {
<Navbar />
<main className="relative z-10 mx-auto max-w-[1800px] px-4 pt-20 pb-8">
{/* Section 1: Globe + Dashboard */}
{/* Section 1: Main Map View + Dashboard */}
<section className="min-h-[calc(100vh-5rem)]">
<div className="mb-4">
<InstallBanner />
</div>
<div className="grid gap-4 lg:grid-cols-[280px_1fr_280px]">
{/* Left Panel */}
<div className="flex flex-col gap-4">
@@ -47,11 +57,49 @@ export default function HomePage() {
<RegionRanking />
</div>
{/* Center - Globe + Timeline */}
{/* Center - Map/Globe + Timeline */}
<div className="flex flex-col gap-4">
<div className="h-[500px] lg:h-[600px]">
<GlobeView />
{/* View Switcher + Map Container */}
<div className="relative h-[500px] lg:h-[600px]">
{/* View Mode Toggle */}
<div className="absolute left-4 top-4 z-20 flex rounded-lg border border-white/10 bg-[var(--bg-card)]/90 p-1 backdrop-blur-sm">
<button
onClick={() => setViewMode("2d")}
className={cn(
"flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-all",
viewMode === "2d"
? "bg-[var(--accent-cyan)]/20 text-[var(--accent-cyan)]"
: "text-[var(--text-muted)] hover:text-[var(--text-secondary)]"
)}
>
<Map className="h-3.5 w-3.5" />
{tNavbar("map")}
</button>
<button
onClick={() => setViewMode("3d")}
className={cn(
"flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-all",
viewMode === "3d"
? "bg-[var(--accent-cyan)]/20 text-[var(--accent-cyan)]"
: "text-[var(--text-muted)] hover:text-[var(--text-secondary)]"
)}
>
<Globe className="h-3.5 w-3.5" />
{tNavbar("globe")}
</button>
</div>
{/* Map View */}
{viewMode === "2d" && (
<WorldMap className="h-full w-full" />
)}
{/* Globe View */}
{viewMode === "3d" && (
<GlobeView />
)}
</div>
<ActivityTimeline />
</div>
@@ -61,47 +109,6 @@ export default function HomePage() {
</div>
</div>
</section>
{/* Section 2: Region Explorer */}
<section className="mt-8">
<div className="mb-4 flex items-center justify-between">
<h2
className="flex items-center gap-2 font-mono text-2xl font-bold"
style={{
color: "var(--accent-cyan)",
textShadow: "var(--glow-cyan)",
}}
>
<Map className="h-5 w-5" />
{tRegion("title")}
</h2>
</div>
{/* Continent Tabs */}
<div className="mb-4 flex flex-wrap gap-2">
{continentSlugs.map((slug) => (
<button
key={slug}
onClick={() => setActiveContinent(slug)}
className={cn(
"rounded-lg border px-4 py-2 text-sm font-medium transition-all",
activeContinent === slug
? "border-[var(--accent-cyan)]/30 bg-[var(--accent-cyan)]/10 text-[var(--accent-cyan)]"
: "border-white/5 text-[var(--text-muted)] hover:border-white/10 hover:text-[var(--text-secondary)]"
)}
>
{tContinents(slug)}
</button>
))}
</div>
{/* Map — explicit height so MapLibre can render */}
<ContinentMap
key={activeContinent}
slug={activeContinent}
className="h-[calc(100vh-14rem)]"
/>
</section>
</main>
</div>
);

95
app/api/v1/heatmap/route.ts
View File

@@ -1,8 +1,9 @@
import { NextResponse } from "next/server";
import { and, isNotNull, sql } from "drizzle-orm";
import { and, isNotNull } from "drizzle-orm";
import { db } from "@/lib/db";
import { claws } from "@/lib/db/schema";
import { getCacheHeatmap, setCacheHeatmap } from "@/lib/redis";
import { applyDeterministicOffset } from "@/lib/geo/offset";
export async function GET() {
try {
@@ -13,31 +14,7 @@ export async function GET() {
const fiveMinutesAgo = new Date(Date.now() - 5 * 60 * 1000);
// Query all claws with coordinates, grouped by location
const locationRows = await db
.select({
city: claws.city,
country: claws.country,
latitude: claws.latitude,
longitude: claws.longitude,
count: sql<number>`count(*)`,
onlineCount: sql<number>`sum(case when ${claws.lastHeartbeat} >= ${fiveMinutesAgo} then 1 else 0 end)`,
})
.from(claws)
.where(
and(
isNotNull(claws.latitude),
isNotNull(claws.longitude)
)
)
.groupBy(
claws.city,
claws.country,
claws.latitude,
claws.longitude
);
// Fetch individual claw details for all claws with coordinates
// Fetch all claws with base coordinates
const clawDetails = await db
.select({
id: claws.id,
@@ -56,30 +33,56 @@ export async function GET() {
)
);
// Group claw details by location key
const clawsByLocation = new Map<string, Array<{ id: string; name: string; isOnline: boolean }>>();
// Apply deterministic offset to each claw and group by unique coordinates
const pointMap = new Map<string, {
lat: number;
lng: number;
city: string | null;
country: string | null;
claws: Array<{ id: string; name: string; isOnline: boolean }>;
onlineCount: number;
}>();
for (const claw of clawDetails) {
const key = `${claw.latitude}:${claw.longitude}`;
if (!claw.latitude || !claw.longitude) continue;
const baseLat = Number(claw.latitude);
const baseLng = Number(claw.longitude);
// Apply deterministic offset based on claw ID
const offset = applyDeterministicOffset(baseLat, baseLng, claw.id);
const isOnline = claw.lastHeartbeat ? claw.lastHeartbeat >= fiveMinutesAgo : false;
const list = clawsByLocation.get(key) ?? [];
list.push({ id: claw.id, name: claw.name, isOnline });
clawsByLocation.set(key, list);
// Use rounded coordinates as key for grouping (within ~100m)
const key = `${offset.lat.toFixed(4)}:${offset.lng.toFixed(4)}`;
const existing = pointMap.get(key);
if (existing) {
existing.claws.push({ id: claw.id, name: claw.name, isOnline });
if (isOnline) existing.onlineCount++;
} else {
pointMap.set(key, {
lat: offset.lat,
lng: offset.lng,
city: claw.city,
country: claw.country,
claws: [{ id: claw.id, name: claw.name, isOnline }],
onlineCount: isOnline ? 1 : 0,
});
}
}
const points = locationRows.map((row) => {
const key = `${row.latitude}:${row.longitude}`;
const clawList = (clawsByLocation.get(key) ?? []).slice(0, 20);
return {
lat: Number(row.latitude),
lng: Number(row.longitude),
weight: row.count,
clawCount: row.count,
onlineCount: Number(row.onlineCount ?? 0),
city: row.city,
country: row.country,
claws: clawList,
};
});
// Convert map to array of points
const points = Array.from(pointMap.values()).map((point) => ({
lat: point.lat,
lng: point.lng,
weight: point.claws.length,
clawCount: point.claws.length,
onlineCount: point.onlineCount,
city: point.city,
country: point.country,
claws: point.claws.slice(0, 20), // Limit to 20 claws per point for display
}));
const lastUpdated = new Date().toISOString();
const responseData = { points, lastUpdated };

14
app/api/v1/register/route.ts
View File

@@ -11,6 +11,7 @@ import {
} from "@/lib/redis";
import { generateApiKey } from "@/lib/auth/api-key";
import { getGeoLocation } from "@/lib/geo/ip-location";
import { applyDeterministicOffset } from "@/lib/geo/offset";
import { registerSchema } from "@/lib/validators/schemas";
function getClientIp(req: NextRequest): string {
@@ -39,6 +40,15 @@ export async function POST(req: NextRequest) {
const geo = await getGeoLocation(clientIp);
const now = new Date();
// Apply deterministic offset to spread out users in the same city
let finalLat: number | null = null;
let finalLng: number | null = null;
if (geo) {
const offset = applyDeterministicOffset(geo.latitude, geo.longitude, clawId);
finalLat = offset.lat;
finalLng = offset.lng;
}
await db.insert(claws).values({
id: clawId,
apiKey,
@@ -46,8 +56,8 @@ export async function POST(req: NextRequest) {
model: model ?? null,
platform: platform ?? null,
ip: clientIp,
latitude: geo ? String(geo.latitude) : null,
longitude: geo ? String(geo.longitude) : null,
latitude: finalLat !== null ? String(finalLat) : null,
longitude: finalLng !== null ? String(finalLng) : null,
city: geo?.city ?? null,
country: geo?.country ?? null,
countryCode: geo?.countryCode ?? null,

319
components/map/world-map.tsx Normal file
View File

@@ -0,0 +1,319 @@
"use client";
import { useState, useMemo, useCallback } from "react";
import { useLocale } from "next-intl";
import Map, { Source, Layer, Popup, NavigationControl } from "react-map-gl/maplibre";
import type { MapLayerMouseEvent, LngLatLike, MapRef } from "react-map-gl/maplibre";
import type { LayerSpecification } from "maplibre-gl";
import "maplibre-gl/dist/maplibre-gl.css";
import { useHeatmapData, type HeatmapPoint } from "@/hooks/use-heatmap-data";
import { cn } from "@/lib/utils";
import { MapPopup } from "./map-popup";
const CARTO_STYLE =
"https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json";
// Generate claw icon as ImageData using Canvas
function createClawIconImage(): HTMLImageElement | null {
if (typeof document === "undefined") return null;
const canvas = document.createElement("canvas");
canvas.width = 64;
canvas.height = 64;
const ctx = canvas.getContext("2d");
if (!ctx) return null;
// Draw lobster body
ctx.fillStyle = "#ff6b35";
ctx.beginPath();
ctx.ellipse(32, 38, 12, 18, 0, 0, Math.PI * 2);
ctx.fill();
// Tail segments
ctx.fillStyle = "#e55a2b";
ctx.beginPath();
ctx.ellipse(32, 54, 8, 6, 0, 0, Math.PI * 2);
ctx.fill();
ctx.fillStyle = "#cc4a1f";
ctx.beginPath();
ctx.ellipse(32, 60, 5, 4, 0, 0, Math.PI * 2);
ctx.fill();
// Head
ctx.fillStyle = "#ff6b35";
ctx.beginPath();
ctx.ellipse(32, 22, 10, 8, 0, 0, Math.PI * 2);
ctx.fill();
// Eyes
ctx.fillStyle = "#1a1a2e";
ctx.beginPath();
ctx.arc(27, 18, 3, 0, Math.PI * 2);
ctx.fill();
ctx.beginPath();
ctx.arc(37, 18, 3, 0, Math.PI * 2);
ctx.fill();
// Eye highlights
ctx.fillStyle = "#fff";
ctx.beginPath();
ctx.arc(27.5, 17, 1, 0, Math.PI * 2);
ctx.fill();
ctx.beginPath();
ctx.arc(37.5, 17, 1, 0, Math.PI * 2);
ctx.fill();
// Antennae
ctx.strokeStyle = "#ff6b35";
ctx.lineWidth = 2;
ctx.lineCap = "round";
ctx.beginPath();
ctx.moveTo(24, 14);
ctx.quadraticCurveTo(18, 8, 14, 4);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(40, 14);
ctx.quadraticCurveTo(46, 8, 50, 4);
ctx.stroke();
// Left claw
ctx.fillStyle = "#ff6b35";
ctx.beginPath();
ctx.ellipse(14, 32, 8, 6, 0, 0, Math.PI * 2);
ctx.fill();
ctx.beginPath();
ctx.ellipse(10, 28, 5, 4, 0, 0, Math.PI * 2);
ctx.fill();
ctx.beginPath();
ctx.ellipse(10, 36, 5, 4, 0, 0, Math.PI * 2);
ctx.fill();
// Right claw
ctx.beginPath();
ctx.ellipse(50, 32, 8, 6, 0, 0, Math.PI * 2);
ctx.fill();
ctx.beginPath();
ctx.ellipse(54, 28, 5, 4, 0, 0, Math.PI * 2);
ctx.fill();
ctx.beginPath();
ctx.ellipse(54, 36, 5, 4, 0, 0, Math.PI * 2);
ctx.fill();
// Legs
ctx.strokeStyle = "#e55a2b";
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(22, 40);
ctx.lineTo(14, 44);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(22, 46);
ctx.lineTo(14, 52);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(42, 40);
ctx.lineTo(50, 44);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(42, 46);
ctx.lineTo(50, 52);
ctx.stroke();
const img = new Image();
img.src = canvas.toDataURL();
return img;
}
const heatmapLayer: LayerSpecification = {
id: "claw-heat",
type: "heatmap",
source: "claws",
paint: {
"heatmap-weight": ["get", "weight"],
"heatmap-intensity": 1,
"heatmap-radius": 30,
"heatmap-opacity": 0.6,
"heatmap-color": [
"interpolate",
["linear"],
["heatmap-density"],
0,
"rgba(0,0,0,0)",
0.2,
"rgba(0,240,255,0.15)",
0.4,
"rgba(0,240,255,0.3)",
0.6,
"rgba(0,200,220,0.5)",
1,
"rgba(0,240,255,0.8)",
],
},
};
const symbolLayer: LayerSpecification = {
id: "claw-icons",
type: "symbol",
source: "claws",
layout: {
"icon-image": "claw-icon",
"icon-size": [
"interpolate",
["linear"],
["get", "weight"],
1,
0.3,
5,
0.5,
10,
0.7,
],
"icon-allow-overlap": true,
"icon-anchor": "center",
},
paint: {
"icon-opacity": [
"case",
[">", ["get", "onlineCount"], 0],
1,
0.4,
],
},
};
interface WorldMapProps {
className?: string;
}
export function WorldMap({ className }: WorldMapProps) {
const locale = useLocale();
const { points } = useHeatmapData(30000);
const [popupPoint, setPopupPoint] = useState<HeatmapPoint | null>(null);
const [popupLngLat, setPopupLngLat] = useState<LngLatLike | null>(null);
// Build a MapLibre expression: coalesce(get("name:zh"), get("name_en"), get("name"))
// For English, just use name_en with name fallback.
const localizedTextField = useMemo(
() =>
locale === "en"
? ["coalesce", ["get", "name_en"], ["get", "name"]]
: ["coalesce", ["get", `name:${locale}`], ["get", "name_en"], ["get", "name"]],
[locale]
);
const handleLoad = useCallback(
(e: { target: MapRef["getMap"] extends () => infer M ? M : never }) => {
const map = e.target;
// Create and load claw icon
const iconImg = createClawIconImage();
if (iconImg) {
iconImg.onload = () => {
if (!map.hasImage("claw-icon")) {
map.addImage("claw-icon", iconImg);
}
};
}
for (const layer of map.getStyle().layers ?? []) {
if (layer.type === "symbol") {
const tf = map.getLayoutProperty(layer.id, "text-field");
if (tf != null) {
map.setLayoutProperty(layer.id, "text-field", localizedTextField);
}
}
}
},
[localizedTextField]
);
const geojson = useMemo(() => {
const features = points.map((p) => ({
type: "Feature" as const,
geometry: {
type: "Point" as const,
coordinates: [p.lng, p.lat],
},
properties: {
weight: p.weight,
clawCount: p.clawCount,
onlineCount: p.onlineCount,
city: p.city,
country: p.country,
claws: JSON.stringify(p.claws),
},
}));
return {
type: "FeatureCollection" as const,
features,
};
}, [points]);
const handleClick = useCallback(
(e: MapLayerMouseEvent) => {
const feature = e.features?.[0];
if (!feature || feature.geometry.type !== "Point") {
setPopupPoint(null);
return;
}
const props = feature.properties;
const [lng, lat] = feature.geometry.coordinates;
const matched = points.find(
(p) => p.city === props.city && p.country === props.country
);
if (matched) {
setPopupPoint(matched);
setPopupLngLat([lng, lat]);
}
},
[points]
);
return (
<div className={cn("overflow-hidden rounded-xl border border-white/5 bg-[var(--bg-secondary)]", className)}>
<Map
initialViewState={{
longitude: 0,
latitude: 20,
zoom: 1.5,
}}
style={{ width: "100%", height: "100%" }}
mapStyle={CARTO_STYLE}
interactiveLayerIds={["claw-icons"]}
onClick={handleClick}
onLoad={handleLoad}
cursor="default"
attributionControl={false}
minZoom={1}
maxZoom={8}
>
<NavigationControl
position="bottom-right"
showCompass={false}
/>
<Source id="claws" type="geojson" data={geojson}>
<Layer {...heatmapLayer} />
<Layer {...symbolLayer} />
</Source>
{popupPoint && popupLngLat && (
<Popup
longitude={(popupLngLat as [number, number])[0]}
latitude={(popupLngLat as [number, number])[1]}
onClose={() => setPopupPoint(null)}
closeButton={false}
className="maplibre-dark-popup"
maxWidth="280px"
>
<MapPopup
point={popupPoint}
onClose={() => setPopupPoint(null)}
/>
</Popup>
)}
</Map>
</div>
);
}

72
lib/geo/offset.ts Normal file
View File

@@ -0,0 +1,72 @@
/**
* Generate a deterministic offset based on a unique identifier.
* This ensures the same ID always gets the same offset,
* allowing multiple users in the same city to be spread out
* while maintaining consistent positions.
*
* @param id - Unique identifier (e.g., claw ID)
* @param maxOffsetKm - Maximum offset in kilometers (default: 15km)
* @returns Object with lat and lng offsets in degrees
*/
export function generateDeterministicOffset(
id: string,
maxOffsetKm: number = 15
): { latOffset: number; lngOffset: number } {
// Simple hash function to convert string to number
let hash = 0;
for (let i = 0; i < id.length; i++) {
const char = id.charCodeAt(i);
hash = ((hash << 5) - hash) + char;
hash = hash & hash; // Convert to 32-bit integer
}
// Use the hash to generate two pseudo-random values between -1 and 1
// Using simple modulo arithmetic for determinism
const seed1 = Math.abs(hash % 10000) / 10000; // 0 to 1
const seed2 = Math.abs((hash >> 8) % 10000) / 10000; // 0 to 1
// Convert to -1 to 1 range with better distribution
const factor1 = (seed1 * 2 - 1);
const factor2 = (seed2 * 2 - 1);
// Convert km to degrees (approximate)
// 1 degree latitude ≈ 111km
// 1 degree longitude varies by latitude (cos(lat) * 111km)
// We use a rough average here
const kmPerDegree = 111;
const maxOffsetDegrees = maxOffsetKm / kmPerDegree;
return {
latOffset: factor1 * maxOffsetDegrees,
lngOffset: factor2 * maxOffsetDegrees,
};
}
/**
* Apply deterministic offset to coordinates.
* This spreads out users in the same city while keeping
* each user's position consistent.
*
* @param lat - Original latitude
* @param lng - Original longitude
* @param id - Unique identifier for deterministic offset
* @param maxOffsetKm - Maximum offset in kilometers
* @returns New coordinates with offset applied
*/
export function applyDeterministicOffset(
lat: number,
lng: number,
id: string,
maxOffsetKm: number = 15
): { lat: number; lng: number } {
const { latOffset, lngOffset } = generateDeterministicOffset(id, maxOffsetKm);
// Adjust longitude offset based on latitude
// (longitude degrees get smaller towards poles)
const lngCorrection = Math.cos((lat * Math.PI) / 180);
return {
lat: lat + latOffset,
lng: lng + lngOffset * lngCorrection,
};
}