Категория: Геоинформационные технологии

Иногда бывает необходимо просмотреть карту в виде пирамиды тайлов без доступа в интернет.

Рассмотрим различные способы решения этой задачи.

1. Способ первый (пожалуй самый простой) - на основе Openlayers

OpenLayers представляет собой мощную и в то же время свободно распространяемую библиотеку на языке JavaScript для работы с картами. 

Для просмотра пирамиды тайлов страница будет примерно такой:

<!doctype html>
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="/ol.css" type="text/css">
    <style>
      html, body, .map {
        height: 100%;
        width: 100%;
        padding: 0;
        margin: 0;
      }
    </style>
    <script src="/ol.js"></script>
    <title>Softarius & OpenLayers</title>
  </head>
  <body>
   
    <div id="map" class="map"></div>
    <script type="text/javascript">

var mousePositionControl = new ol.control.MousePosition({
  coordinateFormat: ol.coordinate.createStringXY(4),
  projection: 'EPSG:4326',
  undefinedHTML: '&nbsp;'
});

var sl = new ol.control.ScaleLine({});
      var map = new ol.Map({
        controls: ol.control.defaults().extend([mousePositionControl, sl]),
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.XYZ({
               url:'tiles/{z}/{x}/{y}.png'
            })
          }),
          new ol.layer.Graticule({showLabels: true})
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([38.3, 34.8]),
          zoom: 7
         
        })
      });
    </script>
  </body>
</html>

Внешний вид работающей страницы приведен ниже.

Для просмотра пирамиды тайлов использован источник типа XYZ. Этот акроним как раз и обозначает способ представления карты в виде так называемой "пирамиды" тайлов. Буква Z обозначает zoom, или приближение карты (не путать с масштабом). X и Y - целочисленные координаты тайла.

Сами тайлы размещены рядом с файлом в папке tiles (просто вариант имени) и содержать в качестве примера карту интересующей весь мир Сирии из OpenStreetMap в зумах от 0 до 9.

При запуске страницы карта имеет 7-й зум и позиционирует карту примерно по центру Сирии. Зуммирование осуществляется колесом мыши или нажатием на кнопки и на карте. 

Карта снабжена градусной сеткой, шаг которой адаптируется под зум. В правом верхнем углу карты показываются географические координаты (EPSG 4326, та что дает GPS) точки позиции указателя мыши.

Демонстрация такого решения

Использовать такой просмотрщик очень просто - достаточно распаковать прилагаемый ниже архив в любую папку и отрыть браузером файл index.html.

Свою пирамиду тайлов вы можете скопировать в папку tiles.

Архив для оффлайн использования.

Конечно такая страница является лишь начальной заготовкой, способной лишь просматривать тайлы и видеть координаты текущей точки. Для решения каких либо практических задач нужно либо разработывать требуемого решение на OpenLayers или же можно воспользоваться средствами полноценных геоинформационных систем (ГИС).

2. Карта в локальной сети

Если же понадобиться предоставить карту другим участникам в сети, то нужно использовать веб-сервер. Зачастую это IIS для Windows и Apache HTTPD для Linux. Однако для предоставления статических файлов вполне подойдет компактный, быстрый и простой в управлении сервер Nginx.

Для установки NGINX его достаточно распаковать его в любую папку и запустить командой start nginx. Основные файлы находятся в папке html. Туда и нужно скопировать файлы карты.

После запуска карта будет доступна по адресу http://localhost вашего компьютера. Для ваших коллег карта будет доступна по адресу http://<IP адрес вашего компьютера>. 

Архив карты с NGINX.

Для удобства использования внутри папки сервера созданы командные файлы start.bat и stop.bat для запуска и остановки сервера соответственно.

3. Подключение пирамиды тайлов к ГИС

Большинство современных геоинформационных систем (ГИС) умеет подключаться к пирамидам тайлов по протоколу HTTP(s). Это означает, что развернутый нами веб сервер с тайлами отличный кандидат для этого.

Воспользуемся многофункциональной и бесплатной ГИС QGIS. Начинающим пользователям можно посоветовать наиболее простой способ установки в виде самостоятельного дистрибутива (Standalone installers from OSGeo4W packages) на странице загрузки https://qgis.org/ru/site/forusers/download.html. Именно ее можно скопировать на внешний носитель и устанавливать на компьютере без подключения к интернет. 

На странице QGIS предлагаются для скачивания две версии - "свежайшая" (Latest release) со всеми новшествами на текущий момент и "долгосрочную" (Long term release repository) как стабильно поддерживаемую в репозиториях операционных систем. Для нашей задачи принципиального различия нет, то что нам нужно есть давно в поддерживаемой версии.

После установки запускаем QGIS ярлыком "QGIS Desktop 3.4.12" (номер версии long term на момент написания статьи) без слов "with" и "custom". После запуска на экране должно появиться следующее окно.

Желтым маркером выделена ветка в браузере (попросту "дереве") источников данных. Если распахнуть ветку XYZ tiles, то можно увидеть предустановленный слой OpenSteetMap.

После двойного щелчка источник будет добавлен в проект карты QGIS, как на скриншоте ниже.

 

Чтоб узнать откуда менно беруться тайлы можно щелкнуть правой кнопкой кнопкой по названию источника в дереве и выбрать "Изменить". В строке Адрес можно увидеть те самые параметры, которые передаются серверу для получения нужного тайла.

Осталось подключить наш источник тайлов. Для этого с помощью контекстного меню в ветви "XYZ tiles" "Создать соединение..." создайте новый источник тайлов и введите адрес http://localhost/tiles/{z}/{x}/{y}.png при условии, что веб-сервер (см. пункт выше) уже запущен. Дважды щелкните по имени сохраненного источника для добавления слоя с ним в проект карты.

После отключения видимости слоя OpenSteeetMap наш проект будет выглядеть примерно так.

 

На этом настройку локального источника тайлом можно считать законченной.

В следующей статье я постараюсь описать процесс подключения пользовательских источников данных в различных форматах.