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

tune(monitor): slow vehicle point transitions

Browse Source
This commit is contained in:
lingniu
2026-07-16 09:39:11 +08:00
parent 4ffaf95436
commit 26a0599611
2 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -302,7 +302,7 @@ test('skips unchanged refresh redraws and smoothly moves points without replacin
await waitFor(() => { await waitFor(() => {
const latest = setData.mock.calls[setData.mock.calls.length - 1]?.[0]; const latest = setData.mock.calls[setData.mock.calls.length - 1]?.[0];
expect(latest?.[0].lnglat).toEqual(wgs84ToGcj02(113.27, 23.13)); expect(latest?.[0].lnglat).toEqual(wgs84ToGcj02(113.27, 23.13));
}, { timeout: 1_500 }); }, { timeout: 1_800 });
expect(setData.mock.calls.length).toBeGreaterThan(dataCalls + 1); expect(setData.mock.calls.length).toBeGreaterThan(dataCalls + 1);
expect(setStyle).toHaveBeenCalledTimes(styleCalls); expect(setStyle).toHaveBeenCalledTimes(styleCalls);
expect(removeLabels).toHaveBeenCalledTimes(removeCalls); expect(removeLabels).toHaveBeenCalledTimes(removeCalls);
@@ -418,8 +418,8 @@ test('renders one selected plate and smoothly follows it until the map is dragge
onSelect={() => undefined} onSelect={() => undefined}
/> />
); );
await waitFor(() => expect(markerSetPosition).toHaveBeenLastCalledWith(wgs84ToGcj02(113.27, 23.14))); await waitFor(() => expect(markerSetPosition).toHaveBeenLastCalledWith(wgs84ToGcj02(113.27, 23.14)), { timeout: 1_800 });
expect(panTo).toHaveBeenLastCalledWith(wgs84ToGcj02(113.27, 23.14), 650); expect(panTo).toHaveBeenLastCalledWith(wgs84ToGcj02(113.27, 23.14), 1_000);
expect(setZoomAndCenter).toHaveBeenCalledTimes(1); expect(setZoomAndCenter).toHaveBeenCalledTimes(1);
const follow = screen.getByRole('button', { name: '跟随车辆' }); const follow = screen.getByRole('button', { name: '跟随车辆' });
@@ -440,11 +440,11 @@ test('renders one selected plate and smoothly follows it until the map is dragge
onSelect={() => undefined} onSelect={() => undefined}
/> />
); );
await waitFor(() => expect(markerSetPosition).toHaveBeenLastCalledWith(wgs84ToGcj02(113.29, 23.16))); await waitFor(() => expect(markerSetPosition).toHaveBeenLastCalledWith(wgs84ToGcj02(113.29, 23.16)), { timeout: 1_800 });
expect(panTo).toHaveBeenCalledTimes(panCountAfterDrag); expect(panTo).toHaveBeenCalledTimes(panCountAfterDrag);
fireEvent.click(follow); fireEvent.click(follow);
await waitFor(() => expect(follow).toHaveAttribute('aria-pressed', 'true')); await waitFor(() => expect(follow).toHaveAttribute('aria-pressed', 'true'));
expect(panTo).toHaveBeenLastCalledWith(wgs84ToGcj02(113.29, 23.16), 650); expect(panTo).toHaveBeenLastCalledWith(wgs84ToGcj02(113.29, 23.16), 1_000);
getZoom.mockReturnValue(20); getZoom.mockReturnValue(20);
view.rerender( view.rerender(
@@ -455,7 +455,7 @@ test('renders one selected plate and smoothly follows it until the map is dragge
onSelect={() => undefined} onSelect={() => undefined}
/> />
); );
await waitFor(() => expect(panTo).toHaveBeenLastCalledWith(wgs84ToGcj02(113.28, 23.15), 650)); await waitFor(() => expect(panTo).toHaveBeenLastCalledWith(wgs84ToGcj02(113.28, 23.15), 1_000));
expect(setZoomAndCenter).toHaveBeenCalledTimes(1); expect(setZoomAndCenter).toHaveBeenCalledTimes(1);
expect(markerOptions[markerOptions.length - 1]?.content).toContain('is-idle'); expect(markerOptions[markerOptions.length - 1]?.content).toContain('is-idle');

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

@@ -19,7 +19,7 @@ import type { MonitorViewport } from '../hooks/useMonitorData';
const COLORS = ['#12a46f', '#9aa6b7', '#1677ff', '#f59e0b', '#ef4444']; const COLORS = ['#12a46f', '#9aa6b7', '#1677ff', '#f59e0b', '#ef4444'];
const CLUSTER_VISUAL_CACHE_LIMIT = 256; const CLUSTER_VISUAL_CACHE_LIMIT = 256;
const POINT_MOVE_DURATION_MS = 650; const POINT_MOVE_DURATION_MS = 1_000;
const POINT_MOVE_FRAME_MS = 32; const POINT_MOVE_FRAME_MS = 32;
const clusterVisualCache = new Map<number, { diameter: number; url: string }>(); const clusterVisualCache = new Map<number, { diameter: number; url: string }>();
@@ -595,10 +595,10 @@ export function FleetMap({ vehicles, selectedVin, onSelect, monitorMap, onSelect
setFollowSelected(true); setFollowSelected(true);
const currentZoom = mapRef.current.getZoom?.() ?? 15; const currentZoom = mapRef.current.getZoom?.() ?? 15;
if (currentZoom < 15) mapRef.current.setZoomAndCenter?.(15, mapPosition); if (currentZoom < 15) mapRef.current.setZoomAndCenter?.(15, mapPosition);
else mapRef.current.panTo?.(mapPosition, 650); else mapRef.current.panTo?.(mapPosition, POINT_MOVE_DURATION_MS);
centeredVinRef.current = selectedVin; centeredVinRef.current = selectedVin;
} else if (selectionPositionRef.current && selectionPositionRef.current !== positionKey && followSelectedRef.current) { } else if (selectionPositionRef.current && selectionPositionRef.current !== positionKey && followSelectedRef.current) {
mapRef.current.panTo?.(mapPosition, 650); mapRef.current.panTo?.(mapPosition, POINT_MOVE_DURATION_MS);
} }
const previousPositionKey = selectionPositionRef.current; const previousPositionKey = selectionPositionRef.current;
selectionPositionRef.current = positionKey; selectionPositionRef.current = positionKey;
@@ -624,7 +624,7 @@ export function FleetMap({ vehicles, selectedVin, onSelect, monitorMap, onSelect
followSelectedRef.current = next; followSelectedRef.current = next;
setFollowSelected(next); setFollowSelected(next);
if (next && selectedTarget && mapRef.current) { if (next && selectedTarget && mapRef.current) {
mapRef.current.panTo?.(wgs84ToGcj02(selectedTarget.longitude, selectedTarget.latitude), 650); mapRef.current.panTo?.(wgs84ToGcj02(selectedTarget.longitude, selectedTarget.latitude), POINT_MOVE_DURATION_MS);
} }
}; };