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

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

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

  2.   <head>
  3.     <title>Название страницы</title>
  4.   </head>
  5.   <body>
  6.     <h1>
  7.       Заголовок страницы
  8.     </h1>
  9.     <p>
  10.       Текст страницы
  11.     </p>
  12.   </body>
  13. </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-код представлен ниже:

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