В этом занятии мы научимся создавать интернет-страницу, в которою будет встроена карта вашего района.
Для работы нам понадобится текстовый редактор (блокнот). Рекомендую вместо стандартного блокнота использовать программу Notepad++. Для вставки карты на сайт мы будем использовать JavaScript библиотеку с открытым исходным кодом Leaflet. Также потребуется проект QGIS по району города.
Создадим новый текстовый документ формата .txt и добавим в него следующий html-код:
Это начальная структура любого сайта. Далее следует сохранить и закрыть текстовый документ. Сменить расширение файла с .txt на .html (в свойствах папок должен быть установлен показ расширений файлов) и открыть файл в браузере.
Для использования Leaflet на вашем сайте необходимо в заголовок сайта (head) добавить ссылки на CSS-стили и код Leaflet:
-
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"
-
integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
-
crossorigin=""/>
-
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"
-
integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
-
crossorigin=""></script>
В тело сайта (body) нужно добавить div-элемент с id=map и заданными размерами:
Создаем блок script в теле сайта. Итоговый html-код представлен ниже:
-
<html>
-
<head>
-
-
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"
-
integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
-
crossorigin=""/>
-
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"
-
integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
-
crossorigin=""></script>
-
</head>
-
<body>
-
<h1>
-
Заголовок страницы
-
</h1>
-
<p>
-
Текст страницы
-
</p>
-
<script type="text/javascript">
-
//Здесь будет писаться весь дальнейший код
-
</script>
-
</body>
-
</html>
Весь нижеследующий код должен писаться в блок script в теле сайта.
Теперь мы можем инициализировать карту и установить географические координаты центра карты и масштаб:
-
var map = L.map('map').setView([55.753, 37.619], 13);
Мы получили контейнер карты с серым фоном. Теперь надо подключить базовую картографическую подложку. В примере мы будем использовать тайловый слой OSM:
-
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
-
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
-
}).addTo(map);
Добавить маркер на карту:
-
L.marker([51.5, -0.09]).addTo(map)
-
.bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
-
.openPopup();
Добавить геометрию из файла geojson:
В QGIS сохраняем слой границ как bound.geojson
Открываем файл bound.geojson в текстовом редакторе, в начале файла объявляем переменную adm. Сохраняем файл. Пример файла с объявленной переменной:
-
var adm = {
-
"type": "FeatureCollection",
-
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
-
"features": [
-
//массив объектов слоя
-
]
-
}
Подключаем в заголовке сайта (head) файл bound.geojson:
Добавляем слой geoJson (хранится в объявленной переменной adm) на карту:
-
L.geoJson(adm).addTo(map);