shishengliang/lingniu-vehicle-ingest
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf(monitor): skip metadata-only map work

Browse Source
This commit is contained in:
lingniu
2026-07-16 05:16:51 +08:00
parent 379f1ce941
commit b21f9a60cd
3 changed files with 75 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
vehicle-data-platform/apps/web/src/v2/map/FleetMap.tsx
View File

@@ -90,11 +90,18 @@ type LabelMarkerEntry = {
signature: string;
};
function massPointSignature(monitorMap: MonitorMapResponse | undefined, points: VehicleRealtimeRow[]) {
if (monitorMap) return [
`mode:${monitorMap.mode}`,
...monitorMap.clusters.map((cluster) => `c:${cluster.id}:${cluster.longitude}:${cluster.latitude}:${cluster.count}`),
...monitorMap.points.map((point) => `p:${point.vin}:${point.longitude}:${point.latitude}:${point.status}:${point.plate || ''}`)
const NO_VEHICLE_POINTS: VehicleRealtimeRow[] = [];
function massPointSignature(
mode: MonitorMapResponse['mode'] | undefined,
clusters: MonitorMapResponse['clusters'] | undefined,
mapPoints: MonitorMapResponse['points'] | undefined,
points: VehicleRealtimeRow[]
) {
if (mode) return [
`mode:${mode}`,
...(clusters ?? []).map((cluster) => `c:${cluster.id}:${cluster.longitude}:${cluster.latitude}:${cluster.count}`),
...(mapPoints ?? []).map((point) => `p:${point.vin}:${point.longitude}:${point.latitude}:${point.status}:${point.plate || ''}`)
].join('|');
return ['vehicles', ...points.map((point) => `p:${point.vin}:${point.longitude}:${point.latitude}:${vehicleStatus(point)}:${point.plate || ''}`)].join('|');
}
@@ -166,11 +173,15 @@ export function FleetMap({ vehicles, selectedVin, onSelect, monitorMap, onSelect
const [followSelected, setFollowSelected] = useState(true);
const [mapZoom, setMapZoom] = useState(5);
const points = useMemo(() => vehicles.filter((vehicle) => isValidAMapCoordinate(vehicle.longitude, vehicle.latitude)), [vehicles]);
const monitorMode = monitorMap?.mode;
const monitorPoints = monitorMap?.points;
const monitorClusters = monitorMap?.clusters;
const fallbackPoints = monitorMode ? NO_VEHICLE_POINTS : points;
const selectedTarget = useMemo(() => selectedVin
? monitorMap?.points.find((item) => item.vin === selectedVin) ?? points.find((item) => item.vin === selectedVin)
: undefined, [monitorMap, points, selectedVin]);
const renderedPointCount = monitorMap ? monitorMap.points.length : points.length;
const renderedClusterCount = monitorMap?.clusters.length ?? 0;
? monitorPoints?.find((item) => item.vin === selectedVin) ?? points.find((item) => item.vin === selectedVin)
: undefined, [monitorPoints, points, selectedVin]);
const renderedPointCount = monitorPoints?.length ?? fallbackPoints.length;
const renderedClusterCount = monitorClusters?.length ?? 0;
const mapComposition = monitorMap && renderedClusterCount > 0
? `${renderedClusterCount} 个聚合 · ${renderedPointCount} 个车辆点 · ${monitorMap.total} 辆`
: `${renderedPointCount} 个有效点位`;
@@ -309,8 +320,10 @@ export function FleetMap({ vehicles, selectedVin, onSelect, monitorMap, onSelect
const mass = massRef.current;
const AMap = amapRef.current;
if (!mass || !AMap) return;
clustersRef.current = new Map((monitorMap?.clusters ?? []).map((cluster) => [cluster.id, cluster]));
const clusterCounts = [...new Set((monitorMap?.clusters ?? []).map((cluster) => cluster.count))].sort((a, b) => a - b);
const clusters = monitorClusters ?? [];
const mapPoints = monitorPoints ?? [];
clustersRef.current = new Map(clusters.map((cluster) => [cluster.id, cluster]));
const clusterCounts = [...new Set(clusters.map((cluster) => cluster.count))].sort((a, b) => a - b);
const styleSignature = clusterCounts.join(',');
if (massStyleSignatureRef.current !== styleSignature) {
const baseStyles = COLORS.map((color) => ({ url: dotDataUrl(color), anchor: new AMap.Pixel(9, 9), size: new AMap.Size(18, 18) }));
@@ -321,18 +334,18 @@ export function FleetMap({ vehicles, selectedVin, onSelect, monitorMap, onSelect
mass.setStyle?.([...baseStyles, ...clusterStyles]);
massStyleSignatureRef.current = styleSignature;
}
const dataSignature = massPointSignature(monitorMap, points);
const dataSignature = massPointSignature(monitorMode, monitorClusters, monitorPoints, fallbackPoints);
if (massDataSignatureRef.current === dataSignature) return;
const clusterStyleIndexes = new Map(clusterCounts.map((count, index) => [count, COLORS.length + index]));
const data: AMapMassPoint[] = monitorMap ? [
...monitorMap.clusters.map((cluster) => ({ lnglat: wgs84ToGcj02(cluster.longitude, cluster.latitude), style: clusterStyleIndexes.get(cluster.count) ?? COLORS.length, id: cluster.id, label: `${cluster.count} 辆` })),
...monitorMap.points.map((point) => ({ lnglat: wgs84ToGcj02(point.longitude, point.latitude), style: point.status === 'driving' ? 2 : point.status === 'idle' ? 0 : point.status === 'offline' ? 1 : 3, id: point.vin, label: point.plate || point.vin }))
] : points.map((vehicle) => ({
const data: AMapMassPoint[] = monitorMode ? [
...clusters.map((cluster) => ({ lnglat: wgs84ToGcj02(cluster.longitude, cluster.latitude), style: clusterStyleIndexes.get(cluster.count) ?? COLORS.length, id: cluster.id, label: `${cluster.count} 辆` })),
...mapPoints.map((point) => ({ lnglat: wgs84ToGcj02(point.longitude, point.latitude), style: point.status === 'driving' ? 2 : point.status === 'idle' ? 0 : point.status === 'offline' ? 1 : 3, id: point.vin, label: point.plate || point.vin }))
] : fallbackPoints.map((vehicle) => ({
lnglat: wgs84ToGcj02(vehicle.longitude, vehicle.latitude), style: styleIndex(vehicle), id: vehicle.vin, label: vehicle.plate || vehicle.vin
}));
mass.setData(data);
massDataSignatureRef.current = dataSignature;
}, [monitorMap, points, state]);
}, [fallbackPoints, monitorClusters, monitorMode, monitorPoints, state]);
useEffect(() => {
const labels = labelsRef.current;
@@ -340,9 +353,9 @@ export function FleetMap({ vehicles, selectedVin, onSelect, monitorMap, onSelect
const AMap = amapRef.current;
const map = mapRef.current;
if (!labels || !denseLabels || !AMap?.LabelMarker || !map) return;
const mapLabelPoints = (monitorMap
? monitorMap.points
: points.map((vehicle) => ({ ...vehicle, status: vehicleStatus(vehicle) })));
const mapLabelPoints = (monitorPoints
? monitorPoints
: fallbackPoints.map((vehicle) => ({ ...vehicle, status: vehicleStatus(vehicle) })));
const allLabelPoints = selectedTarget && !mapLabelPoints.some((point) => point.vin === selectedTarget.vin)
? [...mapLabelPoints, selectedTarget]
: mapLabelPoints;
@@ -407,7 +420,7 @@ export function FleetMap({ vehicles, selectedVin, onSelect, monitorMap, onSelect
if (markersToRemove.length) activeLabels.remove(markersToRemove);
if (markersToAdd.length) activeLabels.add(markersToAdd);
labelMarkersRef.current = nextMarkers;
}, [mapZoom, monitorMap, points, selectedTarget, selectedVin, showLabels, state]);
}, [fallbackPoints, mapZoom, monitorPoints, selectedTarget, selectedVin, showLabels, state]);
useEffect(() => {
if (!selectedVin || !mapRef.current || !amapRef.current) {