Maintain rendering order in the LRU cache

src/ol/renderer/layer.js

@@ -256,7 +256,7 @@ ol.renderer.Layer.prototype.manageTilePyramid = function(
   var tileQueue = frameState.tileQueue;
   var minZoom = tileGrid.getMinZoom();
   var tile, tileRange, tileResolution, x, y, z;
-  for (z = currentZ; z >= minZoom; --z) {
+  for (z = minZoom; z <= currentZ; ++z) {
     tileRange = tileGrid.getTileRangeForExtentAndZ(extent, z, tileRange);
     tileResolution = tileGrid.getResolution(z);
     for (x = tileRange.minX; x <= tileRange.maxX; ++x) {

test/spec/ol/renderer/layer.test.js

@@ -1,8 +1,11 @@
-
-
 goog.require('ol.Image');
+goog.require('ol.Map');
+goog.require('ol.View');
 goog.require('ol.layer.Layer');
+goog.require('ol.layer.Tile');
 goog.require('ol.renderer.Layer');
+goog.require('ol.source.XYZ');
+goog.require('ol.tilecoord');
 
 
 describe('ol.renderer.Layer', function() {
@@ -82,4 +85,63 @@ describe('ol.renderer.Layer', function() {
     });
 
   });
+
+  describe('manageTilePyramid behavior', function() {
+    var target, map, view, source;
+
+    beforeEach(function(done) {
+      target = document.createElement('div');
+      Object.assign(target.style, {
+        position: 'absolute',
+        left: '-1000px',
+        top: '-1000px',
+        width: '360px',
+        height: '180px'
+      });
+      document.body.appendChild(target);
+
+      view = new ol.View({
+        center: [0, 0],
+        zoom: 0
+      });
+
+      source = new ol.source.XYZ({
+        url: '#{x}/{y}/{z}'
+      });
+
+      map = new ol.Map({
+        target: target,
+        view: view,
+        layers: [
+          new ol.layer.Tile({
+            source: source
+          })
+        ]
+      });
+      map.once('postrender', function() {
+        done();
+      });
+    });
+
+    afterEach(function() {
+      map.dispose();
+      document.body.removeChild(target);
+    });
+
+    it('accesses tiles from current zoom level last', function(done) {
+      // expect most recent tile in the cache to be from zoom level 0
+      var key = source.tileCache.peekFirstKey();
+      var tileCoord = ol.tilecoord.fromKey(key);
+      expect(tileCoord[0]).to.be(0);
+
+      map.once('moveend', function() {
+        // expect most recent tile in the cache to be from zoom level 4
+        var key = source.tileCache.peekFirstKey();
+        var tileCoord = ol.tilecoord.fromKey(key);
+        expect(tileCoord[0]).to.be(4);
+        done();
+      });
+      view.setZoom(4);
+    });
+  });
 });