Вышла версия 4.0 NextGIS Frontend – набора JavaScript-библиотек для быстрой разработки собственных картографических веб-приложений на базе NextGIS Web.
В версии 4 обновлена поддержка API NextGIS Web и улучшена единообразная работа с Leaflet, OpenLayers и MapLibre GL JS, в том числе в React-приложениях. Появились новые библиотеки для работы с QuickMapServices. Примеры и документация были существенно обновлены под современные стандарты веб-разработки.
Совместимость с актуальным API NextGIS Web
NextGIS Frontend 4 поддерживает новые выражения фильтрации векторных и растровых слоёв, булевы поля и состояния групп слоёв веб-карты. Благодаря этому приложения точнее учитывают структуру и настройки проекта, подготовленного в NextGIS Web.
Один из основных сценариев NextGIS Frontend остаётся очень простым: данные и структура проекта хранятся в NextGIS Web, а пользовательское приложение получает их через API.
Например, в NextGIS Web слои и веб-карта, а в отдельном приложении на библиотеках NextGIS Frontend реализуются геопортал, интерфейс оператора, кабинет клиента или часть другой информационной системы.
Благодаря NextGIS Frontend не нужно заново изобретать механизмы взаимодействия с Веб ГИС. В зависимости от задачи можно работать на разном уровне:
- подключить веб-карту или слой по ID или keyname за пару строк кода, используя общий API;
- погрузиться в более глубокую кастомизацию, импортируя отбельные библиотеки и утилиты для более точной работы.
NextGIS Frontend подходит и для быстрого запуска простого интерфейса поверх веб-карты, и для разработки сложного специализированного приложения из отдельных частей библиотек.
Многие типовые сценарии уже разобраны в примерах NextGIS Frontend. Это не только демонстрация возможностей, но и готовые фрагменты кода, которые можно использовать в своих проектах. Посмотреть фильтрацию в деле можно в примере с фильтрацией по свойствам слоя, а работу с веб-картами – в примере NGW web map.
Фильтровать, выбирать и показывать объекты стало проще
NextGIS Frontend вырос из многолетнего опыта разработки картографических веб-приложений. В большинстве из них снова и снова нужны одни и те же базовые операции:
- показать нужный слой;
- отобрать интересующие объекты;
- определить объект по клику;
- посмотреть его атрибуты;
- приблизиться к выбранным данным.
В версии 4 этим сценариям уделили особое внимание. Улучшена динамическая фильтрация, выбор и снятие выделения объектов, обработка событий, попапы и отображение выбранных объектов.
В результате типовые действия с данными требуют меньше специального кода и проще переиспользуются в разных приложениях.
Улучшенное взаимодействие между разными картографическими фреймворками
NextGIS Frontend позволяет использовать единый подход к работе с картой на разных картографических движках. В 4 версии эта универсальность стала ещё полнее: улучшена работа выбора и подсветки объектов, фильтрация, попапы, масштабирование и элементы управления картой.
Зачем нужно одинаковое поведение
NextGIS Frontend поддерживает три разных картографических фреймворка – Leaflet, Openlayers и MapLibre GL JS. Не для того, чтобы переключаться в одном приложении между ними. Идея в том, чтобы выделить значительную часть логики через общий API, а движок выбирать исходя из требований проекта. При этом там, где нужны специфические возможности движка, приложение по-прежнему может работать с ним напрямую.
У каждого варианта свои сильные стороны. Leaflet хорошо подходит для простых легковесных интерфейсов. OpenLayers подходит для решения более насыщенных инженерных ГИС-сценариев. MapLibre GL JS лучше всего справляется с WebGL-рендерингом, векторными тайлами, гибкой стилизацией, современной визуализацией, в том числе 3D.
Поэтому выбирайте картографический движок исходя из требований вашей задачи – интеграцию с NextGIS Web не придётся реализовывать заново. Основные механизмы взаимодействия с Веб ГИС уже реализованы и протестированы в библиотеках NextGIS Frontend.
В примерах ниже хорошо видно, как одни и те же задачи решаются на разных картографических фреймворках:
Общие элементы управления
Раньше каждый картографический адаптер использовал свой подход к элементам управления: кнопкам, переключателям и панелям. Это усложняло разработку и развитие интерфейсов.
В NextGIS Frontend 4 появился общий подход: теперь панели управления можно собирать одинаковым способом независимо от выбранного картографического движка. Элементы можно объединять в группы, добавлять групповые переключатели, менять ориентацию панелей и настраивать их расположение.
Хороший пример по теме: Пользовательские контейнеры элементов управления
Улучшенная интеграция с React
В новом релизе React-компоненты развиваются вместе с общей архитектурой NextGIS Frontend: используют универсальные элементы управления и единый подход к работе с картой.
Это позволяет сосредоточиться на логике самого веб-приложения, а низкоуровневое взаимодействие с NextGIS Web и особенности конкретного картографического движка оставить на стороне библиотек.
QuickMapServices теперь проще встроить в свою карту
В версии 4 интеграция с QuickMapServices выделена в самостоятельные пакеты для Leaflet, OpenLayers и MapLibre GL JS.
Кроме программного добавления подложки, появился удобный элемент управления для просмотра каталога и поиска сервисов QMS из вашего веб-приложения.
Это полезно в прикладных ГИС, где пользователю нужно выбрать подходящую картографическую основу, не обращаясь каждый раз к разработчику.
При этом библиотеки QMS можно использовать в абсолютно любых проектах, а не только в приложениях с NextGIS Web.
Примеры теперь ближе к реальному проекту
Внесено множество улучшений в сайт примеров code.nextgis.com.
Теперь пример можно не только посмотреть в браузере, но и использовать как готовую отправную точку для собственного приложения. Для каждого примера доступны версии на JavaScript и TypeScript, поэтому проще выбрать подходящий вариант и перенести код в свой проект.
Сам демо-сайт code.nextgis.com теперь поддерживает тёмную тему (подстраивается под системную), улучшена навигация и представление примеров. В справочнике API добавлено описание архитектуры пакетов, а также LLM-friendly документация – индекс llms.txt, удобный для того, чтобы скормить его ИИ-инструментам вроде Claude Code, Cursor, Antigravity при работе с кодом на основе NextGIS Frontend.
Ссылки по теме:
Для разработчиков
Одно из основных технических изменений версии 4 – типизация запросов к API конкретного экземпляра NextGIS Web.
Для NgwConnector.route() декларации TypeScript можно сгенерировать непосредственно из используемого сервера:
npx @nextgis/ngw-types-loader
В результате типы соответствуют компонентам и API-маршрутам, которые действительно доступны на вашем экземпляре NextGIS Web.
При обновлении существующих проектов обратите внимание на изменения в propertiesFilter, поддержку MapLibre GL JS 6 и новый общий подход к элементам управления.
Полный список технических изменений собран в CHANGELOG на GitHub. Исходный код и документацию по библиотекам можно найти в репозитории, а живые примеры на code.nextgis.com.
Если вы уже разрабатываете приложение на базе NextGIS Frontend, обновляйтесь до 4 версии. А если только начинаете, берите готовые примеры за основу и собирайте интерфейсы под свои задачи.