Merge pull request #962 from ahocevar/tilequeue-throttling

Bring back throttling for tile loading. r=@bartvde

examples/fullScreen.js

@@ -1,20 +1,9 @@
-var urls = [
-    "http://a.tile.openstreetmap.org/${z}/${x}/${y}.png",
-    "http://b.tile.openstreetmap.org/${z}/${x}/${y}.png",
-    "http://c.tile.openstreetmap.org/${z}/${x}/${y}.png"
-];
-
 var map = new OpenLayers.Map({
     div: "map",
+    tileManager: new OpenLayers.TileManager(),
     layers: [
-        new OpenLayers.Layer.XYZ("OSM (with buffer)", urls, {
-            transitionEffect: "resize", buffer: 2, sphericalMercator: true,
-            attribution: "Data CC-By-SA by <a href='http://openstreetmap.org/'>OpenStreetMap</a>"
-        }),
-        new OpenLayers.Layer.XYZ("OSM (without buffer)", urls, {
-            transitionEffect: "resize", buffer: 0, sphericalMercator: true,
-            attribution: "Data CC-By-SA by <a href='http://openstreetmap.org/'>OpenStreetMap</a>"
-        })
+        new OpenLayers.Layer.OSM("OSM (without buffer)"),
+        new OpenLayers.Layer.OSM("OSM (with buffer)", null, {buffer: 2})
     ],
     controls: [
         new OpenLayers.Control.Navigation({

lib/OpenLayers/TileManager.js

@@ -33,6 +33,20 @@ OpenLayers.TileManager = OpenLayers.Class({
      */
     cacheSize: 256,
 
+    /**
+     * APIProperty: tilesPerFrame
+     * {Number} Number of queued tiles to load per frame (see <frameDelay>).
+     *     Default is 2.
+     */
+    tilesPerFrame: 2,
+
+    /**
+     * APIProperty: frameDelay
+     * {Number} Delay between tile loading frames (see <tilesPerFrame>) in
+     *     milliseconds. Default is 16.
+     */
+    frameDelay: 16,
+
     /**
      * APIProperty: moveDelay
      * {Number} Delay in milliseconds after a map's move event before loading
@@ -251,7 +265,9 @@ OpenLayers.TileManager = OpenLayers.Class({
     
     /**
      * Method: updateTimeout
-     * Applies the <moveDelay> or <zoomDelay> to the <drawTilesFromQueue> loop.
+     * Applies the <moveDelay> or <zoomDelay> to the <drawTilesFromQueue> loop,
+     * and schedules more queue processing after <frameDelay> if there are still
+     * tiles in the queue.
      *
      * Parameters:
      * map - {<OpenLayers.Map>} The map to update the timeout for
@@ -259,10 +275,14 @@ OpenLayers.TileManager = OpenLayers.Class({
      */
     updateTimeout: function(map, delay) {
         window.clearTimeout(this.tileQueueId[map.id]);
-        if (this.tileQueue[map.id].length) {
+        var tileQueue = this.tileQueue[map.id];
+        if (tileQueue.length) {
             this.tileQueueId[map.id] = window.setTimeout(
                 OpenLayers.Function.bind(function() {
                     this.drawTilesFromQueue(map);
+                    if (tileQueue.length) {
+                        this.updateTimeout(map, this.frameDelay);
+                    }
                 }, this), delay
             );
         }
@@ -341,8 +361,11 @@ OpenLayers.TileManager = OpenLayers.Class({
      */
     drawTilesFromQueue: function(map) {
         var tileQueue = this.tileQueue[map.id];
-        while (tileQueue.length) {
+        var limit = this.tilesPerFrame;
+        var animating = map.zoomTween && map.zoomTween.playing;
+        while (!animating && tileQueue.length && limit) {
             tileQueue.shift().draw(true);
+            --limit;
         }
     },