Toward tiled vector rendering

src/ol/renderer/canvas/canvasvectorlayerrenderer.js

@@ -19,41 +19,45 @@ ol.renderer.canvas.VectorLayer = function(mapRenderer, layer) {
   goog.base(this, mapRenderer, layer);
 
   /**
+   * Final canvas made available to the map renderer.
    * @private
    * @type {HTMLCanvasElement}
    */
-  this.canvas_ = null;
+  this.canvas_ = /** @type {HTMLCanvasElement} */
-
+      (goog.dom.createElement(goog.dom.TagName.CANVAS));
-  /**
-   * @private
-   * @type {ol.Size}
-   */
-  this.canvasSize_ = null;
 
   /**
    * @private
    * @type {CanvasRenderingContext2D}
    */
-  this.context_ = null;
+  this.context_ =  /** @type {CanvasRenderingContext2D} */
-
+      this.canvas_.getContext('2d');
-  /**
-   * @private
-   * @type {HTMLCanvasElement}
-   */
-  this.sketchCanvas_ = null;
-
-  /**
-   * @private
-   * @type {Object.<string, HTMLCanvasElement>}
-   */
-  this.tileCache_ = {};
 
   /**
    * @private
    * @type {!goog.vec.Mat4.Number}
    */
   this.transform_ = goog.vec.Mat4.createNumber();
-  goog.vec.Mat4.makeIdentity(this.transform_);
+
+  /**
+   * Interim canvas for drawing newly visible features.
+   * @private
+   * @type {HTMLCanvasElement}
+   */
+  this.sketchCanvas_ = /** @type {HTMLCanvasElement} */
+      (goog.dom.createElement(goog.dom.TagName.CANVAS));
+
+  /**
+   * @private
+   * @type {!goog.vec.Mat4.Number}
+   */
+  this.sketchTransform_ = goog.vec.Mat4.createNumber();
+
+  /**
+   * @private
+   * @type {Object.<string, HTMLCanvasElement>}
+   */
+  this.tileCache_ = {};
 
   /**
    * Geometry filters in rendering order.
@@ -67,6 +71,50 @@ ol.renderer.canvas.VectorLayer = function(mapRenderer, layer) {
     new ol.filter.Geometry(ol.geom.GeometryType.POINT)
   ];
 
+  /**
+   * @private
+   * @type {number}
+   */
+  this.renderedResolution_;
+
+  /**
+   * @private
+   * @type {ol.Extent}
+   */
+  this.renderedExtent_;
+
+  /**
+   * @private
+   * @type {boolean}
+   */
+  this.layerChanged_ = false;
+
+
+  // TODO: implement layer.setStyle(style) where style is a set of rules
+  // and a rule has a filter and array of symbolizers
+  var symbolizers = {};
+  symbolizers[ol.geom.GeometryType.POINT] = new ol.style.LiteralShape({
+    type: ol.style.ShapeType.CIRCLE,
+    size: 10,
+    fillStyle: '#ffcc99',
+    strokeStyle: '#ff9933',
+    strokeWidth: 2,
+    opacity: 0.75
+  });
+  symbolizers[ol.geom.GeometryType.LINESTRING] = new ol.style.LiteralLine({
+    strokeStyle: '#ff9933',
+    strokeWidth: 2,
+    opacity: 1
+  });
+  symbolizers[ol.geom.GeometryType.POLYGON] = new ol.style.LiteralPolygon({
+    fillStyle: '#ffcc99',
+    strokeStyle: '#ff9933',
+    strokeWidth: 2,
+    opacity: 0.5
+  });
+  // TODO: remove this
+  this.symbolizers_ = symbolizers;
+
 };
 goog.inherits(ol.renderer.canvas.VectorLayer, ol.renderer.canvas.Layer);
 
@@ -101,80 +149,77 @@ ol.renderer.canvas.VectorLayer.prototype.getTransform = function() {
 ol.renderer.canvas.VectorLayer.prototype.renderFrame =
     function(frameState, layerState) {
 
+  var view2DState = frameState.view2DState,
+      resolution = view2DState.resolution,
+      extent = frameState.extent;
+
   var layer = this.getVectorLayer();
   var source = layer.getVectorSource();
-  var extent = frameState.extent;
-  var view2DState = frameState.view2DState;
   var tileGrid = source.getTileGrid();
 
   if (goog.isNull(tileGrid)) {
     // lazy tile source creation to match the view projection
     tileGrid = ol.tilegrid.createForProjection(
-        view2DState.projection, 22);
+        view2DState.projection, /** TODO: get this elsewhere */ 22);
     source.setTileGrid(tileGrid);
   }
 
   var tileSize = tileGrid.getTileSize();
-  var z = tileGrid.getZForResolution(view2DState.resolution);
+  var z = tileGrid.getZForResolution(resolution);
   var tileResolution = tileGrid.getResolution(z);
   var tileRange = tileGrid.getTileRangeForExtentAndResolution(
-      frameState.extent, tileResolution);
+      extent, tileResolution);
+  var tileExtent = tileGrid.getTileRangeExtent(z, tileRange);
 
-  var canvasSize = new ol.Size(
+  // bail out if nothing to do
+  // TODO: try to make it less work to determine that nothing changed
+  if (!this.layerChanged_ && this.renderedResolution_ == tileResolution &&
+      // TODO: extent.equals(other)
+      this.renderedExtent_.toString() == tileExtent.toString()) {
+    return;
+  }
+
+  // clear tiles at alt-z
+  if (this.renderedResolution_ != tileResolution) {
+    this.tileCache_ = {};
+  }
+
+  /**
+   * Prepare the sketch canvas.  This covers the currently visible tile range
+   * and will have rendered all newly visible features.
+   */
+  var sketchCanvas = this.sketchCanvas_;
+  var sketchSize = new ol.Size(
       tileSize.width * tileRange.getWidth(),
       tileSize.height * tileRange.getHeight());
 
-  var canvas, context;
+  sketchCanvas.width = sketchSize.width;
-  if (goog.isNull(this.canvas_)) {
+  sketchCanvas.height = sketchSize.height;
-    canvas = /** @type {HTMLCanvasElement} */
-        (goog.dom.createElement(goog.dom.TagName.CANVAS));
-    canvas.width = canvasSize.width;
-    canvas.height = canvasSize.height;
-    context = /** @type {CanvasRenderingContext2D} */ (canvas.getContext('2d'));
-    this.canvas_ = canvas;
-    this.canvasSize_ = canvasSize;
-    this.context_ = context;
-    this.sketchCanvas_ = /** @type {HTMLCanvasElement} */
-        canvas.cloneNode(false);
-  } else {
-    canvas = this.canvas_;
-    context = this.context_;
-    // force clear the canvas
-    canvas.width = canvasSize.width;
-    canvas.height = canvasSize.height;
-    this.canvasSize_ = canvasSize;
-  }
 
-  // TODO: implement layer.setStyle(style) where style is a set of rules
+  // clear/resize final canvas
-  // and a rule has a filter and array of symbolizers
+  var finalCanvas = this.canvas_;
-  var symbolizers = {};
+  finalCanvas.width = sketchSize.width;
-  symbolizers[ol.geom.GeometryType.POINT] = new ol.style.LiteralShape({
+  finalCanvas.height = sketchSize.height;
-    type: ol.style.ShapeType.CIRCLE,
+  var finalContext = this.context_;
-    size: 10,
+
-    fillStyle: '#ffcc99',
+  var sketchTransform = this.sketchTransform_;
-    strokeStyle: '#ff9933',
+  goog.vec.Mat4.makeIdentity(sketchTransform);
-    strokeWidth: 2,
+  goog.vec.Mat4.translate(sketchTransform,
-    opacity: 0.75
+      sketchSize.width / 2, sketchSize.height / 2, 0);
-  });
+  goog.vec.Mat4.rotateZ(sketchTransform, view2DState.rotation);
-  symbolizers[ol.geom.GeometryType.LINESTRING] = new ol.style.LiteralLine({
+  goog.vec.Mat4.scale(
-    strokeStyle: '#ff9933',
+      sketchTransform,
-    strokeWidth: 2,
+      1 / tileResolution,
-    opacity: 1
+      -1 / tileResolution,
-  });
+      1);
-  symbolizers[ol.geom.GeometryType.POLYGON] = new ol.style.LiteralPolygon({
+  goog.vec.Mat4.translate(
-    fillStyle: '#ffcc99',
+      sketchTransform,
-    strokeStyle: '#ff9933',
+      -view2DState.center.x,
-    strokeWidth: 2,
+      -view2DState.center.y,
-    opacity: 0.5
+      0);
-  });
 
-  var sketchCanvas = this.sketchCanvas_;
-  // clear the sketch canvas
-  sketchCanvas.width = canvasSize.width;
-  sketchCanvas.height = canvasSize.height;
-  // TODO: Use transform for tile resolution, not frameState resolution
   var sketchCanvasRenderer = new ol.renderer.canvas.Renderer(
-      sketchCanvas, frameState.coordinateToPixelMatrix);
+      sketchCanvas, sketchTransform);
   var renderedFeatures = {};
   var tile, tileContext, tileCoord, key, tileExtent, tileState, x, y;
   // render features by geometry type
@@ -185,9 +230,8 @@ ol.renderer.canvas.VectorLayer.prototype.renderFrame =
     for (y = tileRange.minY; y <= tileRange.maxY; ++y) {
       tileCoord = new ol.TileCoord(z, x, y);
       key = tileCoord.toString();
-      if (key in this.tileCache_) {
+      tile = this.tileCache_[key];
-        tile = this.tileCache_[key];
+      if (tile === undefined) {
-      } else {
         tileExtent = tileGrid.getTileCoordExtent(tileCoord);
         // TODO: instead of filtering here, do this on the source and maintain
         // a spatial index
@@ -208,7 +252,7 @@ ol.renderer.canvas.VectorLayer.prototype.renderFrame =
           features = goog.array.filter(features, filterFn);
           if (features.length) {
             // TODO: layer.getSymbolizerLiterals(features) or similar
-            symbolizer = symbolizers[type];
+            symbolizer = this.symbolizers_[type];
             sketchCanvasRenderer.renderFeaturesByGeometryType(
                 type, features, symbolizer);
           }
@@ -218,19 +262,31 @@ ol.renderer.canvas.VectorLayer.prototype.renderFrame =
         tile.width = tileSize.width;
         tile.height = tileSize.height;
         tileContext = tile.getContext('2d');
+
         tileContext.drawImage(sketchCanvas,
-            x * tileSize.width, (tileRange.maxY - y) * tileSize.height,
+            -x * tileSize.width, -(tileRange.maxY - y) * tileSize.height);
-            tileSize.width, tileSize.height,
-            0, 0, tileSize.width, tileSize.height);
         this.tileCache_[key] = tile;
       }
-      // TODO: transform (scale, offset)
+      finalContext.drawImage(tile,
-      context.drawImage(tile,
+          x * tileSize.width, (tileRange.maxY - y) * tileSize.height);
-          0, 0,
-          tileSize.width, tileSize.height,
-          x * tileSize.width, (tileRange.maxY - y) * tileSize.height,
-          tileSize.width, tileSize.height);
     }
   }
+  var sketchOrigin = tileExtent.getTopLeft();
+  var frameOrigin = extent.getTopLeft();
+
+  var dx = (sketchOrigin.x - frameOrigin.x) / resolution;
+  var dy = (frameOrigin.y - sketchOrigin.y) / resolution;
+
+  var transform = this.transform_;
+  goog.vec.Mat4.makeIdentity(transform);
+  goog.vec.Mat4.translate(transform, dx, dy, 0);
+  goog.vec.Mat4.scale(
+      transform,
+      tileResolution / resolution,
+      tileResolution / resolution,
+      1);
+
+  this.renderedResolution_ = tileResolution;
+  this.renderedExtent_ = tileExtent;
 
 };