Merge pull request #263 from twpayne/canvas-renderer-optimizations

Canvas renderer optimizations

examples/canvas-tiles.html

@@ -21,10 +21,12 @@
       <tr>
         <th>DOM</th>
         <th>WebGL</th>
+        <th>Canvas</th>
       </tr>
       <tr>
         <td><div id="domMap" class="map"></div></td>
         <td><div id="webglMap" class="map"></div></td>
+        <td><div id="canvasMap" class="map"></div></td>
       </tr>
     </table>
     <div id="docs">

examples/canvas-tiles.js

@@ -41,3 +41,10 @@ var domMap = new ol.Map({
 });
 domMap.bindTo('layers', webglMap);
 domMap.bindTo('view', webglMap);
+
+var canvasMap = new ol.Map({
+  renderer: ol.RendererHint.DOM,
+  target: 'canvasMap'
+});
+canvasMap.bindTo('layers', webglMap);
+canvasMap.bindTo('view', webglMap);

src/objectliterals.exports

@@ -133,6 +133,7 @@
 @exportObjectLiteralProperty ol.source.TiledWMSOptions.crossOrigin null|string|undefined
 @exportObjectLiteralProperty ol.source.TiledWMSOptions.extent ol.Extent|undefined
 @exportObjectLiteralProperty ol.source.TiledWMSOptions.tileGrid ol.tilegrid.TileGrid|undefined
+@exportObjectLiteralProperty ol.source.TiledWMSOptions.transparent boolean|undefined
 @exportObjectLiteralProperty ol.source.TiledWMSOptions.maxZoom number|undefined
 @exportObjectLiteralProperty ol.source.TiledWMSOptions.projection ol.Projection|undefined
 @exportObjectLiteralProperty ol.source.TiledWMSOptions.url string|undefined

src/ol/renderer/canvas/canvastilelayerrenderer.js

@@ -1,4 +1,3 @@
-// FIXME don't redraw tiles if not needed
 // FIXME find correct globalCompositeOperation
 // FIXME optimize :-)
 
@@ -51,6 +50,12 @@ ol.renderer.canvas.TileLayer = function(mapRenderer, tileLayer) {
    */
   this.transform_ = goog.vec.Mat4.createNumber();
 
+  /**
+   * @private
+   * @type {Array.<ol.Tile|undefined>}
+   */
+  this.renderedTiles_ = null;
+
 };
 goog.inherits(ol.renderer.canvas.TileLayer, ol.renderer.canvas.Layer);
 
@@ -96,10 +101,11 @@ ol.renderer.canvas.TileLayer.prototype.renderFrame =
   var tileResolution = tileGrid.getResolution(z);
   var tileRange = tileGrid.getTileRangeForExtentAndResolution(
       frameState.extent, tileResolution);
+  var tileRangeWidth = tileRange.getWidth();
+  var tileRangeHeight = tileRange.getHeight();
 
   var canvasSize = new ol.Size(
-      tileSize.width * tileRange.getWidth(),
+      tileSize.width * tileRangeWidth, tileSize.height * tileRangeHeight);
-      tileSize.height * tileRange.getHeight());
 
   var canvas, context;
   if (goog.isNull(this.canvas_)) {
@@ -111,6 +117,7 @@ ol.renderer.canvas.TileLayer.prototype.renderFrame =
     this.canvas_ = canvas;
     this.canvasSize_ = canvasSize;
     this.context_ = context;
+    this.renderedTiles_ = new Array(tileRangeWidth * tileRangeHeight);
   } else {
     canvas = this.canvas_;
     context = this.context_;
@@ -118,11 +125,10 @@ ol.renderer.canvas.TileLayer.prototype.renderFrame =
       canvas.width = canvasSize.width;
       canvas.height = canvasSize.height;
       this.canvasSize_ = canvasSize;
+      this.renderedTiles_ = new Array(tileRangeWidth * tileRangeHeight);
     }
   }
 
-  context.clearRect(0, 0, canvasSize.width, canvasSize.height);
-
   /**
    * @type {Object.<number, Object.<string, ol.Tile>>}
    */
@@ -169,9 +175,12 @@ ol.renderer.canvas.TileLayer.prototype.renderFrame =
   /** @type {Array.<number>} */
   var zs = goog.array.map(goog.object.getKeys(tilesToDrawByZ), Number);
   goog.array.sort(zs);
+  var opaque = tileSource.getOpaque();
   var origin = tileGrid.getTileCoordExtent(
       new ol.TileCoord(z, tileRange.minX, tileRange.maxY)).getTopLeft();
-  var currentZ, i, scale, tileCoordKey, tileExtent, tilesToDraw;
+  var currentZ, i, index, scale, tileCoordKey, tileExtent, tilesToDraw;
+  var ix, iy, interimTileExtent, interimTileRange, maxX, maxY, minX, minY;
+  var height, width;
   for (i = 0; i < zs.length; ++i) {
     currentZ = zs[i];
     tileSize = tileGrid.getTileSize(currentZ);
@@ -179,22 +188,44 @@ ol.renderer.canvas.TileLayer.prototype.renderFrame =
     if (currentZ == z) {
       for (tileCoordKey in tilesToDraw) {
         tile = tilesToDraw[tileCoordKey];
-        context.drawImage(
+        tileCoord = tile.tileCoord;
-            tile.getImage(),
+        index = (tileCoord.y - tileRange.minY) * tileRangeWidth +
-            tileSize.width * (tile.tileCoord.x - tileRange.minX),
+                (tileCoord.x - tileRange.minX);
-            tileSize.height * (tileRange.maxY - tile.tileCoord.y));
+        if (this.renderedTiles_[index] != tile) {
+          x = tileSize.width * (tile.tileCoord.x - tileRange.minX);
+          y = tileSize.height * (tileRange.maxY - tile.tileCoord.y);
+          if (!opaque) {
+            context.clearRect(x, y, tileSize.width, tileSize.height);
+          }
+          context.drawImage(tile.getImage(), x, y);
+          this.renderedTiles_[index] = tile;
+        }
       }
     } else {
       scale = tileGrid.getResolution(currentZ) / tileResolution;
       for (tileCoordKey in tilesToDraw) {
         tile = tilesToDraw[tileCoordKey];
         tileExtent = tileGrid.getTileCoordExtent(tile.tileCoord);
-        context.drawImage(
+        x = (tileExtent.minX - origin.x) / tileResolution;
-            tile.getImage(),
+        y = (origin.y - tileExtent.maxY) / tileResolution;
-            (tileExtent.minX - origin.x) / tileResolution,
+        width = scale * tileSize.width;
-            (origin.y - tileExtent.maxY) / tileResolution,
+        height = scale * tileSize.height;
-            scale * tileSize.width,
+        if (!opaque) {
-            scale * tileSize.height);
+          context.clearRect(x, y, width, height);
+        }
+        context.drawImage(tile.getImage(), x, y, width, height);
+        interimTileRange =
+            tileGrid.getTileRangeForExtentAndZ(tileExtent, z);
+        minX = Math.max(interimTileRange.minX, tileRange.minX);
+        maxX = Math.min(interimTileRange.maxX, tileRange.maxX);
+        minY = Math.max(interimTileRange.minY, tileRange.minY);
+        maxY = Math.min(interimTileRange.maxY, tileRange.maxY);
+        for (ix = minX; ix <= maxX; ++ix) {
+          for (iy = minY; iy <= maxY; ++iy) {
+            this.renderedTiles_[(iy - tileRange.minY) * tileRangeWidth +
+                                (ix - tileRange.minX)] = undefined;
+          }
+        }
       }
     }
   }

src/ol/source/bingmapssource.js

@@ -23,6 +23,7 @@ goog.require('ol.tilegrid.XYZ');
 ol.source.BingMaps = function(bingMapsOptions) {
 
   goog.base(this, {
+    opaque: true,
     projection: ol.projection.getFromCode('EPSG:3857')
   });
 

src/ol/source/debugtilesource.js

@@ -90,6 +90,7 @@ ol.source.DebugTileSource = function(options) {
 
   goog.base(this, {
     extent: options.extent,
+    opaque: false,
     projection: options.projection,
     tileGrid: options.tileGrid
   });

src/ol/source/imagetilesource.js

@@ -18,6 +18,7 @@ goog.require('ol.tilegrid.TileGrid');
  * @typedef {{attributions: (Array.<ol.Attribution>|undefined),
  *            crossOrigin: (null|string|undefined),
  *            extent: (ol.Extent|undefined),
+ *            opaque: (boolean|undefined),
  *            projection: (ol.Projection|undefined),
  *            tileGrid: (ol.tilegrid.TileGrid|undefined),
  *            tileUrlFunction: (ol.TileUrlFunctionType|undefined)}}
@@ -36,6 +37,7 @@ ol.source.ImageTileSource = function(options) {
   goog.base(this, {
     attributions: options.attributions,
     extent: options.extent,
+    opaque: options.opaque,
     projection: options.projection,
     tileGrid: options.tileGrid
   });

src/ol/source/mapquestsource.js

@@ -26,6 +26,7 @@ ol.source.MapQuestOSM = function() {
 
   goog.base(this, {
     attributions: attributions,
+    opaque: true,
     maxZoom: 28,
     url: 'http://otile{1-4}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.jpg'
   });
@@ -54,6 +55,7 @@ ol.source.MapQuestOpenAerial = function() {
   goog.base(this, {
     attributions: attributions,
     maxZoom: 18,
+    opaque: true,
     url: 'http://oatile{1-4}.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.jpg'
   });
 

src/ol/source/openstreetmapsource.js

@@ -18,6 +18,7 @@ ol.source.OpenStreetMap = function() {
 
   goog.base(this, {
     attributions: [attribution],
+    opaque: true,
     maxZoom: 18,
     url: 'http://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
   });

src/ol/source/stamensource.js

@@ -85,6 +85,7 @@ ol.source.Stamen = function(stamenOptions) {
   goog.base(this, {
     attributions: [attribution],
     maxZoom: config.maxZoom,
+    opaque: false,
     url: 'http://{a-d}.tile.stamen.com/' + layer + '/{z}/{x}/{y}.' + config.type
   });
 

src/ol/source/tiledwmssource.js

@@ -27,6 +27,9 @@ ol.source.TiledWMS = function(tiledWMSOptions) {
   var extent = goog.isDef(tiledWMSOptions.extent) ?
       tiledWMSOptions.extent : projectionExtent;
 
+  var transparent = goog.isDef(tiledWMSOptions.transparent) ?
+      tiledWMSOptions.transparent : true;
+
   var version = goog.isDef(tiledWMSOptions.version) ?
       tiledWMSOptions.version : '1.3';
 
@@ -44,7 +47,7 @@ ol.source.TiledWMS = function(tiledWMSOptions) {
     'REQUEST': 'GetMap',
     'STYLES': '',
     'FORMAT': 'image/png',
-    'TRANSPARENT': true
+    'TRANSPARENT': transparent
   };
   baseParams[version >= '1.3' ? 'CRS' : 'SRS'] = projection.getCode();
   goog.object.extend(baseParams, tiledWMSOptions.params);
@@ -97,6 +100,7 @@ ol.source.TiledWMS = function(tiledWMSOptions) {
     crossOrigin: tiledWMSOptions.crossOrigin,
     extent: extent,
     tileGrid: tileGrid,
+    opaque: !transparent,
     projection: projection,
     tileUrlFunction: ol.TileUrlFunction.withTileCoordTransform(
         tileCoordTransform, tileUrlFunction)

src/ol/source/tilesource.js

@@ -15,6 +15,7 @@ goog.require('ol.tilegrid.TileGrid');
 /**
  * @typedef {{attributions: (Array.<ol.Attribution>|undefined),
  *            extent: (ol.Extent|undefined),
+ *            opaque: (boolean|undefined),
  *            projection: (ol.Projection|undefined),
  *            tileGrid: (ol.tilegrid.TileGrid|undefined)}}
  */
@@ -35,6 +36,13 @@ ol.source.TileSource = function(tileSourceOptions) {
     projection: tileSourceOptions.projection
   });
 
+  /**
+   * @private
+   * @type {boolean}
+   */
+  this.opaque_ = goog.isDef(tileSourceOptions.opaque) ?
+      tileSourceOptions.opaque : false;
+
   /**
    * @protected
    * @type {ol.tilegrid.TileGrid}
@@ -98,6 +106,14 @@ ol.source.TileSource.prototype.findLoadedTiles = function(loadedTilesByZ,
 };
 
 
+/**
+ * @return {boolean} Opaque.
+ */
+ol.source.TileSource.prototype.getOpaque = function() {
+  return this.opaque_;
+};
+
+
 /**
  * @inheritDoc
  */