Import Vector lab project

2026-06-06 18:31:55 +00:00
commit fcc22063ed
105 changed files with 31639 additions and 0 deletions
@@ -0,0 +1,123 @@
+# MapView Component - Leaflet карта с зонами и тепловой картой
+
+## Дата: 2026-05-05
+
+### Созданные файлы:
+
+1. MapView.jsx (9.5 KB) - основной компонент
+2. MapView.css (2.1 KB) - стили
+3. index.jsx - экспорт
+
+### Функционал:
+
+#### 1. Базовая карта
+- Leaflet + OpenStreetMap тайлы
+- Инициализация с центром на ТНП
+- Zoom level: 13 (по умолчанию)
+- maxZoom: 19
+
+#### 2. Маркер ТНП (Точка Начала Поиска)
+- Красный круглый маркер с текстом ТНП
+- Цвет: #ff4d00 (ЦОУ accent)
+- Белая рамка 3px
+- Popup с координатами
+- Размер: 40x40px (32x32px на мобильных)
+
+#### 3. Стрелка направления
+- Пунктирная линия от ТНП (1 км)
+- Цвет: #ff4d00
+- Стрелка на конце с поворотом
+- Направления: N, NE, E, SE, S, SW, W, NW
+- Скрывается если direction = unknown
+
+#### 4. Секторные зоны (полигоны)
+- НЕ окружности, а секторы (угол 90°, ±45° от направления)
+- Цвета из §5 ЦОУ палитры:
+  Зона 1 (0-500м): #ff4d00 (красный)
+  Зона 2 (500-1500м): #ff9f1a (оранжевый)
+  Зона 3 (1500-2500м): #ffd166 (желтый)
+- fillOpacity: 0.2
+- weight: 2, opacity: 0.6
+- Popup с информацией: название, приоритет, оценка, расстояние, reasoning
+
+#### 5. Тепловая карта (Leaflet.heat)
+- Переключаемый слой (кнопка в правом верхнем углу)
+- Параметры: radius 25, blur 15, maxZoom 17, max 1.0
+- Градиент (ЦОУ палитра):
+  0.0: #0d1117 (темный)
+  0.3: #238636 (зеленый)
+  0.5: #ffd166 (желтый)
+  0.7: #ff9f1a (оранжевый)
+  1.0: #ff4d00 (красный)
+
+### Props:
+
+- tnpLat: number - Широта ТНП (обязательно)
+- tnpLon: number - Долгота ТНП (обязательно)
+- zones: Array - Массив зон с полями: name, priority, score, distance_km, direction, reasoning
+- direction: string - Направление: N, NE, E, SE, S, SW, W, NW, unknown
+- heatmapData: Array - Массив точек с полями: lat, lon, intensity
+- showHeatmap: boolean - Показывать тепловую карту по умолчанию
+
+### Математика:
+
+Вычисление точки назначения (Haversine):
+- R = 6371000 м (радиус Земли)
+- Преобразование lat/lon в радианы
+- Вычисление новой точки по азимуту и дистанции
+
+Секторный полигон:
+- Начало в ТНП
+- Угол сектора: 90° (±45° от направления)
+- Шаг генерации точек: 5°
+- Замыкание полигона обратно в ТНП
+
+### Стилизация:
+
+Контейнер:
+- height: 600px (400px на мобильных)
+- background: #0a0c0f
+- border-radius: 12px
+- border: 1px solid #21262d
+
+Кнопка управления:
+- position: absolute, top: 16px, right: 16px
+- z-index: 1000
+- background: #161b22
+- active: #ff4d00
+
+Popup:
+- background: #161b22
+- color: #e6edf3
+- border: 1px solid #30363d
+
+### Зависимости (package.json):
+
+Требуется установить:
+- leaflet: ^1.9.4
+- leaflet.heat: ^0.2.0
+
+### Особенности реализации:
+
+1. useRef для слоев - избегаем пересоздания при ререндере
+2. useEffect с зависимостями - обновление только при изменении props
+3. Cleanup - удаление старых слоев перед добавлением новых
+4. calculateDestination - точное вычисление координат по азимуту
+5. Секторы вместо окружностей - более точное отображение зон поиска
+
+### Файлы:
+- /root/vector/frontend/src/components/MapView/MapView.jsx
+- /root/vector/frontend/src/components/MapView/MapView.css
+- /root/vector/frontend/src/components/MapView/index.jsx
+
+### Статус:
+Leaflet + OpenStreetMap
+Маркер ТНП с popup
+Стрелка направления (8 сторон света)
+Секторные полигоны (не окружности)
+Цвета зон из §5 ЦОУ (#ff4d00, #ff9f1a, #ffd166)
+Leaflet.heat с переключением
+Градиент тепловой карты (ЦОУ палитра)
+Адаптивный дизайн
+
+Дата создания: 2026-05-05