vector/MAPVIEW_COMPONENT.md

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