Долгое предисловие
Задался я как-то вопросом собрать GPS-ошейник для шерстяного спутника моей жизни, дабы этот кракен сухопутный мог бороздить лесные просторы без особого ущерба для моей нервной системы. Собрать саму “шайтан-машинку” планирую на двух ESP32, двух GPS-модулях NEO-6M и Lora-модулях E22 для дальней связи, чтобы работало везде, всегда и безотказно.
Пока имею тестовый стенд без Lora, но так как они занимают не самую основную роль, можно и протестировать. Однако, чтобы отображать карту в веб-интерфейсе, нужны глубокие познания и магические способности властелинов кода, которых у меня нет. Поиски в глобальной сети дали не очень ясную картину того, как я могу это сделать, так как написаны сложными буквами и страшными словами.
И вот, я решил поделиться тем, что нашёл, понял и применил.
Что понадобится:
Любой редактор кода
Что получилось:
Для начала нужно получит готовые тайлы (мини фрагменты наше карты).
Распаковываем Mapertive и запускаем, в основное окно подгружается карта, для дальнейшего ускорения генерации тайлов рекомендую заранее подготовить участок карты в формате .osm, который можно экспортировать на официальном сайте OpenStreetMap, и открыть вместо стандартной карты.
Во вкладке Map устанавливаем границы участка для нарезки Map -> Set Printing Bounds
В терминале вводи команду generate-tiles maxzoom=* minzoom=*, где maxzoom - максимальное приближение, minzoom - максимальное отдаление.
После завершения генерации тайлов, они появятся в папке Tiles, которую мы копируем в папку нашего будущего проекта.
В папку с проектом добавляем загруженную библиотеку и создаём html страницу вот с таким кодом:
<!DOCTYPE html>
<html>
<head>
<title>Отображение тайлов OSM</title>
<style>
/* Стили для контейнера карты */
#map {
margin: 20px 20px 20px;
height: 700px;
border-radius: 50px;
text-align:center;
}
</style>
<link rel="stylesheet" href="leaflet/leaflet.css" /> <!-- Подключение CSS-файла Leaflet -->
</head>
<body>
<div id="map"> <!-- Контейнер карты -->
<script src="leaflet/leaflet.js"></script> <!-- Подключение JavaScript-файла Leaflet -->
<script>
// Создание карты
var map = L.map('map').setView([51.710298, 46.748233], 11);
// Добавление слоя тайлов
L.tileLayer('Tiles/{z}/{x}/{y}.png', {
maxZoom: 17,
minZoom: 10,
tileSize: 256,
zoomOffset: 0,
attribution: 'Your attribution goes here' // Здесь можно указать атрибуцию для слоя тайлов
}).addTo(map);
</script>
</div>
</body>Остаётся изменить координаты начального фокуса и значения zoom под ваши .
