2569718930@qq.com
760 lines
23 KiB
TypeScript
760 lines
23 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useRef } from "react";
|
|
import L from "leaflet";
|
|
import {
|
|
CityDetail,
|
|
CityListItem,
|
|
CitySummary,
|
|
NearbyStation,
|
|
} from "@/lib/dashboard-types";
|
|
import { pickMapNearbyStations } from "@/lib/dashboard-utils";
|
|
|
|
interface UseLeafletMapArgs {
|
|
cities: CityListItem[];
|
|
cityDetailsByName: Record<string, CityDetail>;
|
|
citySummariesByName: Record<string, CitySummary>;
|
|
onClosePanel: () => void;
|
|
onEnsureCityDetail: (
|
|
cityName: string,
|
|
force?: boolean,
|
|
depth?: "panel" | "nearby" | "full",
|
|
) => Promise<CityDetail>;
|
|
onMapInteractionChange: (active: boolean) => void;
|
|
onRegisterStopMotion: (stopMotion: () => void) => void;
|
|
onSelectCity: (cityName: string) => void;
|
|
selectedCity: string | null;
|
|
selectedDetail: CityDetail | null;
|
|
suspendMotion: boolean;
|
|
isLoadingDetail: boolean;
|
|
}
|
|
|
|
const AUTO_NEARBY_MIN_ZOOM = 8;
|
|
const AUTO_NEARBY_MAX_DISTANCE_M = 120000;
|
|
const AUTO_NEARBY_IDLE_REFRESH_DELAY_MS = 10_000;
|
|
const AUTO_NEARBY_MIN_REFRESH_INTERVAL_MS = 60_000;
|
|
const MAP_MAX_ZOOM = 19;
|
|
const CITY_MARKER_DISPLAY_OFFSETS: Record<
|
|
string,
|
|
{ x: number; y: number; zIndexOffset?: number }
|
|
> = {
|
|
// Shek Kong sits between the Hong Kong and Shenzhen cards and gets visually buried
|
|
// by their wide marker bubbles. Shift only the rendered marker, not the true point.
|
|
"shek kong": { x: 34, y: -26, zIndexOffset: 320 },
|
|
"lau fau shan": { x: -40, y: 14, zIndexOffset: 300 },
|
|
};
|
|
|
|
function getMarkerDisplayOffset(cityName: string) {
|
|
return CITY_MARKER_DISPLAY_OFFSETS[String(cityName || "").toLowerCase()] || {
|
|
x: 0,
|
|
y: 0,
|
|
zIndexOffset: 0,
|
|
};
|
|
}
|
|
|
|
function pickMarkerTemperature(
|
|
snapshot?: Pick<CityDetail, "current" | "temp_symbol"> | CitySummary,
|
|
) {
|
|
if (!snapshot) return null;
|
|
const detail = snapshot as Partial<CityDetail>;
|
|
const currentSource = String(
|
|
snapshot.current?.settlement_source ||
|
|
snapshot.current?.settlement_source_label ||
|
|
"",
|
|
)
|
|
.trim()
|
|
.toLowerCase();
|
|
const currentTemp =
|
|
currentSource === "nmc" || currentSource.includes("nmc")
|
|
? null
|
|
: snapshot.current?.temp;
|
|
const isNmcStation = (station?: { source_label?: string | null }) =>
|
|
String(station?.source_label || "")
|
|
.trim()
|
|
.toLowerCase()
|
|
.includes("nmc");
|
|
const candidates = [
|
|
currentTemp,
|
|
detail.airport_current?.temp,
|
|
isNmcStation(detail.airport_primary) ? null : detail.airport_primary?.temp,
|
|
detail.mgm_nearby?.[0]?.temp,
|
|
];
|
|
for (const value of candidates) {
|
|
const numeric = Number(value);
|
|
if (Number.isFinite(numeric)) return numeric;
|
|
}
|
|
return null;
|
|
}
|
|
|
|
function createMarkerIcon(
|
|
city: CityListItem,
|
|
snapshot?: Pick<CityDetail, "current" | "temp_symbol"> | CitySummary,
|
|
) {
|
|
const riskClass = `risk-${city.risk_level}`;
|
|
const label = city.display_name;
|
|
const unit = city.temp_unit === "fahrenheit" ? "°F" : "°C";
|
|
const shortName = label.length > 10 ? `${label.substring(0, 8)}...` : label;
|
|
const markerTemp = pickMarkerTemperature(snapshot);
|
|
const tempText = markerTemp != null ? `${markerTemp}${unit}` : "--";
|
|
const offset = getMarkerDisplayOffset(city.name);
|
|
const styleAttr =
|
|
offset.x || offset.y
|
|
? ` style="transform: translate(${offset.x}px, ${offset.y}px);"`
|
|
: "";
|
|
|
|
return L.divIcon({
|
|
className: "",
|
|
html: `
|
|
<div class="city-marker" data-city="${city.name}"${styleAttr}>
|
|
<div class="marker-bubble ${riskClass}">${tempText}</div>
|
|
<div class="marker-name">${shortName}</div>
|
|
</div>
|
|
`,
|
|
iconAnchor: [40, 22],
|
|
iconSize: [80, 44],
|
|
});
|
|
}
|
|
|
|
function getMarkerSignature(
|
|
city: CityListItem,
|
|
snapshot?: Pick<CityDetail, "current" | "temp_symbol"> | CitySummary,
|
|
) {
|
|
return [
|
|
city.display_name,
|
|
city.risk_level,
|
|
city.temp_unit,
|
|
city.lat,
|
|
city.lon,
|
|
pickMarkerTemperature(snapshot) ?? "",
|
|
].join("|");
|
|
}
|
|
|
|
function buildNearbyIconHtml(detail: CityDetail, station: NearbyStation) {
|
|
const sanitizeWindText = (value?: string | null) => {
|
|
const text = String(value || "").trim();
|
|
if (!text || text === "9999") return "";
|
|
return text;
|
|
};
|
|
const symbol = detail.temp_symbol || "°C";
|
|
const rawLabel =
|
|
station.station_label ||
|
|
station.name ||
|
|
station.station_code ||
|
|
station.icao ||
|
|
"实测 (OBS)";
|
|
const label =
|
|
String(station.source_code || station.source_label || "").trim().toLowerCase() === "nmc" &&
|
|
/\(NMC\)$/i.test(String(rawLabel)) &&
|
|
!String(rawLabel).includes("区域实况")
|
|
? String(rawLabel).replace(/\s*\(NMC\)$/i, "区域实况 (NMC)")
|
|
: rawLabel;
|
|
let windHtml = "";
|
|
const windDirectionText = sanitizeWindText(station.wind_direction_text);
|
|
const windPowerText = sanitizeWindText(station.wind_power_text);
|
|
|
|
if (station.wind_dir != null) {
|
|
const rotation = (Number(station.wind_dir) + 180) % 360;
|
|
const speedRaw = Number(station.wind_speed ?? station.wind_speed_kt);
|
|
const speed = Number.isFinite(speedRaw) ? `${speedRaw.toFixed(1)}k` : "";
|
|
windHtml = `
|
|
<div class="nearby-wind">
|
|
<span class="wind-arrow" style="transform: rotate(${rotation}deg)">↑</span>
|
|
<span class="wind-val">${speed}</span>
|
|
</div>
|
|
`;
|
|
} else if (windDirectionText || windPowerText) {
|
|
const windText = [windDirectionText, windPowerText].filter(Boolean).join(" ");
|
|
windHtml = `
|
|
<div class="nearby-wind">
|
|
<span class="wind-val">${windText}</span>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
return `
|
|
<div class="nearby-marker-premium">
|
|
<div class="nearby-pulse">
|
|
<div class="pulse-ring"></div>
|
|
<div class="pulse-core"></div>
|
|
</div>
|
|
<div class="nearby-content">
|
|
<span class="nearby-label">${label}</span>
|
|
<div class="nearby-stats">
|
|
<span class="nearby-temp-val">${station.temp ?? "--"}</span>
|
|
<span class="nearby-temp-unit">${symbol}</span>
|
|
</div>
|
|
</div>
|
|
${windHtml}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function getNearbyMarkerDisplayOffset(
|
|
detail: CityDetail,
|
|
station: NearbyStation,
|
|
index: number,
|
|
) {
|
|
const cityLat = Number(detail.lat);
|
|
const cityLon = Number(detail.lon);
|
|
const stationLat = Number(station.lat);
|
|
const stationLon = Number(station.lon);
|
|
|
|
if (
|
|
!Number.isFinite(cityLat) ||
|
|
!Number.isFinite(cityLon) ||
|
|
!Number.isFinite(stationLat) ||
|
|
!Number.isFinite(stationLon)
|
|
) {
|
|
return { x: 0, y: 0 };
|
|
}
|
|
|
|
const latDiff = Math.abs(cityLat - stationLat);
|
|
const lonDiff = Math.abs(cityLon - stationLon);
|
|
const isNearCityAnchor = latDiff < 0.02 && lonDiff < 0.02;
|
|
|
|
if (!isNearCityAnchor) {
|
|
return { x: 0, y: 0 };
|
|
}
|
|
|
|
const presets = [
|
|
{ x: 0, y: -58 },
|
|
{ x: 76, y: -34 },
|
|
{ x: -76, y: -34 },
|
|
{ x: 72, y: 34 },
|
|
{ x: -72, y: 34 },
|
|
];
|
|
|
|
return presets[index % presets.length];
|
|
}
|
|
|
|
export function useLeafletMap({
|
|
cities,
|
|
cityDetailsByName,
|
|
citySummariesByName,
|
|
onClosePanel,
|
|
onEnsureCityDetail,
|
|
onMapInteractionChange,
|
|
onRegisterStopMotion,
|
|
onSelectCity,
|
|
selectedCity,
|
|
selectedDetail,
|
|
suspendMotion,
|
|
isLoadingDetail,
|
|
}: UseLeafletMapArgs) {
|
|
const containerRef = useRef<HTMLDivElement | null>(null);
|
|
const mapRef = useRef<L.Map | null>(null);
|
|
const markersRef = useRef<
|
|
Record<string, { city: CityListItem; marker: L.Marker }>
|
|
>({});
|
|
const nearbyLayerRef = useRef<L.LayerGroup | null>(null);
|
|
const autoNearbyCityRef = useRef<string | null>(null);
|
|
const loadingAutoNearbyRef = useRef(false);
|
|
const handlingAutoNearbyRef = useRef(false);
|
|
const lastMovedCityRef = useRef<string | null>(null);
|
|
const suspendMotionRef = useRef(suspendMotion);
|
|
const hasFittedInitialBoundsRef = useRef(false);
|
|
const onClosePanelRef = useRef(onClosePanel);
|
|
const onRegisterStopMotionRef = useRef(onRegisterStopMotion);
|
|
const onSelectCityRef = useRef(onSelectCity);
|
|
const onEnsureCityDetailRef = useRef(onEnsureCityDetail);
|
|
const onMapInteractionChangeRef = useRef(onMapInteractionChange);
|
|
const interactionIdleTimerRef = useRef<ReturnType<typeof setTimeout> | null>(
|
|
null,
|
|
);
|
|
const nearbyRefreshTimerRef = useRef<ReturnType<typeof setTimeout> | null>(
|
|
null,
|
|
);
|
|
const lastNearbyRefreshAtRef = useRef<Record<string, number>>({});
|
|
|
|
useEffect(() => {
|
|
onClosePanelRef.current = onClosePanel;
|
|
}, [onClosePanel]);
|
|
|
|
useEffect(() => {
|
|
onRegisterStopMotionRef.current = onRegisterStopMotion;
|
|
}, [onRegisterStopMotion]);
|
|
|
|
useEffect(() => {
|
|
onSelectCityRef.current = onSelectCity;
|
|
}, [onSelectCity]);
|
|
|
|
useEffect(() => {
|
|
onEnsureCityDetailRef.current = onEnsureCityDetail;
|
|
}, [onEnsureCityDetail]);
|
|
|
|
useEffect(() => {
|
|
onMapInteractionChangeRef.current = onMapInteractionChange;
|
|
}, [onMapInteractionChange]);
|
|
|
|
useEffect(() => {
|
|
suspendMotionRef.current = suspendMotion;
|
|
}, [suspendMotion]);
|
|
|
|
useEffect(() => {
|
|
const container = containerRef.current;
|
|
if (!container || mapRef.current) return;
|
|
|
|
const map = L.map(container, {
|
|
attributionControl: true,
|
|
bounceAtZoomLimits: false,
|
|
center: [30, 10],
|
|
maxZoom: MAP_MAX_ZOOM,
|
|
minZoom: 2,
|
|
zoom: 3,
|
|
zoomControl: false,
|
|
});
|
|
|
|
L.control.zoom({ position: "bottomright" }).addTo(map);
|
|
L.tileLayer(
|
|
"https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png",
|
|
{
|
|
attribution:
|
|
'© <a href="https://www.openstreetmap.org/">OSM</a> © <a href="https://carto.com/">CARTO</a>',
|
|
maxZoom: 19,
|
|
subdomains: "abcd",
|
|
},
|
|
).addTo(map);
|
|
|
|
const nearbyLayer = L.layerGroup().addTo(map);
|
|
mapRef.current = map;
|
|
nearbyLayerRef.current = nearbyLayer;
|
|
|
|
// Track which city we've already moved to for the current selection
|
|
onRegisterStopMotionRef.current(() => {
|
|
map.stop();
|
|
});
|
|
|
|
const handleMapClick = () => {
|
|
onClosePanelRef.current();
|
|
};
|
|
map.on("click", handleMapClick);
|
|
|
|
const markInteracting = () => {
|
|
if (interactionIdleTimerRef.current) {
|
|
clearTimeout(interactionIdleTimerRef.current);
|
|
interactionIdleTimerRef.current = null;
|
|
}
|
|
if (nearbyRefreshTimerRef.current) {
|
|
clearTimeout(nearbyRefreshTimerRef.current);
|
|
nearbyRefreshTimerRef.current = null;
|
|
}
|
|
onMapInteractionChangeRef.current(true);
|
|
};
|
|
|
|
const markIdleSoon = () => {
|
|
if (interactionIdleTimerRef.current) {
|
|
clearTimeout(interactionIdleTimerRef.current);
|
|
}
|
|
interactionIdleTimerRef.current = setTimeout(() => {
|
|
interactionIdleTimerRef.current = null;
|
|
onMapInteractionChangeRef.current(false);
|
|
}, 700);
|
|
};
|
|
|
|
map.on("movestart", markInteracting);
|
|
map.on("zoomstart", markInteracting);
|
|
map.on("dragstart", markInteracting);
|
|
map.on("moveend", markIdleSoon);
|
|
map.on("zoomend", markIdleSoon);
|
|
|
|
return () => {
|
|
onRegisterStopMotionRef.current(() => {});
|
|
if (interactionIdleTimerRef.current) {
|
|
clearTimeout(interactionIdleTimerRef.current);
|
|
interactionIdleTimerRef.current = null;
|
|
}
|
|
if (nearbyRefreshTimerRef.current) {
|
|
clearTimeout(nearbyRefreshTimerRef.current);
|
|
nearbyRefreshTimerRef.current = null;
|
|
}
|
|
onMapInteractionChangeRef.current(false);
|
|
map.off("movestart", markInteracting);
|
|
map.off("zoomstart", markInteracting);
|
|
map.off("dragstart", markInteracting);
|
|
map.off("moveend", markIdleSoon);
|
|
map.off("zoomend", markIdleSoon);
|
|
map.off("click", handleMapClick);
|
|
map.remove();
|
|
mapRef.current = null;
|
|
nearbyLayerRef.current = null;
|
|
markersRef.current = {};
|
|
};
|
|
}, []);
|
|
|
|
// Handle initial view if cities are loaded
|
|
useEffect(() => {
|
|
const map = mapRef.current;
|
|
if (!map || !cities.length || hasFittedInitialBoundsRef.current) return;
|
|
|
|
// Only run fitBounds once for the initial list of cities
|
|
const bounds = cities.map((city) => [city.lat, city.lon]) as [
|
|
number,
|
|
number,
|
|
][];
|
|
if (bounds.length) {
|
|
map.fitBounds(bounds, {
|
|
animate: false,
|
|
maxZoom: 4,
|
|
padding: [60, 60],
|
|
});
|
|
hasFittedInitialBoundsRef.current = true;
|
|
}
|
|
}, [cities]);
|
|
|
|
const lastCityDataRef = useRef<
|
|
Record<string, string>
|
|
>({});
|
|
|
|
// Handle marker synchronization
|
|
useEffect(() => {
|
|
const map = mapRef.current;
|
|
if (!map || !cities.length) return;
|
|
let canceled = false;
|
|
const frameId =
|
|
typeof window !== "undefined"
|
|
? window.requestAnimationFrame(() => {
|
|
if (canceled) return;
|
|
|
|
const currentMarkers = markersRef.current;
|
|
const cityNames = new Set(cities.map((city) => city.name));
|
|
|
|
Object.entries(currentMarkers).forEach(([name, entry]) => {
|
|
if (cityNames.has(name)) return;
|
|
map.removeLayer(entry.marker);
|
|
delete currentMarkers[name];
|
|
delete lastCityDataRef.current[name];
|
|
});
|
|
|
|
cities.forEach((city) => {
|
|
const detail = cityDetailsByName[city.name];
|
|
const summary = citySummariesByName[city.name];
|
|
const snapshot = detail || summary;
|
|
const existing = currentMarkers[city.name];
|
|
const signature = getMarkerSignature(city, snapshot);
|
|
const previousSignature = lastCityDataRef.current[city.name];
|
|
|
|
if (existing) {
|
|
if (existing.city.lat !== city.lat || existing.city.lon !== city.lon) {
|
|
existing.marker.setLatLng([city.lat, city.lon]);
|
|
}
|
|
if (previousSignature !== signature) {
|
|
existing.marker.setIcon(createMarkerIcon(city, snapshot));
|
|
}
|
|
currentMarkers[city.name] = { city, marker: existing.marker };
|
|
lastCityDataRef.current[city.name] = signature;
|
|
return;
|
|
}
|
|
|
|
// Create new marker
|
|
const marker = L.marker([city.lat, city.lon], {
|
|
icon: createMarkerIcon(city, snapshot),
|
|
zIndexOffset: getMarkerDisplayOffset(city.name).zIndexOffset || 0,
|
|
}).addTo(map);
|
|
|
|
marker.on("click", () => {
|
|
const currentMap = mapRef.current;
|
|
currentMap?.stop();
|
|
if (currentMap && !suspendMotion) {
|
|
currentMap.flyTo([city.lat, city.lon], 11, {
|
|
animate: true,
|
|
duration: 1.05,
|
|
easeLinearity: 0.22,
|
|
});
|
|
lastMovedCityRef.current = city.name;
|
|
} else {
|
|
lastMovedCityRef.current = null;
|
|
}
|
|
onSelectCityRef.current(city.name);
|
|
});
|
|
|
|
currentMarkers[city.name] = { city, marker };
|
|
lastCityDataRef.current[city.name] = signature;
|
|
});
|
|
})
|
|
: null;
|
|
|
|
return () => {
|
|
canceled = true;
|
|
if (frameId != null && typeof window !== "undefined") {
|
|
window.cancelAnimationFrame(frameId);
|
|
}
|
|
};
|
|
}, [cities, cityDetailsByName, citySummariesByName]);
|
|
|
|
useEffect(() => {
|
|
Object.entries(markersRef.current).forEach(([name, entry]) => {
|
|
const element = entry.marker.getElement();
|
|
if (!element) return;
|
|
const markerRoot = element.querySelector(".city-marker");
|
|
markerRoot?.classList.toggle("selected", name === selectedCity);
|
|
});
|
|
}, [selectedCity]);
|
|
|
|
useEffect(() => {
|
|
if (!mapRef.current || !nearbyLayerRef.current) return;
|
|
const map = mapRef.current;
|
|
const layer = nearbyLayerRef.current;
|
|
const clearNearbyRefreshTimer = () => {
|
|
if (nearbyRefreshTimerRef.current) {
|
|
clearTimeout(nearbyRefreshTimerRef.current);
|
|
nearbyRefreshTimerRef.current = null;
|
|
}
|
|
};
|
|
|
|
function renderNearbyStations(detail: CityDetail, preserveView = false) {
|
|
layer.clearLayers();
|
|
|
|
const nearbyStations = pickMapNearbyStations(detail);
|
|
|
|
if (!nearbyStations.length) {
|
|
if (!preserveView && detail.lat != null && detail.lon != null) {
|
|
map.flyTo([detail.lat, detail.lon], 10, {
|
|
animate: true,
|
|
duration: 1.5,
|
|
easeLinearity: 0.25,
|
|
});
|
|
}
|
|
return;
|
|
}
|
|
|
|
const latLngs: Array<[number, number]> = [];
|
|
if (detail.lat != null && detail.lon != null) {
|
|
latLngs.push([detail.lat, detail.lon]);
|
|
}
|
|
|
|
nearbyStations.forEach((station) => {
|
|
const sLat = Number(station.lat);
|
|
const sLon = Number(station.lon);
|
|
// Ignore invalid (0,0) or null coordinates which cause global zoom-out
|
|
if (!Number.isFinite(sLat) || !Number.isFinite(sLon)) return;
|
|
if (Math.abs(sLat) < 0.1 && Math.abs(sLon) < 0.1) return;
|
|
|
|
const displayOffset = getNearbyMarkerDisplayOffset(detail, station, latLngs.length);
|
|
const styleAttr =
|
|
displayOffset.x || displayOffset.y
|
|
? ` style="transform: translate(${displayOffset.x}px, ${displayOffset.y}px);"`
|
|
: "";
|
|
|
|
const icon = L.divIcon({
|
|
className: "",
|
|
html: `
|
|
<div class="nearby-marker-shell"${styleAttr}>
|
|
${buildNearbyIconHtml(detail, station)}
|
|
</div>
|
|
`,
|
|
iconAnchor: [16, 19],
|
|
iconSize: [240, 38],
|
|
});
|
|
L.marker([sLat, sLon], {
|
|
icon,
|
|
interactive: false,
|
|
keyboard: false,
|
|
bubblingMouseEvents: false,
|
|
}).addTo(layer);
|
|
latLngs.push([sLat, sLon]);
|
|
});
|
|
|
|
if (preserveView) return;
|
|
|
|
// Note: Movement for selected cities is now handled by the centralized effect.
|
|
// This section is primarily for auto-discovery movement if needed.
|
|
}
|
|
|
|
function scheduleIdleNearbyRefresh(targetCity: string | null) {
|
|
clearNearbyRefreshTimer();
|
|
if (!targetCity || suspendMotion) return;
|
|
if (map.getZoom() < AUTO_NEARBY_MIN_ZOOM) return;
|
|
|
|
nearbyRefreshTimerRef.current = setTimeout(async () => {
|
|
nearbyRefreshTimerRef.current = null;
|
|
if (loadingAutoNearbyRef.current || handlingAutoNearbyRef.current) return;
|
|
if (!mapRef.current || mapRef.current.getZoom() < AUTO_NEARBY_MIN_ZOOM) return;
|
|
if (autoNearbyCityRef.current !== targetCity) return;
|
|
|
|
const lastRefreshAt = lastNearbyRefreshAtRef.current[targetCity] || 0;
|
|
if (Date.now() - lastRefreshAt < AUTO_NEARBY_MIN_REFRESH_INTERVAL_MS) {
|
|
return;
|
|
}
|
|
|
|
loadingAutoNearbyRef.current = true;
|
|
lastNearbyRefreshAtRef.current[targetCity] = Date.now();
|
|
try {
|
|
const detail = await onEnsureCityDetailRef.current(
|
|
targetCity,
|
|
true,
|
|
"nearby",
|
|
);
|
|
if (autoNearbyCityRef.current !== targetCity) return;
|
|
renderNearbyStations(detail, true);
|
|
} catch {
|
|
} finally {
|
|
loadingAutoNearbyRef.current = false;
|
|
}
|
|
}, AUTO_NEARBY_IDLE_REFRESH_DELAY_MS);
|
|
}
|
|
|
|
async function maybeAutoShowNearbyStations() {
|
|
if (handlingAutoNearbyRef.current) {
|
|
return;
|
|
}
|
|
handlingAutoNearbyRef.current = true;
|
|
try {
|
|
if (selectedDetail) {
|
|
const selectedNearbyStations = pickMapNearbyStations(selectedDetail);
|
|
if (selectedNearbyStations.length) {
|
|
// Just render stations, no camera move from here
|
|
renderNearbyStations(selectedDetail, true);
|
|
autoNearbyCityRef.current = selectedCity || selectedDetail.name || null;
|
|
scheduleIdleNearbyRefresh(autoNearbyCityRef.current);
|
|
return;
|
|
}
|
|
}
|
|
|
|
if (suspendMotion) {
|
|
clearNearbyRefreshTimer();
|
|
return;
|
|
}
|
|
|
|
// If no city selected, reset the move tracker
|
|
lastMovedCityRef.current = null;
|
|
|
|
if (map.getZoom() < AUTO_NEARBY_MIN_ZOOM) {
|
|
autoNearbyCityRef.current = null;
|
|
clearNearbyRefreshTimer();
|
|
layer.clearLayers();
|
|
return;
|
|
}
|
|
|
|
const center = map.getCenter();
|
|
let best: { cityName: string; distance: number } | null = null;
|
|
for (const [cityName, entry] of Object.entries(markersRef.current)) {
|
|
const distance = map.distance(
|
|
center,
|
|
L.latLng(entry.city.lat, entry.city.lon),
|
|
);
|
|
if (distance > AUTO_NEARBY_MAX_DISTANCE_M) continue;
|
|
if (!best || distance < best.distance) {
|
|
best = { cityName, distance };
|
|
}
|
|
}
|
|
|
|
const targetCity = selectedCity || best?.cityName || null;
|
|
if (!targetCity) {
|
|
autoNearbyCityRef.current = null;
|
|
clearNearbyRefreshTimer();
|
|
layer.clearLayers();
|
|
return;
|
|
}
|
|
|
|
if (
|
|
autoNearbyCityRef.current === targetCity &&
|
|
layer.getLayers().length > 0
|
|
) {
|
|
scheduleIdleNearbyRefresh(targetCity);
|
|
return;
|
|
}
|
|
|
|
autoNearbyCityRef.current = targetCity;
|
|
const cachedDetail = cityDetailsByName[targetCity];
|
|
if (cachedDetail && pickMapNearbyStations(cachedDetail).length) {
|
|
renderNearbyStations(cachedDetail, true);
|
|
scheduleIdleNearbyRefresh(targetCity);
|
|
return;
|
|
}
|
|
|
|
if (loadingAutoNearbyRef.current) return;
|
|
loadingAutoNearbyRef.current = true;
|
|
try {
|
|
const detail = await onEnsureCityDetailRef.current(
|
|
targetCity,
|
|
false,
|
|
"nearby",
|
|
);
|
|
renderNearbyStations(detail, true);
|
|
scheduleIdleNearbyRefresh(targetCity);
|
|
} catch {
|
|
} finally {
|
|
loadingAutoNearbyRef.current = false;
|
|
}
|
|
} finally {
|
|
handlingAutoNearbyRef.current = false;
|
|
}
|
|
}
|
|
|
|
const syncVisibility = () => {
|
|
if (map.getZoom() < 7) {
|
|
if (map.hasLayer(layer)) {
|
|
map.removeLayer(layer);
|
|
}
|
|
} else if (!map.hasLayer(layer)) {
|
|
map.addLayer(layer);
|
|
}
|
|
void maybeAutoShowNearbyStations();
|
|
};
|
|
|
|
syncVisibility();
|
|
map.on("zoomend", syncVisibility);
|
|
map.on("moveend", maybeAutoShowNearbyStations);
|
|
|
|
return () => {
|
|
clearNearbyRefreshTimer();
|
|
map.off("zoomend", syncVisibility);
|
|
map.off("moveend", maybeAutoShowNearbyStations);
|
|
};
|
|
}, [cityDetailsByName, selectedCity, selectedDetail, suspendMotion]);
|
|
|
|
// Centralized City Selection Zoom Effect
|
|
// Higher level than selection: we only flyTo once the data is loaded (selectedDetail)
|
|
// This satisfies "loading之后再出现动画吧"
|
|
useEffect(() => {
|
|
if (!selectedCity) {
|
|
lastMovedCityRef.current = null;
|
|
return;
|
|
}
|
|
|
|
const map = mapRef.current;
|
|
if (!map || suspendMotion || !selectedDetail || isLoadingDetail) return;
|
|
|
|
// Check if the detail matches the selection (case-insensitive)
|
|
if (selectedDetail.name?.toLowerCase() !== selectedCity.toLowerCase()) {
|
|
return;
|
|
}
|
|
|
|
if (lastMovedCityRef.current === selectedCity) return;
|
|
|
|
const entry = markersRef.current[selectedCity];
|
|
if (!entry) return;
|
|
|
|
// Lock the move
|
|
lastMovedCityRef.current = selectedCity;
|
|
|
|
// We use a micro-delay (50ms) to allow the browser to settle
|
|
// after the loading overlay disappears and the detail panel renders.
|
|
const timer = setTimeout(() => {
|
|
const currentMap = mapRef.current;
|
|
if (
|
|
!currentMap ||
|
|
lastMovedCityRef.current !== selectedCity ||
|
|
suspendMotion
|
|
)
|
|
return;
|
|
|
|
currentMap.stop();
|
|
currentMap.flyTo([entry.city.lat, entry.city.lon], 11, {
|
|
animate: true,
|
|
duration: 1.1,
|
|
easeLinearity: 0.22,
|
|
});
|
|
}, 50);
|
|
|
|
return () => clearTimeout(timer);
|
|
}, [selectedCity, selectedDetail, suspendMotion, isLoadingDetail]);
|
|
|
|
useEffect(() => {
|
|
if (!suspendMotion) return;
|
|
mapRef.current?.stop();
|
|
}, [suspendMotion]);
|
|
|
|
return { containerRef };
|
|
}
|