О проекте
У объекта есть карточка и геометрия на карте. Они должны обновляться вместе. При массовом импорте нужно проверить геометрию, показать ошибки и применить только подходящие полигоны.
React, MobX, карта на MapLibre. Можно править вершины, загружать пачку полигонов и выгружать GeoJSON. В наборе 54 территории РФ: 19 городов, 27 районов и округов, 8 областей. Контуры из OpenStreetMap. Бэк замокан, правки живут в памяти вкладки.
- Только backend заменён памятью вкладки. Серверный OData/PostGIS-сервис не подключён; закрытый исходный репозиторий остаётся приватным.
- Пределы адаптера: 20 файлов, 500 полигонов в файле, 1000 в сессии; текст файла до 5 MB. Поддержаны Polygon/MultiPolygon и EPSG:4326/3857.
- После перезагрузки импортированные данные исчезают. Экспорт GeoJSON позволяет сохранить результат у себя.
- Тайлы OpenStreetMap загружаются с внешнего сервера. Без него подложка не загрузится.
- Границы OSM упрощены для редактора, не являются кадастровыми данными. Города — контуры place=city/town, районы и области — boundary=administrative; коды ОКТМО учебные. Источник и ODbL указаны в демо и скачиваемом GeoJSON.
Скриншоты, схемы и исходные материалы сохранены на языке оригинала; подписи и описание переведены.
Архитектура и схемы
- Исходная тема sppi-dark: тёмный фон, жёлтые элементы управления и исходные цвета статусов.
- MapLibre получает обычные тайлы OpenStreetMap. Указана атрибуция; массовая загрузка карт и офлайн-кеширование не реализованы.
- Штатные экраны FilesScreen → PolygonsScreen → PolygonEditScreen работают через локальный адаптер контрактов OData и geo-import.
- Импорт сначала проходит проверку и просмотр. Применение переносит только валидные полигоны в основной редактор; повторное применение не создаёт новых копий с тем же importId.
- Standalone-стили собраны в единую область .sppi-dark: исходные цвета, единые SVG-иконки, размер действий 40 px, адаптивные карточки файлов. ResizeObserver синхронизирует MapLibre с изменениями панелей и экрана.
- Контуры OpenStreetMap упрощены с сохранением топологии: 54 территории, 21 421 вершина, 7 MultiPolygon. Области, районы и города имеют разную прозрачность; исходные цвета управления и статусов сохранены.
Code-map: файлы и связи
Карта привязана к версии 4108a165419e. В таблице — экран или API, связанный модуль и данные.
| Функция | Экран / API | Модуль | Данные / проверка |
|---|---|---|---|
| Карта и тема | Главный редактор | src_front/src/demo/config.ts; styles/themes/sppi-dark.scss | MapLibre, OSM, 54 территории и прозрачность вложенных границ |
| Массовая загрузка | Импорт файлов → /geo-import/import | modules/import/screens/FilesScreen.tsx; demo/import-api.ts | GeoJSON, CRS, WKB; файл из 54 реальных контуров |
| Проверка и применение | Список полигонов → /geo-import/files/:id/apply | PolygonsScreen.tsx; ImportRepository; import-api.ts | статусы, пропуск, валидация; 53 применённых, 107 в экспорте |
| Изменение | Изменение полигона → /polygons/:id/save | PolygonEditScreen.tsx; MapImportMapHelper | Mapbox Draw; original/default WKB |
| Изоляция и экспорт | Основной экран | demo/data.ts; demo/Controls.tsx | EventTarget, память вкладки; GeoJSON export и reset |
| Визуальная система | Все экраны и состояния | demo/foundation.css; demo/original-theme.css | SVG masks, поля, кнопки, таблицы; визуальный QA |
| Размер карты | Главный редактор и импорт | utils/observe-map-resize.ts; MapEditor.tsx; MapImport.tsx | ResizeObserver, requestAnimationFrame, cleanup; размеры canvas |
| Слои импорта | Меню подложки | MapImportLayersSwitcher.tsx; map-import.controller.ts | исходная видимость синхронизируется со store; штатный checkbox |
| Отступы редактора импорта | Изменение полигона | PolygonEditScreen.tsx; demo/original-theme.css | import-polygon-editor: общий padding 12 px; координаты полей и кнопок, сохранение |
| Набор и происхождение | Карта / скачать набор | demo/russia-boundaries.json; demo/data.ts | OSM relations, ODbL, учебные ОКТМО, Polygon/MultiPolygon |
| Общая граница | Карточка и карта импорта | geometryBbox; getUnitedPolygons; validatePolygons; MapImport.tsx | bbox всех частей; фокус выбранной территории после загрузки |
Как работать с картой
- Перед изменением найти функцию и пройти связи до API, состояния и хранилища.
- Проверить входы, ошибки, повторные события и зависимые сценарии.
- После изменения обновить карту и затронутые схемы вместе с кодом.
- Выполнить связанные проверки и привязать новые материалы к версии исходников.
Сценарии и API
- Найти Владимир, Суздаль, Нижний Новгород, Суздальский район или Владимирскую область; открыть карточку и приблизить контур.
- Скачать набор из 54 территорий, загрузить его через массовый импорт и проверить все геометрии.
- Открыть файл: список полигонов, статусы, фильтры и карта с общими границами.
- Открыть полигон: редактирование, сброс исходной геометрии, явный пропуск и сохранение.
- Исправить или пропустить ошибки, нажать «Применить импорт», закрыть модуль и экспортировать результат из основного редактора.
- Сбросить пример; проверить, что другая вкладка не получила импортированные файлы.
Проверка опубликованной версии
CI: Сборка GIS с 54 территориями и фокусом редактора ↗ · 4108a165 · версия этого демо · 2026-09-07
CI: Сборка после выравнивания редактора импорта ↗ · 9d0df859 · исторический запуск другой версии · 2026-09-07
CI: Production-сборка GIS после доработки интерфейса ↗ · f8cf0051 · исторический запуск другой версии · 2026-09-07
- Опубликованная версия 4108a165: 54 именованные территории, пять карточек городов/области/района, поиск и пустой результат; экспорт исходных координат совпадает с набором.
- Массовый импорт 54 территорий: все геометрии валидны. Сохранение составного полигона, пропуск одной территории, применение 53; повторное применение не создаёт дубликатов; экспорт содержит 107 объектов и ссылки на источник.
- Самопересечение блокирует применение. Другая сессия не получает файлы; сброс восстанавливает 54 исходных объекта.
- На контуре Суздаля указателем перемещена вершина. После сохранения изменённая геометрия подтверждена экспортом; остальные 53 объекта не изменились.
- Desktop 1440×1000, мобильные 390×844 и 360×844: нет горизонтального переполнения или ошибок JavaScript. В мобильном редакторе ОКТМО выбранной территории и общие левый/правый края с расхождением не более 1 px.
- Сборка Vite и GitHub CI успешны. Полный legacy TypeScript/lint набор в эту проверку не входит.
Эти проверки относятся к указанной версии. Коммерческие показатели и качество моделей на независимой выборке здесь не измерялись.
Измерения
- Статическая сборка обслуживается общим Nginx; отдельного backend-процесса GIS на VPS нет.
- 54 объекта; 21 421 вершина после упрощения, 76–926 на объект, до 480 на кольцо. Это характеристика набора, а не оценка точности границ.
- В одном контрольном запуске Chromium на опубликованной версии: первый список 1.80 с, импорт 54 территорий 0.66 с. Измерен интерфейс на тестовой машине; это не нагрузочный тест или SLA.
Запуск и эксплуатация
Сборка: src_front, npm ci --ignore-scripts; npm run build:demo. Артефакт собирается в GitHub CI и публикуется как статический релиз Nginx.
Backend adapter расположен в demo/api.ts и demo/import-api.ts. При подключении настоящего API нужно реализовать контракт применения импорта и заменить локальный транспорт.
Проверка геометрии использует существующий validation.util.ts; WKB-конвертация — wkx. Пользовательские GeoJSON не отправляются на VPS.
Перед изменением проследить функцию через экран, ImportRepository, адаптер, геометрию и состояние. После изменения обновить code-map и пройти загрузку, ошибки, пропуск, применение, экспорт и сброс.
Доработка визуала 7 сентября 2026: CSS подключается после исходных компонентов; специфичность ограничена темой. Текстовые кнопки не получают размер icon-only. На узком экране импорт расположен вертикально; фон страницы блокируется при открытии модального окна. Тайлы OpenStreetMap остаются внешними и могут догружаться при масштабировании.
Выравнивание 7 сентября 2026: у редактора импорта один контейнер отступов 12 px. Удалены конфликтующие utility-классы и резерв скроллбара у одиночной карточки; footer и ОКТМО используют ту же ширину. Правка ограничена экраном PolygonEditScreen.
Географический набор: demo/russia-boundaries.json, срез OpenStreetMap от 7 сентября 2026, 11:09:36 UTC. У каждой территории сохранены relation URL, тип, дата и величина упрощения. Производный набор доступен по ODbL через скачивание и экспорт.
Вычисление bbox учитывает все кольца и части MultiPolygon. При сохранении и импорте bbox пересчитывается. После загрузки карты выбранная территория сохраняет фокус; в редакторе импорта показан её собственный ОКТМО.
Стек
| React / MobX | Исходные экраны, состояние и импорт |
|---|---|
| MapLibre / Mapbox Draw | Подложка карты, слои и редактирование геометрии |
| GeoJSON / WKB | Валидация, загрузка и экспорт |
Материалы и исходники
История репозитория: с февраля 2025. Публичное демо: 7 сентября 2026.
Архив материалов на языке оригинала.