root
124 lines
4.7 KiB
Markdown
124 lines
4.7 KiB
Markdown
# 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
|