在Leaflet中重新绘制图层时，如何保持旧的瓷砖直到加载每个新的瓷砖? [英] How to keep old tiles until each new tile is loaded when redrawing a layer in Leaflet?

问题描述

我正在使用组合的图块层，每次添加新层或删除旧层时，都必须刷新(当前使用.redraw()).我的实现没有技术问题，但是切换图层时会出现短暂的闪烁，因为立即删除了旧的图块，但是新的图块显然需要花费一些时间来加载.

I'm using a combined tilelayer, which I have to refresh (using .redraw() currently) each time a new layer has been added or an old has been removed. There are no technical problems with my implementation, but when a layer is toggled, there is a brief flicker as the old tiles are instantly removed, but the new ones obviously take a few moments to load in.

是否有任何方法可以保留这些旧瓦片中的每一个，直到替换完成，从而使过渡更加平滑?

Is there any way to keep each of these old tiles until its replacement has been loaded, resulting in a smoother transition?

我已经考虑过使用临时层，并将新的图块加载到旧的图块之上，但这会导致很多额外的工作和加载，所以我希望小叶内置一些更精美的东西，例如delayRemoval选项之类的.

I have considered using a temporary layer, and loading the new tiles above the old ones, but this would cause a lot of extra work and loading, so I'm hoping leaflet has something more elegant built in, like a delayRemoval option or something.

这是一个jsfiddle: http://jsfiddle.net/Q6586/

Here's a jsfiddle: http://jsfiddle.net/Q6586/

如果单击该地图，它将重新绘制自身，立即删除旧的图块，并且在加载新图块之前，该图将短暂闪烁灰色.

If you click the map, it will redraw itself, instantly removing the old tiles, and the map will briefly flash gray before the new ones are loaded.

我想摆脱那一刹那.我已经通过在旧层之上创建一个新层来临时解决了这一问题，但是我觉得这是一个非常简单的解决方案.

I want to get rid of that flash. I have temporarily solved this by creating a new layer on top of the old one, but I feel that's a very unelegant solution.

推荐答案

您可以创建另一个图层，以便在重绘时显示在前面.

You could create another layer that you would bring to front while you are redrawing.

'load'事件将告诉您何时所有图块都已加载

The event 'load' will tell you when all tiles are loaded

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/

Have look at this JSFiddle: http://jsfiddle.net/FranceImage/5452r/

我给不同的瓷砖打电话，以便您看到.显然，您将对两个图块层使用相同的模板.

I call different tiles so that you can see. Obviously, you will use the same template for both tile layers.

这篇关于在Leaflet中重新绘制图层时，如何保持旧的瓷砖直到加载每个新的瓷砖?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！