Openlayers — это популярный пакет Javascript, который позволяет разработчикам создавать приложения с интерактивными картами. Он предлагает API-интерфейсы, которые могут выполнять запросы к ресурсам ГИС и отображать полученные данные в браузере клиента. Обычно ГИС-серверы предлагают такие услуги, как WMS, WMTS или WFS. API-интерфейсы пакета предлагают соответствующие способы анализа данных из этих различных сервисов для отображения информации ГИС. В этой статье я создам картографическое приложение, использующее некоторые возможности пакета. Вы можете найти официальную документацию здесь. https://openlayers.org/en/latest/apidoc/
Я создам проект npm для управления зависимостями проекта. Во-первых, давайте добавим Openlayers в качестве зависимости и посылки в качестве зависимости от разработчиков.
npm install ol npm install -D parcel-bundler
Затем добавьте стартовый скрипт в package.json, чтобы использовать пакет для объединения наших кодов и запуска сервера разработки.
Затем создайте файл index.html для размещения карты. После этого нам не нужно добавлять какие-либо разметки в html. С этого момента все наши коды будут на Javascript.
Добавьте файл index.js для главной записи проекта js. Для простоты мы инициируем экземпляр Openlayers Map в этом файле и начнем с двух слоев. Слои — это базовые единицы, которые можно отображать на карте.
Обратите внимание, что в строке 8 файла index.js мы добавили новый экземпляр TileLayer с источником из OSM (Open Street Map). В строке 12 мы инициируем экземпляр карты и сохраняем ссылку на объект в переменной map. Это поможет нам позже взаимодействовать с картой, используя переменную.
Кроме того, мы импортировали landLayer из другого js-файла с именем xyzLayer. Этот объект является еще одним TileLayer с другим поставщиком источника, в данном случае источником XYZ. Это в основном позволяет карте отображать точную плитку карты (по сути, файлы png) на основе текущего масштаба пользователя и координат x-y.
Обратите внимание, что в строке 6 файла xyzLayer.js я добавил массив координат (нижний левый x-y и верхний правый x-y) и сохранил этот массив в переменной areaExtents. Это необходимо для предоставления значения дополнительных параметров, когда мы инициализируем нашу плитку с источником xyz. Массив экстентов обеспечивает границу, для которой объект плитки должен запрашивать.
Включите консоль браузера, и вы обнаружите, что она регистрирует множество ненайденных png. Это потому, что у меня не было всех тайлов, которые можно было предоставить для скачивания. На самом деле тайлы исходников xyz, которые я включил в проект, находятся не намного дальше пары кварталов в моем родном городе!
Чем меньше экстент, тем меньше файлов будет пытаться разрешить источник xyz. Если мы уменьшим экстент еще больше, мы можем достичь точки, когда мы больше не видим 404 в нашем журнале консоли. Конечно, это действительно зависит от количества информации, доступной для пользователя. Попробуйте использовать очень маленькую степень, как показано ниже. Вы увидите, что наша плитка xyz ограничена небольшой коробкой.
const areaExtents = [13493562.418760775, 2876699.7234530193, 13494302.859017791, 2877375.924600978];
Наконец, я использовал контейнер Docker (веб-сервер nginx) для размещения png-файлов плитки xyz. Следующие фрагменты — это используемый файл Dockerfile и nginx conf.
В Dockerfile я просто скопировал статические ресурсы, такие как html и файлы изображений плитки, в определенное место в контейнере.
В файле конфигурации веб-сервера есть псевдоним URL для наших тайловых ресурсов (с физическим расположением в /src/assets/ внутри контейнера.
Вот и все. Мы только что создали приложение с картографическим сервером контейнера докеров. В следующих статьях я покажу некоторые возможности, предлагаемые Openlayers для взаимодействия с картой. Быть в курсе!
