Merge pull request #3014 from Leaflet/tile-loading

More tile loading fixes
This commit is contained in:
Vladimir Agafonkin 2014-11-12 00:46:14 +02:00
commit d9a327007b
2 changed files with 86 additions and 26 deletions

View File

@ -68,6 +68,70 @@ describe('GridLayer', function () {
});
});
describe('tile pyramid', function () {
var clock;
beforeEach(function () {
clock = sinon.useFakeTimers();
});
afterEach(function () {
clock.restore();
});
it('removes tiles for unused zoom levels', function (done) {
map.remove();
map = L.map(div, {fadeAnimation: false});
map.setView([0, 0], 1);
var grid = L.gridLayer();
var tiles = {};
grid.createTile = function (coords) {
tiles[grid._tileCoordsToKey(coords)] = true;
return document.createElement('div');
};
grid.on('tileunload', function (e) {
delete tiles[grid._tileCoordsToKey(e.coords)];
if (Object.keys(tiles).length === 1) {
expect(Object.keys(tiles)).to.eql(['0:0:0']);
done();
}
});
map.addLayer(grid);
map.setZoom(0, {animate: false});
clock.tick(250);
});
it('prunes and retains the correct tiles for back-to-back zooms', function () {
map.setView([0, 0], 1);
var grid = L.gridLayer();
var tiles = {};
grid.createTile = function (coords) {
tiles[grid._tileCoordsToKey(coords)] = true;
return document.createElement('div');
};
map.addLayer(grid);
clock.tick(500);
map.setZoom(0, {animate: false});
clock.tick(250);
map.setZoom(1, {animate: false});
clock.tick(500);
var tileContainers = div.querySelectorAll('.leaflet-tile-container');
expect(tileContainers.length).to.eql(2);
expect(tileContainers[0].childNodes.length).to.equal(8);
expect(tileContainers[1].childNodes.length).to.equal(0);
});
});
describe("#onAdd", function () {
it('is called after viewreset on first map load', function () {
var layer = L.gridLayer().addTo(map);

View File

@ -29,11 +29,6 @@ L.GridLayer = L.Layer.extend({
onAdd: function () {
this._initContainer();
if (!this.options.updateWhenIdle) {
// update tiles on move, but not more often than once per given interval
this._update = L.Util.throttle(this._update, this.options.updateInterval, this);
}
this._pruneTiles = L.Util.throttle(this._pruneTiles, 200, this);
this._levels = {};
@ -113,7 +108,8 @@ L.GridLayer = L.Layer.extend({
};
if (!this.options.updateWhenIdle) {
events.move = this._update;
// update tiles on move, but not more often than once per given interval
events.move = L.Util.throttle(this._update, this.options.updateInterval, this);
}
if (this._zoomAnimated) {
@ -234,8 +230,10 @@ L.GridLayer = L.Layer.extend({
if (!this._loaded[key]) {
this._removeTile(key);
this._tilesToLoad--;
} else {
} else if (this._map._fadeAnimated) {
setTimeout(L.bind(this._deferRemove, this, key), 250);
} else {
this._removeTile(key);
}
}
}
@ -385,11 +383,8 @@ L.GridLayer = L.Layer.extend({
coords = new L.Point(i, j);
coords.z = this._tileZoom;
var key = this._tileCoordsToKey(coords);
this._retain[key] = true;
// add tile to queue if it's not in cache or out of bounds
if (!(key in this._tiles) && this._isValidTile(coords)) {
if (!(this._tileCoordsToKey(coords) in this._tiles) && this._isValidTile(coords)) {
queue.push(coords);
}
}
@ -402,24 +397,25 @@ L.GridLayer = L.Layer.extend({
var tilesToLoad = queue.length;
if (tilesToLoad === 0) { return; }
// if its the first batch of tiles to load
if (!this._tilesToLoad) {
this.fire('loading');
if (tilesToLoad !== 0) {
// if its the first batch of tiles to load
if (!this._tilesToLoad) {
this.fire('loading');
}
this._tilesToLoad += tilesToLoad;
// create DOM fragment to append tiles in one batch
var fragment = document.createDocumentFragment();
for (i = 0; i < tilesToLoad; i++) {
this._addTile(queue[i], fragment);
}
this._level.el.appendChild(fragment);
}
this._tilesToLoad += tilesToLoad;
// create DOM fragment to append tiles in one batch
var fragment = document.createDocumentFragment();
for (i = 0; i < tilesToLoad; i++) {
this._addTile(queue[i], fragment);
}
this._level.el.appendChild(fragment);
this._pruneTiles();
},