Быстрая разработка Веб ГИС приложений на базе библиотек NextGIS Frontend

Друзья, рады сообщить о запуске нового способа взаимодействия с сервисами и продуктами NextGIS — облачной Веб ГИС nextgis.com, серверным решением NextGIS Web и каталогом QuickMapServices!

Как вы могли отметить, в прошлые годы мы были сосредоточены на ПО для конечных пользователей, эта новость — для разработчиков. Мы представляем новый комплекс браузерных JavaScript-библиотек, позволяющих быстро создавать свои приложения, используя ресурсы, предоставляемые нашей серверной частью.

Введение

Главное назначение библиотек – упрощение подключения к ресурсам nextgis.com/NextGIS Web и управления ими через интерфейс специализированных библиотек; обеспечение удобства разработки Веб ГИС приложений разного уровня сложности.

Рис.1. Пример — минимум JS-кода для создания интерактивной карты, включающей: 1) загруженные слои из ранее созданной в Веб ГИС карты, и 2) картографическую подложку из каталога QMS (посмотреть пример в действии)

Поддерживаются разные картографические веб-фреймворки, которые могут замещать друг друга с незначительными изменениями программного кода. Ниже приведены ссылки на примеры создания простой карты с одной подложкой и несколькими векторными слоями:

• Leaflet — https://code.nextgis.com/ngw-leaflet-examples-geojson-layer
• Openlayers — https://code.nextgis.com/ngw-ol-examples-geojson-layer
• Mapbox GL JS — https://code.nextgis.com/ngw-mapbox-examples-geojson-layer

Основные возможности:

• простота в использовании (см. Рис. 1);
• один интерфейс для разных картографических фреймворков (Leaflet, OpenLayers, Mapbox GL JS);
• оптимизация выполнения самых распространенных операций для веб-карт;
• данные из разных сервисов NextGIS в одном месте;
• удобный способ распространения (CDN, npm, git).

Сборки и модули

Всего на данный момент существует 14 библиотек, которые можно разделить на сборки и модули (Рис. 2).

Сборка (package) – это библиотека, реализующая простой механизм для создания карт. Может объединять в себе несколько модулей и библиотек сторонних разработчиков, т.е. сборка готова к использованию без установки дополнительных зависимостей. Может включать скрипты, стили и картинки – всё это распространяется в одном файле, который подключается через CDN или другим удобным способом.

К сборкам относятся библиотеки:

1. ngw-leaflet, ngw-ol и ngw-mapbox – сборки для трех основных open-source веб гис фреймворков с единым интерфейсом взаимодействия и простыми методами управления ресурсами NGW.
2. ngw-connector — формирует запросы к API NGW, позволяет авторизоваться  пользователю по своим учётным данным. Данная библиотека не содержит связи с картой, оперирует только данными.
3. ngw-uploader — загружает данные, создает ресурсы, слои, стили и формирует сервисы на nextgis.com/NextGIS Web.

Модуль (module) – “строительный материал”, подготовленный для импортирования в приложения с настроенным механизмом сборки, например, через Webpack. Поддерживает типизацию TypeScript.

Имеющиеся модули:

1. webmap – базовый модуль, является абстрактным представлением карты, её слоёв и состояния. Не имеет зависимостей и не связан с сервисами NextGIS.
2. адаптеры leaflet-map-adapter, ol-map-adapter и mapboxgl-map-adapter – обеспечивают единый интерфейс управления различными картографическими фреймворками через webmap.
3. ngw-map – почти то же самое что и webmap, только с настроенным взаимодействием с сервисами NextGIS. Позволяет решать самые распространённые задачи веб-карт с минимумом кода.
4. Интерфейсы взаимодействия с внешними сервисами ngw-kit и qms-kit – способ расширения webmap для интеграции:
   1. с облаком nextgis.com для загрузки ресурсов и проектов карт;
   2. c QuickMapServices для быстрого добавления подложек из каталога.
5. icons – набор настраиваемых svg-иконок для стилизации отображения точечных данных на карте (пока только для leaflet-map-adapter).
6. dialog – модуль для работы с модальными окнами, авторизаций и т.п.

Рис. 2. Схема основных зависимостей между библиотеками фронтенда NextGIS.

Примеры

По адресу code.nextgis.com можно увидеть описание компонентов. Большинство библиотек можно проверить в действии на вкладках примеров, а для тестирования своих изменений можно быстро перенести код в редактор codepen. Количество примеров будет увеличивается с выходом новых версий.

Скриншот страницы примера (leaflet, mapbox-gl, openlayers), демонстрирующий работу с выделением объектов векторных слоёв, загруженных с Веб ГИС nextgis.com.

Взаимодействие с nextgis.com/NextGIS Web

Библиотеки работают по API с данными, хранящимися в Веб ГИС, которая используется в качестве бэкенда. Для эффективного использования наших библиотек у вас должна быть облачная Веб ГИС, развернутая на сервисе nextgis.com, или свой сервер NextGIS Web. Облачная Веб ГИС должна быть на плане Mini или Premium, в настройках CORS своей Веб ГИС нужно указать домены, где развернуты примеры.

Подробности

Текущий статус разработки можно охарактеризовать как Beta-версия. Мы используем все эти библиотеки в наших проектах и постоянно их развиваем.

Библиотеки написаны с использованием TypeScript, организованы в моно-репозиторий при помощи Lerna и пакетного менеджера Yarn. Сборка компонентов в rollup.js.

Код проекта доступен на GitHub под лицензией MIT. Сообщить об ошибке или предложить функцию можно через трекер или форму обратной связи.