Merge pull request #7079 from ahocevar/optimize-custom-renderer

Optimize custom renderer code, examples and API

src/ol/geom/simplegeometry.js

@@ -41,12 +41,6 @@ ol.geom.SimpleGeometry = function() {
    */
   this.flatCoordinates = null;
 
-  /**
-   * @private
-   * @type {Array.<number>|Array.<Array.<number>>|Array.<Array.<Array.<number>>>}
-   */
-  this.renderCoordinates_ = null;
-
 };
 ol.inherits(ol.geom.SimpleGeometry, ol.geom.Geometry);
 
@@ -147,18 +141,6 @@ ol.geom.SimpleGeometry.prototype.getLayout = function() {
 };
 
 
-/**
- * @return {Array.<number>|Array.<Array.<number>>|Array.<Array.<Array.<number>>>}
- *     Render coordinates.
- */
-ol.geom.SimpleGeometry.prototype.getRenderCoordinates = function() {
-  if (!this.renderCoordinates_) {
-    this.renderCoordinates_ = [];
-  }
-  return this.renderCoordinates_;
-};
-
-
 /**
  * @inheritDoc
  */

src/ol/render/canvas/replay.js

@@ -88,6 +88,12 @@ ol.render.canvas.Replay = function(tolerance, maxExtent, resolution, overlaps) {
    */
   this.coordinates = [];
 
+  /**
+   * @private
+   * @type {Object.<number,ol.Coordinate|Array.<ol.Coordinate>|Array.<Array.<ol.Coordinate>>>}
+   */
+  this.coordinateCache_ = {};
+
   /**
    * @private
    * @type {!ol.Transform}
@@ -320,16 +326,14 @@ ol.render.canvas.Replay.prototype.replay_ = function(
   var prevX, prevY, roundX, roundY;
   var pendingFill = 0;
   var pendingStroke = 0;
+  var coordinateCache = this.coordinateCache_;
 
-  /**
-   * @type {olx.render.State}
-   */
-  var state = {
+  var state = /** @type {olx.render.State} */ ({
     context: context,
     pixelRatio: pixelRatio,
     resolution: this.resolution,
     rotation: viewRotation
-  };
+  });
 
   // When the batch size gets too big, performance decreases. 200 is a good
   // balance between batch size and number of fill/stroke instructions.
@@ -338,7 +342,7 @@ ol.render.canvas.Replay.prototype.replay_ = function(
   while (i < ii) {
     var instruction = instructions[i];
     var type = /** @type {ol.render.canvas.Instruction} */ (instruction[0]);
-    var feature, fill, stroke, text, x, y;
+    var /** @type {ol.Feature|ol.render.Feature} */ feature, fill, stroke, text, x, y;
     switch (type) {
       case ol.render.canvas.Instruction.BEGIN_GEOMETRY:
         feature = /** @type {ol.Feature|ol.render.Feature} */ (instruction[1]);
@@ -390,14 +394,21 @@ ol.render.canvas.Replay.prototype.replay_ = function(
         dd = instruction[2];
         var geometry = /** @type {ol.geom.SimpleGeometry} */ (instruction[3]);
         var renderer = instruction[4];
-        var coords;
-        if (instruction.length == 6) {
-          var fn = instruction[5];
-          coords = fn(pixelCoordinates, d, dd, 2, geometry.getRenderCoordinates());
-        } else {
-          coords = pixelCoordinates.slice(d, dd);
+        var fn = instruction.length == 6 ? instruction[5] : undefined;
+        state.geometry = geometry;
+        state.feature = feature;
+        if (!(i in coordinateCache)) {
+          coordinateCache[i] = [];
         }
-        renderer(coords, geometry, feature, state);
+        var coords = coordinateCache[i];
+        if (fn) {
+          fn(pixelCoordinates, d, dd, 2, coords);
+        } else {
+          coords[0] = pixelCoordinates[d];
+          coords[1] = pixelCoordinates[d + 1];
+          coords.length = 2;
+        }
+        renderer(coords, state);
         ++i;
         break;
       case ol.render.canvas.Instruction.DRAW_IMAGE:

src/ol/render/feature.js

@@ -43,12 +43,6 @@ ol.render.Feature = function(type, flatCoordinates, ends, properties, id) {
    */
   this.flatCoordinates_ = flatCoordinates;
 
-  /**
-   * @private
-   * @type {Array.<number>|Array.<Array.<number>>|Array.<Array.<Array.<number>>>}
-   */
-  this.renderCoordinates_ = null;
-
   /**
    * @private
    * @type {Array.<number>|Array.<Array.<number>>}
@@ -117,18 +111,6 @@ ol.render.Feature.prototype.getOrientedFlatCoordinates = function() {
 };
 
 
-/**
- * @return {Array.<number>|Array.<Array.<number>>|Array.<Array.<Array.<number>>>}
- *     Render coordinates.
- */
-ol.render.Feature.prototype.getRenderCoordinates = function() {
-  if (!this.renderCoordinates_) {
-    this.renderCoordinates_ = [];
-  }
-  return this.renderCoordinates_;
-};
-
-
 /**
  * @return {Array.<number>} Flat coordinates.
  */

src/ol/typedefs.js

@@ -627,14 +627,12 @@ ol.StyleGeometryFunction;
 
 
 /**
- * Custom renderer function. Takes 4 arguments:
+ * Custom renderer function. Takes two arguments:
  *
  * 1. The pixel coordinates of the geometry in GeoJSON notation.
- * 2. The original {@link ol.geom.SimpleGeometry}.
- * 3. The underlying {@link ol.Feature} or {@link ol.render.Feature}.
- * 4. The {@link olx.render.State} of the layer renderer.
+ * 2. The {@link olx.render.State} of the layer renderer.
  *
- * @typedef {function(Array,ol.geom.SimpleGeometry,(ol.Feature|ol.render.Feature),olx.render.State)}
+ * @typedef {function((ol.Coordinate|Array<ol.Coordinate>|Array.<Array.<ol.Coordinate>>),olx.render.State)}
  */
 ol.StyleRenderFunction;