Блог

Главная - Вопросы по программированию - Показать плитки с другого уровня масштабирования в листовке

Показать плитки с другого уровня масштабирования в листовке

#leaflet

#листовка

Вопрос:

Я пытаюсь создавать автономные карты с помощью листовки.

Для сохранения данных у пользователя есть возможность не сохранять все уровни масштабирования. Например, у пользователя есть уровни масштабирования: — 15 и 17.

Теперь проблема в том, что когда пользователь увеличивает масштаб с уровня 15 до 16.

Как мне отобразить слои 15 (или 17) уровня при масштабировании с 16?

Альтернативой является пропуск уровня масштабирования 16, но, может быть, есть другой вариант? Я просмотрел исходный код из листовки, но не могу понять.

JSFIDDLE

Обновите скрипку с помощью плагина, который пропускает уровень масштабирования (автор Илья Зверев)

HTML

 <div id="map"></div>
<div id="out"></div>

JAVASCIPT

 var map = L.map('map').setView([52.084, 5.11], 15);
isNoZoomlevel = 16;

L.tileLayer('http://a.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'amp;copy; <a href="http://openstreetmap.org">OpenStreetMap</a>',
    maxZoom: 18
}).addTo(map);


map.on('zoomend', function() {
    console.log("I zoomed to level "   map.getZoom());    
    if(map.getZoom() == isNoZoomlevel) {
        console.log("This offline zoomlevel does not excist");
        $("#out").html("This is no zoomlevel");
         // Howto replace the zoomlevel 16 with 17 or 15??   
    } else {
        $("#out").html("");
    }
});

CSS

 #map {
    height: 250px;
}

Ответ №1:

Специально для вас я только что создал плагин LimitZoom: просто укажите уровни масштабирования в zooms: [15, 17, ...] настройках L.Map .

Комментарии:

1. Да, это так. Спасибо за хороший плагин. Единственная проблема заключается в том, что он не показывает плитки с 15-го уровня на 16-м уровне масштабирования. Он просто пропускает уровень масштабирования 16. Поэтому, когда у вас всего 3 уровня масштабирования, он масштабируется экстремально… Я собираюсь научиться писать плагин. Может быть, я смогу внести свой вклад в ваш github..

2. Я хочу сделать это примерно так: jsfiddle.net/zoutepopcorn/7a3xe/17

3. Вам повезло, потому что я в настроении экспериментировать 🙂 См. Листовку. Плагин ContinuousZoom здесь . Есть ссылка на демонстрацию.

4. Потрясающе!!! Поэтому я должен попробовать это с автономными плитками в моем мобильном приложении. Я думаю, что это сработает, и я могу принять ответ. Большое спасибо.

Ответ №2:

Основываясь на вашем примере, это работает для меня

 var prevZoom = 15;
map.on('zoomend', function() {

    if(map.getZoom() == isNoZoomlevel) {

        if(map.getZoom() > prevZoom) {
            map.setZoom(map.getZoom()   1); // force zoomIn
        }
        if(map.getZoom() < prevZoom) {
            map.setZoom(map.getZoom() - 1); // force zoomOut
        }
    } 
    prevZoom = map.getZoom();
});
Метки: