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

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

Browse Source
This commit is contained in:
richarjiang
2026-03-14 19:04:09 +08:00
parent c76ebe04e3
commit 48ac785290
5 changed files with 9904 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
components/globe/globe-view.tsx
View File

@@ -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}