feat: 更新地图标点图标为龙虾
This commit is contained in:
richarjiang
@@ -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}
|
||||
htmlLat={(d: object) => (d as LabelData).lat}
|
||||
htmlLng={(d: object) => (d as LabelData).lng}
|
||||
htmlAltitude={0.01}
|
||||
htmlElement={(d: object) => {
|
||||
const label = d as LabelData;
|
||||
const el = document.createElement("div");
|
||||
el.textContent = label.name;
|
||||
el.style.color = "rgba(0, 240, 255, 0.5)";
|
||||
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;
|
||||
}}
|
||||
labelsData={labels}
|
||||
labelLat={(d: object) => (d as LabelData).lat}
|
||||
labelLng={(d: object) => (d as LabelData).lng}
|
||||
labelAltitude={0.01}
|
||||
labelSize={1.5}
|
||||
labelDotRadius={0}
|
||||
labelText={(d: object) => (d as LabelData).name}
|
||||
labelColor={() => "rgba(0, 240, 255, 0.5)"}
|
||||
labelResolution={2}
|
||||
// Graticules
|
||||
showGraticules={true}
|
||||
// Points
|
||||
pointsData={points}
|
||||
pointLat={(d: object) => (d as HeatmapPoint).lat}
|
||||
pointLng={(d: object) => (d as HeatmapPoint).lng}
|
||||
pointAltitude={(d: object) => {
|
||||
// Points with claw icons (using htmlElements for custom icons)
|
||||
htmlElementsData={points}
|
||||
htmlLat={(d: object) => (d as HeatmapPoint).lat}
|
||||
htmlLng={(d: object) => (d as HeatmapPoint).lng}
|
||||
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);
|
||||
return p.onlineCount > 0 ? base : base * 0.6;
|
||||
const el = document.createElement("div");
|
||||
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}
|
||||
|
||||
@@ -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 && (
|
||||
|
||||
Reference in New Issue
Block a user