Долгое предисловие
Задался я как-то вопросом собрать 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 под ваши .
Если кто имеет опыт работы в данной сфере буду рад услышать советы и рекомендации
ссылка на оригинал статьи https://habr.com/ru/articles/789930/
Добавить комментарий