Openlayers — это, по сути, бесплатная библиотека Javascript, которая позволяет отображать карты в Интернете. Это также позволяет вам производить редактирование на карте в соответствии с типом данных. Эта библиотека, которая может работать со многими типами данных в соответствии со стандартами OGC, позволяет разрабатывать картографические веб-приложения.

Он может работать со многими бесплатными или коммерческими сервисами картографических плиток, такими как Bing, OpenStreetMap. Сервисы плиток Google Maps официально не поддерживаются Openlayers, есть способ как-то его добавить, но это противоречит лицензионным соглашениям Google.

Эта библиотека, которая стала вполне функциональной в последней версии 7.3.0, предлагает бесплатную альтернативу большим и платным API, таким как Google Maps и Bing Maps. Помимо работы на мобильных устройствах, он также совместим с интерфейсными библиотеками JavaScript, такими как React и Vue.

Давайте напишем код

Он использует Node (14 или более позднюю версию) для своей среды разработки и требует установки Git. Самый простой способ запустить проект Openlayers — использовать команду npm create ol-app, которая помещает полноэкранную карту на страницу.

Давайте создадим наш первый проект с именем first-app, выполнив команду npm create ol-app first-app. Затем запустите команду npm start, чтобы запустить сервер разработки, перейдя в каталог проекта с помощью команды cd first-app.

Вы должны увидеть URL-адрес, похожий на http://127.0.0.1:5173/ в терминале. Вы можете запустить свой первый проект Openlayers в своем браузере, открыв этот URL-адрес в своем браузере.

Глубокое погружение первого проекта

Когда вы создаете свой первый проект Openlayers с помощью команды npm create ol-app, он создает три основных файла с именами style.css, index.html и main.js.

  • style.css — содержит некоторые коды CSS для изменения размера вашей карты. Самая важная часть файла css — это включение файла ol.css в первую строку. Этот файл содержит стили по умолчанию, включенные в Openlayers.
  • index.html — содержит элементы html, которые будут содержать карту. В этом файле есть две важные части, первая — элемент <div>, который будет служить контейнером для карту и элемент <script> чуть ниже него, который используется для инициализации карты.
  • main.js — включает коды JavaScript, которые инициализируют карту: этот файл начинается с включения необходимых библиотек Javascript для создания карты. Затем он содержит компоненты «Источник», «Карта», «Вид» и «Слой», необходимые для создания карты. Эти компоненты будут подробно рассмотрены в следующих статьях.

Развертывание первого проекта

Чтобы собрать приложение, запустите команду npm run build. Эта команда создаст новый index.html и каталог распространения, содержащий необходимые ресурсы, из которых состоит ваше приложение. Эти файлы дистрибутива можно распространять вместе с вашим производственным веб-проектом.

Заключительные слова

Эта статья была введением в Openlayers. Эта библиотека имеет действительно хорошие возможности для ГИС. У меня лично была возможность использовать его в малых и средних ГИС-проектах, он работает на 100% совместим с другими компонентами, такими как Geoserver и PostGIS, что позволяет вам сделать полноценный ГИС-проект. Я буду продолжать писать на эту тему.