Как использовать Leaflet оффлайн?

Question

ssssergey @ssssergey

Как использовать Leaflet оффлайн?

Хочу чтобы скрипт работал без интернета на базе карт Google Maps, Яндекс.карты или OpenStreetMaps. Как это реализовать? Как скачать? Как прописать ссылку на скачанные карты в скрипте?
Спасибо!

Вопрос задан более трёх лет назад
14112 просмотров

Комментировать

Подписаться 7 Простой Комментировать

Решения вопроса 1

2 комментария

Пригласить эксперта

Ответы на вопрос 1

14 комментариев

Тимофей Бережнов @timaberezhnov

ssssergey Не могли бы Вы подробнее описать, как "подсунуть" Leaflet'у тайлы, не поднимаю сервер?

Написано более трёх лет назад
ssssergey @ssssergey Автор вопроса

Примерно вот так:

L.tileLayer('d:/Path/to/Folder/Tiles/{z}/{x}/{y}.png', {maxZoom: 18}).addTo(map);

Написано более трёх лет назад

ssssergey @ssssergey Автор вопроса

<!doctype html>
<html>
<head>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
</head>

<body>
	<div id="map" style="width: 1000px; height: 500px; position: relative;"></div>
	<script src="libs/leaflet.js"></script>
	<script>
		var map = L.map('map').setView([45.035320, 41.966561], 10);
		L.tileLayer('d:/Soft/MapTiles__/Maperitive/Tiles/{z}/{x}/{y}.png', {
			maxZoom: 18
		}).addTo(map);
		L.control.fullscreen().addTo(map);
	</script>
	
</body>
</html>

Написано более трёх лет назад

ssssergey @ssssergey Автор вопроса

Изменитt путь и начальную точку setView

Написано более трёх лет назад
ssssergey @ssssergey Автор вопроса

А еще здесь надо указать вашу ссылку или в сети: src="libs/leaflet.js.

Написано более трёх лет назад

Тимофей Бережнов @timaberezhnov

ssssergey:

<html>
<head>
<title>Some Title</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="Leaflet/leaflet.css" />
<script src="Leaflet/leaflet.js"></script>
</head>
<body>
<div id="map"></div>
<script>
	var map = L.map('map').setView([51.83, 107.62], 13);

	L.tileLayer('d:/.users/tberezhnov/Maperitive/Tiles/{z}/{x}/{y}.png', {
		minZoom: 12,
		maxZoom: 17,
		attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
			'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
	}).addTo(map);
</script>
</body>
</html>

Написано более трёх лет назад

Тимофей Бережнов @timaberezhnov

ssssergey: не работает, думаю Maperitive как-то неправильно режет тайтлы...

Написано более трёх лет назад
Тимофей Бережнов @timaberezhnov

ssssergey: Спасибо большое за подробные советы, но всё не так плохо, как вы думаете :)

Написано более трёх лет назад
ssssergey @ssssergey Автор вопроса

Можно отследить ошибку в консоли браузера. Если у вас Хром, то после загрузки страницы нужно нажать Ctrl Shift J и появится консоль с ошибками красным шрифтом. Справа от красной надписи будет ссылка на участок кода, где произошла ошибка.

Написано более трёх лет назад
Тимофей Бережнов @timaberezhnov

ssssergey: В том то и беда, никаких ошибок в консоли

Написано более трёх лет назад
ssssergey @ssssergey Автор вопроса

Возможно скачанный участок карты находится слишком далеко от точки входа setView.

Написано более трёх лет назад
Тимофей Бережнов @timaberezhnov

ssssergey: Координаты точки входа указал из файла Tiles.json, сгенерированного Maperitive'ом

Написано более трёх лет назад
Тимофей Бережнов @timaberezhnov

ssssergey: Кстати, если указать тайлы OSM'а (http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png) всё работает, всё как надо

Написано более трёх лет назад
Тимофей Бережнов @timaberezhnov

ssssergey: Проблема решена, большое Вам спасибо!
Может кому-то будет полезно:
Как видно в коде, который приложен выше, в пути была папка с точкой в имени. Она и стала причиной ошибки.

Написано более трёх лет назад

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

Google Maps

Простой
Почему возникает ошибка при подключении GoogleMap и как исправить?
- 1 подписчик
- 17 окт.
- 91 просмотр
0

ответов
Алгоритмы

+1 ещё

Средний
Алгоритм маршрута перевозчика?
- 1 подписчик
- 15 окт.
- 132 просмотра
1

ответ
Excel

+1 ещё

Простой
Как перенести хронологию гугл-карт (историю местоположений) в формат электронной таблицы (эксель) автоматически?
- 2 подписчика
- 27 сент.
- 187 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как распечатать React компонент с картой react-leaflet?
- 1 подписчик
- 05 авг.
- 133 просмотра
0

ответов
Яндекс.Карты

+1 ещё

Простой
Где можно посмотреть старые спутниковые карты подмосковья?
- 1 подписчик
- 03 авг.
- 468 просмотров
2

ответа
Яндекс.Карты

+1 ещё

Простой
Как преобразовать ссылку на карту Google в ссылку на карту Яндекс?
- 1 подписчик
- 29 июл.
- 129 просмотров
1

ответ
C#

+3 ещё

Средний
При использовании компонента $(TargetFrameworkVersion) v12.0 требуется пакет SDK для Jаvа как минимум версии 11.0?
- 1 подписчик
- 06 июл.
- 66 просмотров
1

ответ
JavaScript

+1 ещё

Средний
Leaflet кастомные координаты или сетка координат?
- 1 подписчик
- 26 мая
- 120 просмотров
0

ответов
Leaflet

Сложный
Как мне добавить изображение слоя по широте в Lealfet библиотеке?
- 1 подписчик
- 16 мая
- 22 просмотра
2

ответа
Google Maps

Средний
Как изменить цвет фона кластера?
- 1 подписчик
- 10 мая
- 56 просмотров
0

ответов
Показать ещё Загружается…

Fullstack-разработчик (Vue 3, TypeScript, Firebase)

Onemoney

от 180 000 до 180 000 ₽

Marketing manager (Инвестиции)

Intelinvest

от 90 000 ₽

Контекстолог / Специалист по контекстной рекламе

Wanted. • Москва

До 300 000 ₽

Нписать индикатор на языке Pine Script для TradingView

22 дек. 2024, в 13:01

50000 руб./за проект

Игра С# MVC console + wpf

22 дек. 2024, в 10:44

15000 руб./за проект

Извлечь данные из архива

22 дек. 2024, в 10:12

10000 руб./за проект

Answer 1 · 2015-01-06 18:41:32

Можно реализовать с картой OpenStreetMaps.
1. Скачать нужный фрагмент карты extract.bbbike.org в формате OSM.
2. Нужно отрендерить тайлы. Вот список приложений для рендеринга wiki.openstreetmap.org/wiki/RU:Rendering. Простой в использовании maperitive.net/.
3.На локальном вэб-сервере разместить папку с тайлами.
4. ссылка в Leaflet http://localhost/Tiles/{z}/{x}/{y}.png

Answer 2 · 2015-01-06 22:31:01

В общем, благодаря ответу ittim мне удалось дойти до 3 пункта из его списка.
Просто хочется поподробнее раскрыть первые два пункта для тех кому интересно.
1. С сайта extract.bbbike.org скачивается нужный вам фрагмент карты. Там в поле:
- "Format" выбираете "OSM XML 7z";
- "Your email adress" вписываете ваш адрес почты, на которую они пришлют фрагмент карты;
- "Name of area to extract" - как-нибудь обзовите фрагмент;
Потом идет кнопка Extract. Ее пока пропускаете. А нажимаете на кнопку поменьше и пониже "here". Ну естественно перед этим нужно навести карту справа на необходимое место. Если промахнулись ничего страшного. Нажимаете на появившуюся кнопку "Select a different area" и все возвращается в исходное положение. После того как вы убедились, что оранжевый прямоугольник покрывает необходимый участок нажимаете "Extract". Все. В течение получаса на вашу почту придет ссылка, по которой вы скачаете свой фрагмент.
2. Скаченные фрагмент это не картинка, а XML данные, которые нужно преобразовать в картинки (tiles). Для этого с сайта maperitive.net скачиваете программку. Запускаете. Заходите File->Open map sources, выбираете скачанный XML фрагмент (предварительно распакованный). Программка задумается ненадолго (в зависимости от размера файла). Заходите в Tools->Generate Tiles. После этого программка будет думать еще дольше. По завершению в папке Tiles внутри программной папки появятся те самые тайлы в формате png.
3. Оказалось, что сервер можно не поднимать. Просто прописываете ссылку на папку с тайлами. Например: d:/Tiles//{z}/{x}/{y}.png

P.S. Оказалось можно пропускать 1 пункт и делать тайлы прямо из программки Maperitive.
P.P.S. Программка Maperitive оказалась непростой. В нижней части имеется поле командной строки, которое позволяет осуществлять гибкую настройку. Например, по умолчанию осуществляется рендеринг пяти уровней зума, но если написать в командной строке generate-tiles minzoom=8 maxzoom=18, то можно зум рендерится с 8 до 18 уровней.

P.P.P.S. Оказалось, что 1 пункт (т.е. локальная подгрузка стороннего источника карт) все-таки необходим, если вы хотите видоизменять карту, применяя так называемые Правила (Rules). Встроенная карта на эти изменения не реагирует. В частности, я пытался сделать так, чтобы названия иностранных населенных пунктов (ну например турецких) отображались на русском или английском, но не на турецком. Или чтобы аэропорты были подписаны. Так вот это удалось сделать только подгрузив карты из локального источника.

Как использовать Leaflet оффлайн?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт