Как работать с тайлами Openstreetmap?

Использую карту от Openstreetmap, но мне нужен только определенная область(т.е. город). Слышал про тайлы но не знаю как этим работать. Может кто уже сталкивался и поможет с ссылками на примеры. Для работы с картой пользуюсь Leaflet.js
  • Вопрос задан
  • 4681 просмотр
Решения вопроса 1
@Astafiev_Andrey Автор вопроса
Сам спросил сам и нашел ответ

1) Создаеш директорию где будут хранится файлы тайлов (дожно быть 3 директории основная/зум/i/j.png файл)
2) Добавляеш новую конфигурацию nginx для тайл сервера
3) по адресу (http://адрес сервера/зум/i-тайл/j-тайл.png) должен быть доступен тайл

например : gps-location.ru:88/14/10596/5217.png

4) В leflet делаеш

map = new L.Map('map');
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib='Map data © OpenStreetMap contributors';
var osm = new L.TileLayer(osmUrl, {minZoom: 8, maxZoom: 12, attribution: osmAttrib});
map.setView(new L.LatLng(51.3, 0.7),9);
map.addLayer(osm);

Можно выкачать все тайлы города и сделать ограничение по городу и зуму,
выкачивать нужно для каждого зума и создавать отдельные директории для каждого зума

для apache
виртуальный хост с самой обычной конфигурацией

var map = L.map('map',{ minZoom: 12, maxZoom: 17, zoomControl: false }).setView([54.5365,52.8175], 12);
ограничения по зуму и локации
https://yadi.sk/d/VhrvkJydWxjfr
скрипт для выкачивания тайлов
L.tileLayer('http://192.168.0.107:8080/pars/tiles/{z}/{x}/{y}.png', {
attribution: 'These bicycles are for other drivers ©',
noWrap: true
}).addTo(map);
можно даже без виртуального хоста
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
k12th
@k12th
console.log(`You're pulling my leg, right?`);
Можно просто (независимо от библиотеки для карт и тайлов) просто отслеживать координаты центра отображаемой области и сдвигать карту в нужные границы при необходимости. Если сдвиг делать анимированно, то раздражать пользователя не будет.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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