Геоинформатика. Работа с leaflet

В этом занятии мы научимся создавать интернет-страницу, в которою будет встроена карта вашего района.
Для работы нам понадобится текстовый редактор (блокнот). Рекомендую вместо стандартного блокнота использовать программу Notepad++. Для вставки карты на сайт мы будем использовать JavaScript библиотеку с открытым исходным кодом Leaflet. Также потребуется проект QGIS по району города.

Создадим новый текстовый документ формата .txt и добавим в него следующий html-код:

  1.   <head>
  2.     <title>Название страницы</title>
  3.   </head>
  4.   <body>
  5.     <h1>
  6.       Заголовок страницы
  7.     </h1>
  8.     <p>
  9.       Текст страницы
  10.     </p>
  11.   </body>
  12. </html>

Это начальная структура любого сайта. Далее следует сохранить и закрыть текстовый документ. Сменить расширение файла с .txt на .html (в свойствах папок должен быть установлен показ расширений файлов) и открыть файл в браузере.
Для использования Leaflet на вашем сайте необходимо в заголовок сайта (head) добавить ссылки на CSS-стили и код Leaflet:

  1.   <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"
  2.    integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
  3.    crossorigin=""/>
  4.   <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"
  5.    integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
  6.    crossorigin=""></script>

В тело сайта (body) нужно добавить div-элемент с id=map и заданными размерами:

  1. <div id="map"  style="position: absolute; left: 10px; right: 10px; top: 100px; bottom: 10px; overflow:false;"></div>

Создаем блок script в теле сайта. Итоговый html-код представлен ниже:

  1.   <head>
  2.     <title>Название страницы</title>
  3.        
  4.  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"
  5.   integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
  6.   crossorigin=""/>
  7.  <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"
  8.   integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
  9.   crossorigin=""></script>
  10.   </head>
  11.   <body>
  12.     <h1>
  13.       Заголовок страницы
  14.     </h1>
  15.     <p>
  16.       Текст страницы
  17.     </p>
  18.     <div id="map"  style="position: absolute; left: 10px; right: 10px; top: 100px; bottom: 10px; overflow:false;"></div>
  19.     <script type="text/javascript">
  20.       //Здесь будет писаться весь дальнейший код
  21.     </script>
  22.   </body>
  23. </html>

Весь нижеследующий код должен писаться в блок script в теле сайта.
Теперь мы можем инициализировать карту и установить географические координаты центра карты и масштаб:

  1. var map = L.map('map').setView([55.753, 37.619], 13);

Мы получили контейнер карты с серым фоном. Теперь надо подключить базовую картографическую подложку. В примере мы будем использовать тайловый слой OSM:

  1. L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  2.     attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  3. }).addTo(map);

Добавить маркер на карту:

  1. L.marker([51.5, -0.09]).addTo(map)
  2.     .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
  3.     .openPopup();

Добавить геометрию из файла geojson:
В QGIS сохраняем слой границ как bound.geojson
Открываем файл bound.geojson в текстовом редакторе, в начале файла объявляем переменную adm. Сохраняем файл. Пример файла с объявленной переменной:

  1. var adm = {
  2. "type": "FeatureCollection",
  3. "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
  4. "features": [
  5. //массив объектов слоя
  6. ]
  7. }

Подключаем в заголовке сайта (head) файл bound.geojson:

  1. <script src="bound.geojson"></script>

Добавляем слой geoJson (хранится в объявленной переменной adm) на карту:

  1. L.geoJson(adm).addTo(map);