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

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 = {
-  id: "claw-circles",
-  type: "circle",
+const symbolLayer: LayerSpecification = {
+  id: "claw-icons",
+  type: "symbol",
   source: "claws",
-  paint: {
-    "circle-radius": [
+  layout: {
+    "icon-image": "claw-icon",
+    "icon-size": [
       "interpolate",
       ["linear"],
       ["get", "weight"],
       1,
+      0.3,
       5,
-      5,
+      0.5,
       10,
-      10,
-      16,
+      0.7,
     ],
-    "circle-color": [
+    "icon-allow-overlap": true,
+    "icon-anchor": "center",
+  },
+  paint: {
+    "icon-opacity": [
       "case",
       [">", ["get", "onlineCount"], 0],
-      "rgba(0, 240, 255, 0.7)",
-      "rgba(0, 240, 255, 0.2)",
+      1,
+      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 =
-    locale === "en"
-      ? ["coalesce", ["get", "name_en"], ["get", "name"]]
-      : ["coalesce", ["get", `name:${locale}`], ["get", "name_en"], ["get", "name"]];
+  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");
@@ -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 && (