feat: 更新地图标点图标为龙虾

.env.example

@@ -1,4 +0,0 @@
-DATABASE_URL=mysql://root:password@localhost:3306/openclaw
-REDIS_URL=redis://localhost:6379
-IP_API_URL=http://ip-api.com/json
-NEXT_PUBLIC_APP_URL=http://localhost:3000

components/globe/globe-view.tsx

@@ -105,10 +105,6 @@ export function GlobeView() {
     }
   }, []);
 
-  const handlePointClick = useCallback((point: object) => {
-    setSelectedPoint(point as HeatmapPoint);
-  }, []);
-
   return (
     <div ref={containerRef} className="relative h-full w-full overflow-hidden rounded-xl border border-white/5">
       {dimensions.width > 0 && (
@@ -127,46 +123,55 @@ export function GlobeView() {
           polygonStrokeColor={() => "rgba(0, 240, 255, 0.15)"}
           polygonAltitude={0.005}
           // Country name labels (use HTML elements for CJK support)
-          htmlElementsData={labels}
+          labelsData={labels}
-          htmlLat={(d: object) => (d as LabelData).lat}
+          labelLat={(d: object) => (d as LabelData).lat}
-          htmlLng={(d: object) => (d as LabelData).lng}
+          labelLng={(d: object) => (d as LabelData).lng}
-          htmlAltitude={0.01}
+          labelAltitude={0.01}
-          htmlElement={(d: object) => {
+          labelSize={1.5}
-            const label = d as LabelData;
+          labelDotRadius={0}
-            const el = document.createElement("div");
+          labelText={(d: object) => (d as LabelData).name}
-            el.textContent = label.name;
+          labelColor={() => "rgba(0, 240, 255, 0.5)"}
-            el.style.color = "rgba(0, 240, 255, 0.5)";
+          labelResolution={2}
-            el.style.fontSize = "10px";
-            el.style.fontFamily = "system-ui, -apple-system, sans-serif";
-            el.style.pointerEvents = "none";
-            el.style.userSelect = "none";
-            el.style.whiteSpace = "nowrap";
-            el.style.textShadow = "0 0 4px rgba(0, 240, 255, 0.3)";
-            return el;
-          }}
           // Graticules
           showGraticules={true}
-          // Points
+          // Points with claw icons (using htmlElements for custom icons)
-          pointsData={points}
+          htmlElementsData={points}
-          pointLat={(d: object) => (d as HeatmapPoint).lat}
+          htmlLat={(d: object) => (d as HeatmapPoint).lat}
-          pointLng={(d: object) => (d as HeatmapPoint).lng}
+          htmlLng={(d: object) => (d as HeatmapPoint).lng}
-          pointAltitude={(d: object) => {
+          htmlAltitude={(d: object) => {
             const p = d as HeatmapPoint;
             const base = Math.min(p.weight * 0.02, 0.15);
             return p.onlineCount > 0 ? base : base * 0.5;
           }}
-          pointRadius={(d: object) => {
+          htmlElement={(d: object) => {
             const p = d as HeatmapPoint;
-            const base = Math.max(p.weight * 0.3, 0.4);
+            const el = document.createElement("div");
-            return p.onlineCount > 0 ? base : base * 0.6;
+            const size = p.onlineCount > 0 ? Math.max(p.weight * 0.8, 16) : Math.max(p.weight * 0.5, 12);
+            el.style.width = `${size}px`;
+            el.style.height = `${size}px`;
+            el.style.backgroundImage = "url(/claw-icon.svg)";
+            el.style.backgroundSize = "contain";
+            el.style.backgroundRepeat = "no-repeat";
+            el.style.backgroundPosition = "center";
+            el.style.opacity = p.onlineCount > 0 ? "1" : "0.4";
+            el.style.filter = p.onlineCount > 0 ? "drop-shadow(0 0 4px rgba(0, 240, 255, 0.6))" : "none";
+            el.style.cursor = "pointer";
+            el.style.transition = "transform 0.2s ease";
+            el.dataset.pointId = `${p.city}-${p.country}`;
+
+            // Add click handler directly to the element
+            el.addEventListener("click", () => {
+              setSelectedPoint(p);
+            });
+            el.addEventListener("mouseenter", () => {
+              setHoveredPoint(p);
+            });
+            el.addEventListener("mouseleave", () => {
+              setHoveredPoint(null);
+            });
+
+            return el;
           }}
-          pointColor={(d: object) => {
-            const p = d as HeatmapPoint;
-            return p.onlineCount > 0 ? "#00f0ff" : "#1a5c63";
-          }}
-          pointsMerge={false}
-          onPointHover={(point: object | null) => setHoveredPoint(point as HeatmapPoint | null)}
-          onPointClick={handlePointClick}
           // Arcs
           arcsData={arcs}
           arcStartLat={(d: object) => (d as ArcData).startLat}

components/map/continent-map.tsx

@@ -13,6 +13,118 @@ 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;
+}
+
 interface ContinentViewport {
   longitude: number;
   latitude: number;
@@ -54,36 +166,33 @@ const heatmapLayer: LayerSpecification = {
   },
 };
 
-const circleLayer: LayerSpecification = {
+const symbolLayer: LayerSpecification = {
-  id: "claw-circles",
+  id: "claw-icons",
-  type: "circle",
+  type: "symbol",
   source: "claws",
-  paint: {
+  layout: {
-    "circle-radius": [
+    "icon-image": "claw-icon",
+    "icon-size": [
       "interpolate",
       ["linear"],
       ["get", "weight"],
       1,
+      0.3,
       5,
-      5,
+      0.5,
       10,
-      10,
+      0.7,
-      16,
     ],
-    "circle-color": [
+    "icon-allow-overlap": true,
+    "icon-anchor": "center",
+  },
+  paint: {
+    "icon-opacity": [
       "case",
       [">", ["get", "onlineCount"], 0],
-      "rgba(0, 240, 255, 0.7)",
+      1,
-      "rgba(0, 240, 255, 0.2)",
+      0.4,
     ],
-    "circle-stroke-color": [
-      "case",
-      [">", ["get", "onlineCount"], 0],
-      "rgba(0, 240, 255, 0.9)",
-      "rgba(0, 240, 255, 0.3)",
-    ],
-    "circle-stroke-width": 1,
-    "circle-blur": 0.1,
   },
 };
 
@@ -101,14 +210,28 @@ export function ContinentMap({ slug, className }: ContinentMapProps) {
 
   // Build a MapLibre expression: coalesce(get("name:zh"), get("name_en"), get("name"))
   // For English, just use name_en with name fallback.
-  const localizedTextField =
+  const localizedTextField = useMemo(
+    () =>
       locale === "en"
         ? ["coalesce", ["get", "name_en"], ["get", "name"]]
-      : ["coalesce", ["get", `name:${locale}`], ["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");
@@ -169,7 +292,7 @@ export function ContinentMap({ slug, className }: ContinentMapProps) {
         initialViewState={config}
         style={{ width: "100%", height: "100%" }}
         mapStyle={CARTO_STYLE}
-        interactiveLayerIds={["claw-circles"]}
+        interactiveLayerIds={["claw-icons"]}
         onClick={handleClick}
         onLoad={handleLoad}
         cursor="default"
@@ -177,7 +300,7 @@ export function ContinentMap({ slug, className }: ContinentMapProps) {
       >
         <Source id="claws" type="geojson" data={geojson}>
           <Layer {...heatmapLayer} />
-          <Layer {...circleLayer} />
+          <Layer {...symbolLayer} />
         </Source>
 
         {popupPoint && popupLngLat && (

public/claw-icon.svg

@@ -0,0 +1,34 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
+  <!-- Lobster body -->
+  <ellipse cx="32" cy="38" rx="12" ry="18" fill="#ff6b35"/>
+  <!-- Tail segments -->
+  <ellipse cx="32" cy="54" rx="8" ry="6" fill="#e55a2b"/>
+  <ellipse cx="32" cy="60" rx="5" ry="4" fill="#cc4a1f"/>
+  <!-- Head -->
+  <ellipse cx="32" cy="22" rx="10" ry="8" fill="#ff6b35"/>
+  <!-- Eyes -->
+  <circle cx="27" cy="18" r="3" fill="#1a1a2e"/>
+  <circle cx="37" cy="18" r="3" fill="#1a1a2e"/>
+  <circle cx="27.5" cy="17" r="1" fill="#fff"/>
+  <circle cx="37.5" cy="17" r="1" fill="#fff"/>
+  <!-- Antennae -->
+  <path d="M24 14 Q18 8 14 4" stroke="#ff6b35" stroke-width="2" stroke-linecap="round" fill="none"/>
+  <path d="M40 14 Q46 8 50 4" stroke="#ff6b35" stroke-width="2" stroke-linecap="round" fill="none"/>
+  <!-- Left claw -->
+  <ellipse cx="14" cy="32" rx="8" ry="6" fill="#ff6b35"/>
+  <ellipse cx="10" cy="28" rx="5" ry="4" fill="#ff6b35"/>
+  <ellipse cx="10" cy="36" rx="5" ry="4" fill="#ff6b35"/>
+  <path d="M6 26 Q4 24 6 22" stroke="#ff6b35" stroke-width="2" stroke-linecap="round" fill="none"/>
+  <path d="M6 38 Q4 40 6 42" stroke="#ff6b35" stroke-width="2" stroke-linecap="round" fill="none"/>
+  <!-- Right claw -->
+  <ellipse cx="50" cy="32" rx="8" ry="6" fill="#ff6b35"/>
+  <ellipse cx="54" cy="28" rx="5" ry="4" fill="#ff6b35"/>
+  <ellipse cx="54" cy="36" rx="5" ry="4" fill="#ff6b35"/>
+  <path d="M58 26 Q60 24 58 22" stroke="#ff6b35" stroke-width="2" stroke-linecap="round" fill="none"/>
+  <path d="M58 38 Q60 40 58 42" stroke="#ff6b35" stroke-width="2" stroke-linecap="round" fill="none"/>
+  <!-- Legs -->
+  <line x1="22" y1="40" x2="14" y2="44" stroke="#e55a2b" stroke-width="2" stroke-linecap="round"/>
+  <line x1="22" y1="46" x2="14" y2="52" stroke="#e55a2b" stroke-width="2" stroke-linecap="round"/>
+  <line x1="42" y1="40" x2="50" y2="44" stroke="#e55a2b" stroke-width="2" stroke-linecap="round"/>
+  <line x1="42" y1="46" x2="50" y2="52" stroke="#e55a2b" stroke-width="2" stroke-linecap="round"/>
+</svg>