Демка · 8 сентября 2026

Settlements UI

Frontend GIS для работы с границами населённых пунктов и территорий. MapLibre показывает реальную картографическую подложку, React и MobX связывают список, карточку, редактор геометрии и импорт. Публичный адаптер воспроизводит контракт backend в памяти вкладки: данные синтетические, оба режима импорта и проверка геометрии работают полностью.

Демка ↗Документация →Исходный репозиторий приватный
История репозитория: с февраля 2025. Публичное демо: 7 сентября 2026.Версия 5c5466fa16 кадров интерфейса

Владимир: подробный городской контур и карточка

01 / Задача

Редактор полигонов с импортом GeoJSON

Нужно было сохранить исходный рабочий интерфейс картографического приложения, убрать корпоративные адреса и данные и сделать безопасный публичный сценарий. В демо доступны просмотр, редактирование, экспорт, массовый импорт и импорт непосредственно в карточку выбранной территории.

Сценарий: Редактирование границ городов, районов и других территорий.

Что делал

  • Карточки объектов, слои карты и редактирование геометрии.
  • Связка React/MobX с MapLibre и Mapbox Draw. Импорт и экспорт геометрии.
  • Для демки сделал адаптер вместо корпоративного API. Убрал рабочие данные и закрытые registry-зависимости.
  • Деплой, правки вёрстки, проверка массового импорта и набор границ из OpenStreetMap.

02 / Реализация

Что отличает реализацию

Массовый режим читает ОКТМО каждой feature с fallback на текущий контекст. Контекстный режим принудительно назначает ОКТМО открытой карточки и хранит собственный список файлов. Polygon и MultiPolygon проходят проверку CRS, размера, числа вершин и топологии; ошибку можно исправить или пропустить, а повторное применение файла не создаёт дублей.

Скриншоты

Экраны, формы, ошибки

Скриншоты, схемы и исходные материалы сохранены на языке оригинала; подписи и описание переведены.

03 / Технологии

Что использовано

React / TypeScript 46.3%GeoJSON import / TypeScript 31.7%MapLibre / TypeScript 17.5%MobX / data adapters 4.5%

Доли по размеру прикладных файлов Git в закреплённой версии. Каждый файл отнесён к одной подсистеме по правилам scripts/generate-stack-share.mjs; тесты, ассеты, зависимости и generated-файлы исключены. Округление — до 0,1%. Это состав кода, а не уровень владения технологиями.

React / MobX

Исходные экраны, состояние и импорт

MapLibre / Mapbox Draw

Подложка карты, слои и редактирование геометрии

GeoJSON / WKB

Валидация, загрузка и экспорт

04 / Решения

Как устроен проект

  • Исходная тема 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. Области, районы и города имеют разную прозрачность; исходные цвета управления и статусов сохранены.
Компоненты и границы интеграций
Компоненты и границы интеграций

05 / Проверка

Сценарии демки

  1. Найти Владимир, Суздаль, Нижний Новгород, Суздальский район или Владимирскую область; открыть карточку и приблизить контур.
  2. Скачать набор из 54 территорий, загрузить его через массовый импорт и проверить все геометрии.
  3. Открыть файл: список полигонов, статусы, фильтры и карта с общими границами.
  4. Открыть полигон: редактирование, сброс исходной геометрии, явный пропуск и сохранение.
  5. Исправить или пропустить ошибки, нажать «Применить импорт», закрыть модуль и экспортировать результат из основного редактора.
  6. Сбросить пример; проверить, что другая вкладка не получила импортированные файлы.

Результаты проверок

  • Статическая сборка обслуживается общим Nginx; отдельного backend-процесса GIS на VPS нет.
  • 54 объекта; 21 421 вершина после упрощения, 76–926 на объект, до 480 на кольцо. Это характеристика набора, а не оценка точности границ.
  • В одном контрольном запуске Chromium на опубликованной версии: первый список 1.80 с, импорт 54 территорий 0.66 с. Измерен интерфейс на тестовой машине; это не нагрузочный тест или SLA.

Ограничения

  • Только backend заменён памятью вкладки. Серверный OData/PostGIS-сервис не подключён; закрытый исходный репозиторий остаётся приватным.
  • Пределы адаптера: 20 файлов, 500 полигонов в файле, 1000 в сессии; текст файла до 5 MB. Поддержаны Polygon/MultiPolygon и EPSG:4326/3857.
  • После перезагрузки импортированные данные исчезают. Экспорт GeoJSON позволяет сохранить результат у себя.
  • Тайлы OpenStreetMap загружаются с внешнего сервера. Без него подложка не загрузится.
  • Границы OSM упрощены для редактора, не являются кадастровыми данными. Города — контуры place=city/town, районы и области — boundary=administrative; коды ОКТМО учебные. Источник и ODbL указаны в демо и скачиваемом GeoJSON.

Технические заметки

Модули, API, схема данных, запуск и результаты проверок.

Документация →Материалы ↓