-
Распознанные автомобили
+
+
{snapshotAnnotated ? 'Распознанные автомобили' : 'Текущий кадр'}
+
+ {snapshotAnnotated ? 'Разметка включена' : 'Разметка скрыта'}
+
+
+
+
+
+
{snapshot.data?.image_url && (
@@ -846,52 +1038,14 @@ export default function CamerasPage() {
-
-
-
- {cameras.filter(c => hasCoordinates(c.latitude, c.longitude)).map(cam => {
- const isActive = cam.camera_id === selectedId;
- const isHover = cam.camera_id === hoverId;
- const isCameraActive = cam.is_active !== false;
- let color = '#2f54eb';
- if (!isCameraActive) color = '#ff4d4f';
- else if (isActive) color = '#ff7a45';
- else if (isHover) color = '#ffd666';
-
- const icon = L.divIcon({
- className: 'camera-marker',
- html: ``,
- iconSize: [isActive ? 18 : 12, isActive ? 18 : 12],
- iconAnchor: [9, 9]
- });
-
- return (
- setSelectedId(cam.camera_id),
- mouseover: () => setHoverId(cam.camera_id),
- mouseout: () => setHoverId(id => (id === cam.camera_id ? undefined : id))
- }}
- icon={icon}
- >
-
-
-
{cam.title}
-
ID: {cam.camera_id}
-
-
-
-
+
);
diff --git a/src/components/ZoneMapSelector.tsx b/src/components/ZoneMapSelector.tsx
index 0d78d43..276f7f1 100644
--- a/src/components/ZoneMapSelector.tsx
+++ b/src/components/ZoneMapSelector.tsx
@@ -1,18 +1,14 @@
import { useEffect, useMemo, useRef, useState } from 'react';
import { useStore } from '@/store/useStore';
import { Button } from './UiKit';
-import { MapContainer, TileLayer, Polygon, Polyline, Marker, useMapEvents, useMap } from 'react-leaflet';
-import L, { LatLng, LatLngExpression } from 'leaflet';
import { useFeedbackStore } from '@/feedback/feedbackStore';
+import { fitYandexMap, yandexPoint, type YandexPoint } from '@/maps/yandex';
+import { useYandexMap } from '@/maps/useYandexMap';
-type LatLngTuple = [number, number];
-
-const zonePointIcon = L.divIcon({
- className: 'zone-point-marker',
- html: '
',
- iconSize: [28, 28],
- iconAnchor: [14, 14]
-});
+type MapPoint = {
+ lat: number;
+ lng: number;
+};
function hasCoordinates(latitude?: number | null, longitude?: number | null): latitude is number {
return typeof latitude === 'number'
@@ -21,98 +17,239 @@ function hasCoordinates(latitude?: number | null, longitude?: number | null): la
&& Number.isFinite(longitude);
}
-function ClickHandler({ onClick }: { onClick: (pos: LatLng) => void }) {
- useMapEvents({
- click(e) {
- onClick(e.latlng);
- }
- });
- return null;
+function toYandexPoint(point: MapPoint): YandexPoint {
+ return yandexPoint(point.lat, point.lng);
}
-function MapAutoFit({ points, fitVersion }: { points: LatLng[]; fitVersion: number }) {
- const map = useMap();
-
- useEffect(() => {
- if (fitVersion === 0) return;
- if (points.length === 0) return;
- const bounds = L.latLngBounds(points);
- map.fitBounds(bounds.pad(0.2));
- }, [fitVersion, map]);
+function fromYandexPoint(point: YandexPoint): MapPoint {
+ return { lat: point[0], lng: point[1] };
+}
- return null;
+function stopYandexEventPropagation(event: any) {
+ if (typeof event?.stopPropagation === 'function') event.stopPropagation();
}
-function DraggableZoneShape({
+function YandexZoneGeometryMap({
+ center,
points,
- onMove,
- onMoveEnd,
+ fitVersion,
+ onMapClick,
+ onPointsCommit,
onInteractionStart
}: {
- points: LatLng[];
- onMove: (points: LatLng[]) => void;
- onMoveEnd: (points: LatLng[]) => void;
+ center: YandexPoint;
+ points: MapPoint[];
+ fitVersion: number;
+ onMapClick: (point: MapPoint) => void;
+ onPointsCommit: (points: MapPoint[]) => void;
onInteractionStart: () => void;
}) {
- const map = useMap();
- const line = points.map(p => [p.lat, p.lng] as LatLngTuple);
- const isComplete = points.length === 4;
- const dragLine = isComplete ? [...line, line[0]] : line;
-
- function onMouseDown(e: any) {
- if (points.length < 2) return;
- L.DomEvent.stop(e);
- onInteractionStart();
- map.dragging.disable();
-
- const start = e.latlng as LatLng;
- const origin = points.map(point => new L.LatLng(point.lat, point.lng));
- let latest = origin;
-
- const onMouseMove = (moveEvent: any) => {
- const current = moveEvent.latlng as LatLng;
- const latDelta = current.lat - start.lat;
- const lngDelta = current.lng - start.lng;
- latest = origin.map(point => new L.LatLng(point.lat + latDelta, point.lng + lngDelta));
- onMove(latest);
+ const mapRef = useRef
(null);
+ const pointsRef = useRef(points);
+ const { ymaps, map, loading, error } = useYandexMap(mapRef, { center, zoom: 16 });
+
+ useEffect(() => {
+ pointsRef.current = points;
+ }, [points]);
+
+ useEffect(() => {
+ if (!map || points.length > 0) return;
+ map.setCenter(center, 16, { duration: 200 });
+ }, [map, center, points.length]);
+
+ useEffect(() => {
+ const pointsToFit = pointsRef.current;
+ if (!map || fitVersion === 0 || pointsToFit.length === 0) return;
+ fitYandexMap(map, pointsToFit.map(toYandexPoint), 16);
+ }, [map, fitVersion]);
+
+ useEffect(() => {
+ if (!map) return;
+ const onClick = (event: any) => {
+ const coords = event.get('coords') as YandexPoint | undefined;
+ if (!coords) return;
+ onMapClick(fromYandexPoint(coords));
+ };
+ map.events.add('click', onClick);
+ return () => {
+ map.events.remove('click', onClick);
};
+ }, [map, onMapClick]);
- const onMouseUp = () => {
- map.off('mousemove', onMouseMove);
- map.off('mouseup', onMouseUp);
- map.dragging.enable();
+ useEffect(() => {
+ if (!ymaps || !map) return;
+
+ const collection = new ymaps.GeoObjectCollection();
+ const isComplete = points.length === 4;
+ const placemarks: any[] = [];
+ let shape: any;
+ let dragLine: any;
+
+ const visibleLineCoordinates = (nextPoints: MapPoint[]) => nextPoints.map(toYandexPoint);
+ const dragLineCoordinates = (nextPoints: MapPoint[]) => {
+ const coordinates = visibleLineCoordinates(nextPoints);
+ return isComplete && coordinates.length > 0
+ ? [...coordinates, coordinates[0]]
+ : coordinates;
+ };
+
+ const updateMapGeometryFromDrag = (nextPoints: MapPoint[], source?: any) => {
+ const coordinates = visibleLineCoordinates(nextPoints);
+ if (shape && shape !== source) {
+ shape.geometry.setCoordinates(isComplete ? [coordinates] : coordinates);
+ }
+ if (dragLine && dragLine !== source) {
+ dragLine.geometry.setCoordinates(dragLineCoordinates(nextPoints));
+ }
+ placemarks.forEach((placemark, index) => {
+ if (placemark === source) return;
+ const point = nextPoints[index];
+ if (point) {
+ placemark.geometry.setCoordinates(toYandexPoint(point));
+ }
+ });
+ };
+
+ const pointsFromDraggedGeometry = (geoObject: any) => {
+ const coordinates = geoObject.geometry.getCoordinates();
+ const line = Array.isArray(coordinates?.[0]?.[0])
+ ? coordinates[0]
+ : coordinates;
+ return line
+ .slice(0, points.length)
+ .map((coordinate: YandexPoint) => fromYandexPoint(coordinate));
+ };
+
+ const onDragStart = (event: any) => {
+ stopYandexEventPropagation(event);
onInteractionStart();
- onMoveEnd(latest);
+ map.behaviors.disable(['drag']);
};
- map.on('mousemove', onMouseMove);
- map.on('mouseup', onMouseUp);
- }
+ const onShapeDrag = (source: any) => {
+ const latest = pointsFromDraggedGeometry(source);
+ if (latest.length !== points.length) return;
+ updateMapGeometryFromDrag(latest, source);
+ };
+
+ const onPointDrag = (pointIndex: number, placemark: any) => {
+ const latest = points.map(point => ({ ...point }));
+ const current = placemark.geometry.getCoordinates() as YandexPoint | undefined;
+ if (!current) return;
+ latest[pointIndex] = fromYandexPoint(current);
+ updateMapGeometryFromDrag(latest, placemark);
+ };
+
+ const onShapeDragEnd = (source: any) => {
+ const latest = pointsFromDraggedGeometry(source);
+ if (latest.length === points.length) {
+ updateMapGeometryFromDrag(latest, source);
+ onPointsCommit(latest);
+ }
+ map.behaviors.enable(['drag']);
+ onInteractionStart();
+ };
+
+ const onPointDragEnd = (pointIndex: number, placemark: any) => {
+ const latest = points.map(point => ({ ...point }));
+ const current = placemark.geometry.getCoordinates() as YandexPoint | undefined;
+ if (current) {
+ latest[pointIndex] = fromYandexPoint(current);
+ updateMapGeometryFromDrag(latest, placemark);
+ onPointsCommit(latest);
+ }
+ map.behaviors.enable(['drag']);
+ onInteractionStart();
+ };
+
+ if (points.length >= 2) {
+ const coordinates = points.map(toYandexPoint);
+ shape = isComplete
+ ? new ymaps.Polygon(
+ [coordinates],
+ {},
+ {
+ strokeColor: '#ff7a45',
+ strokeOpacity: 0.92,
+ strokeWidth: 2,
+ fillColor: '#ff7a453d',
+ fillOpacity: 0.24,
+ zIndex: 250,
+ draggable: true
+ }
+ )
+ : new ymaps.Polyline(
+ coordinates,
+ {},
+ {
+ strokeColor: '#ff7a45',
+ strokeOpacity: 0.92,
+ strokeWidth: 2,
+ strokeStyle: 'dash',
+ zIndex: 250,
+ draggable: true
+ }
+ );
+
+ dragLine = new ymaps.Polyline(
+ dragLineCoordinates(points),
+ {},
+ {
+ strokeColor: '#ff7a45',
+ strokeOpacity: 0.01,
+ strokeWidth: 22,
+ zIndex: 200,
+ cursor: 'move',
+ draggable: true
+ }
+ );
+
+ shape.events.add('dragstart', onDragStart);
+ shape.events.add('drag', () => onShapeDrag(shape));
+ shape.events.add('dragend', () => onShapeDragEnd(shape));
+ dragLine.events.add('dragstart', onDragStart);
+ dragLine.events.add('drag', () => onShapeDrag(dragLine));
+ dragLine.events.add('dragend', () => onShapeDragEnd(dragLine));
+ collection.add(shape);
+ collection.add(dragLine);
+ }
+
+ points.forEach((point, index) => {
+ const placemark = new ymaps.Placemark(
+ toYandexPoint(point),
+ {
+ hintContent: `Точка ${index + 1}`
+ },
+ {
+ preset: 'islands#circleIcon',
+ iconColor: '#ffd43b',
+ zIndex: 1000,
+ zIndexHover: 1100,
+ zIndexActive: 1200,
+ cursor: 'move',
+ draggable: true
+ }
+ );
+
+ placemark.events.add('dragstart', onDragStart);
+ placemark.events.add('drag', () => onPointDrag(index, placemark));
+ placemark.events.add('dragend', () => onPointDragEnd(index, placemark));
+ placemarks.push(placemark);
+ collection.add(placemark);
+ });
+
+ map.geoObjects.add(collection);
+ return () => {
+ map.behaviors.enable(['drag']);
+ map.geoObjects.remove(collection);
+ };
+ }, [ymaps, map, points, onInteractionStart, onMapClick, onPointsCommit]);
return (
- <>
- {isComplete ? (
- `${p.lat},${p.lng}`).join(';')}`}
- positions={line}
- pathOptions={{ color: '#ff7a45', fillOpacity: 0.24, weight: 2, className: 'zone-map-visible-line' }}
- eventHandlers={{ mousedown: onMouseDown }}
- />
- ) : (
- `${p.lat},${p.lng}`).join(';')}`}
- positions={line}
- pathOptions={{ color: '#ff7a45', dashArray: '10, 5', weight: 2, className: 'zone-map-visible-line' }}
- eventHandlers={{ mousedown: onMouseDown }}
- />
- )}
- `${p.lat},${p.lng}`).join(';')}`}
- positions={dragLine}
- pathOptions={{ color: '#ff7a45', opacity: 0.01, weight: 18, lineCap: 'round', lineJoin: 'round', className: 'zone-map-drag-line' }}
- eventHandlers={{ mousedown: onMouseDown }}
- />
-
+
+ {loading &&
Загрузка Яндекс.Карт...
}
+ {error &&
{error}
}
+
Вместимость: {zone.capacity}
Сохранение...
);
diff --git a/src/main.tsx b/src/main.tsx
index b566104..9707d82 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,7 +1,6 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
-import 'leaflet/dist/leaflet.css';
ReactDOM.createRoot(document.getElementById('root')!).render(