ProfiPHPProfiPHP
  1. Главная
  2. Полезное в PHP
  3. Работа с картой OpenStreetMap

Работа с картой OpenStreetMap

Сегодня OpenStreetMap набирает огромную популярность среди веб-картографических проектов. Причинами этого является его некоммерческий стиль, подробная свободная и бесплатная географическая карта мира, а также то, что сервис Google Maps, который до этого времени использовало значительное количество сайтов, стал платным! Также следует заметить, что OpenStreetMap появился задолго до Google Maps.

На сайте Openstreetmap.org размещена карта, онлайн-инструменты по ее редактированию, дневники участников, форум, справочная вики и раздел помощи. В Openstreetmap, как и в Wikipedia, основную часть данных добавляют частные лица, заинтересованные в развитии проекта. По каждому участку карты видна история правок, что в свою очередь снижает возможность вандализма и, в некоторых случаях, позволяет оптимизировать работу нескольких человек, занятых одним и тем же участком карты.

Данная статья будет дополняться по ходу реализации функционала различных проектов, связанных с OpenStreetMap.

Для полноценной работы карты OpenStreetMap мы будем использовать библиотеку JavaScript Leaflet, которая небольшая, простая и имеет отличную документацию.

В этой статье рассмотрим пример, который показывает, как:

- настроить простую карту с помощью библиотеки Leaflet;

- загрузить местоположение маркера;

- отображать координаты при нажатии на карте, или создавать визуально маркеры.

Нам обязательно потребуется загрузить библиотеки jQuery и Leaflet:
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Leaflet -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet.js"></script>
Данные строки включают библиотеки CSS и JavaScript, которые нам нужны для отображения и работы карты. В этом примере мы ссылаемся на эти файлы, хранящиеся на удаленном сервере с использованием CDNJS. Другой вариант - разместить эти файлы самостоятельно, но преимущества использования CDNJS:

1. Облегчает нагрузку на ваш сервер.

2. CDN распространяют контент, чтобы он был ближе к пользователю, что ускоряет загрузку.

3. Браузеры ограничивают количество запросов HTTP для каждого хоста, поэтому доступ к нескольким различным хостам позволяет извлекать данные параллельно, что приводит к более быстрому отображению страницы.

4. Если пользователь посетил другой сайт с использованием того же сценария, он автоматически будет сохранен в кэше, что позволит на вашем сайте не загружать его снова и значительно ускорит отображение страницы.

После загрузки скриптов и стилей необходимо включить в файл идентификатор карты:
<div id="map" style="height: 300px; width: 400px;"></div>
Мы создаем Div под названием map с высотой и шириной, который будет заполнен нашей картой, когда мы создадим ее в нашем JavaScript. Если мы не укажем ширину, карта будет динамически регулировать ширину для страницы.

Последняя часть этого файла является ключом. Здесь мы загружаем JavaScript, который выполняет настройку и отображение нашей карты.
<script>
var map = L.map('map').setView([-16.50629, -68.12703], 12);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
subdomains: ['a','b','c']
}).addTo(map);
L.marker([-16.50629, -68.12703]).addTo(map).bindPopup("My Marker");
</script>
Строка:
var map = L.map('map').setView([-16.50629, -68.12703], 12);
создаст новую карту, назначит ее идентификатор - map и установит некоторые параметры. В этом случае мы центрируем начальный вид, заданным координатами широты и долготы. Также мы устанавливаем уровень масштабирования 12. Здесь есть много других опций, которые вы можете настроить.
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
subdomains: ['a','b','c']
}).addTo(map);
Этот код добавляет слой на карту, сообщая ей, какой набор слоев отображать и где их получить. Есть несколько разных серверов, которые вы можете использовать - или вы можете разместить свой собственный.

Опять же, у Leaflet есть много опций, которые можно использовать при создании tileLayer. В нашем примере первым аргументом является шаблон URL, поэтому Leaflet знает, как правильно получать слои с серверов. Далее идет атрибуция - это то, что отображается в правом нижнем углу карты. Важно, чтобы вы добавили правильную информацию для правильной атрибуции набора слоев.

Наконец, у нас есть список поддоменов. Этот массив строк подставляется в часть {s} шаблона URL. Обратите внимание, что этот список зависит от серверов слоев, которые вы используете. Эта опция позволяет браузеру загружать файлы с нескольких серверов одновременно, что приводит к более быстрой загрузке страницы и более быстрым обновлениям, когда пользователь перетаскивает карту.

Хорошо, теперь у нас есть интерактивная карта, которую мы можем перетаскивать, увеличивать и уменьшать. Следующее, что необходимо сделать, это добавить маркеры.
L.marker([-16.50629, -68.12703]).addTo(map).bindPopup("My Marker");
В данном варианте координаты размещены непосредственно в коде скрипта. Но настоятельно рекомендуется сохранять в отдельном файле, чтобы их можно было легко заменить или обновить без изменения основного файла.

Маркеры Leaflet предлагают много вариантов для настройки. В нашем примере мы создаем маркер в определенном месте, привязываем к нему простое всплывающее окно и добавляем его на нашу карту. В данной строке указывается широта и долгота, а также данные, отображаемые во всплывающем окне.

Основная задача карты выполнена, мы показали маркеры и выведи необходимую информацию. Но как добавлять координаты для маркера? Вот рабочий пример:
<script>
// Загружаем карту
addMapPicker(-16.50629, -68.12703, 12);
function addMapPicker(cordX, cordY, zoom) {
var mapCenter = [cordX, cordY];
var map = L.map('map').setView([cordX, cordY], zoom);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var marker = L.marker(mapCenter).addTo(map);
map.on('click', function(e) {
// Обновляем маркер
marker.setLatLng([e.latlng.lat, e.latlng.lng])
// Отправляем данные AJAX
// ...
alert(e.latlng.lat + ' ' + e.latlng.lng);
});
}
</script>
И html код:
<input type="hidden" id="coordinates" />
<div id="map" style="height: 300px; width: 400px;">
Теперь, при нажатии на карте, будет выводится ширина и долгота. Немного доработав скрипт, можно отправлять данные с помощью библиотеки jQuery.

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

Имя:
Текст комментария: