Как сохранить старые плитки до тех пор, пока каждая новая плитка не будет загружена при перерисовке слоя в Leaflet?

Я использую комбинированный тайлер, который я должен обновить (используя .redraw() в настоящее время) каждый раз, когда добавляется новый слой или удаляется старый. У меня нет технических проблем с моей реализацией, но когда слой переключается, возникает короткое мерцание, поскольку старые плитки мгновенно удаляются, но новые, очевидно, занимают несколько минут для загрузки.

Есть ли способ сохранить каждую из этих старых плиток, пока их замена не будет загружена, что приведет к более плавному переходу?

Я рассмотрел использование временного слоя и загрузку новых плиток поверх старых, но это потребовало бы много дополнительной работы и загрузки, поэтому я надеюсь, что в листовку встроено что-то более элегантное, например опция delayRemoval или что-то в этом роде.


Вот jsfiddle: http://jsfiddle.net/Q6586/

Если вы щелкнете по карте, она сама перерисовается, мгновенно удаляя старые плитки, и карта будет быстро мигать серым цветом до загрузки новых.

Я хочу избавиться от этой вспышки. Я временно решил эту проблему, создав новый слой поверх старого, но я чувствую, что это очень нелегкое решение.

1 ответ

Решение

Вы можете создать еще один слой, который вы будете выводить на передний план во время перерисовки.

Событие load покажет вам, когда все плитки загружены

map.on('click', function(e) {
    layer2.bringToFront();
    layer.on('load', function(e) {
        console.log('loaded');
        layer.bringToFront();
    });
    layer.redraw();
});

Посмотрите на это JSFiddle: http://jsfiddle.net/FranceImage/5452r/

Я называю разные плитки, чтобы вы могли видеть. Очевидно, вы будете использовать один и тот же шаблон для обоих слоев листов.

Другие вопросы по тегам