Add a renderBuffer option to ol.layer.Vector

externs/olx.js

@@ -3188,6 +3188,7 @@ olx.layer.TileOptions.prototype.useInterimTilesOnError;
  *     minResolution: (number|undefined),
  *     maxResolution: (number|undefined),
  *     opacity: (number|undefined),
+ *     renderBuffer: (number|undefined),
  *     saturation: (number|undefined),
  *     source: (ol.source.Vector|undefined),
  *     style: (ol.style.Style|Array.<ol.style.Style>|ol.style.StyleFunction|undefined),
@@ -3264,6 +3265,16 @@ olx.layer.VectorOptions.prototype.maxResolution;
 olx.layer.VectorOptions.prototype.opacity;
 
 
+/**
+ * The buffer around the viewport extent used by the renderer when getting
+ * features from the vector source. Recommended value: the size of the
+ * largest symbol or line width. Default is 100 pixels.
+ * @type {number|undefined}
+ * @api
+ */
+olx.layer.VectorOptions.prototype.renderBuffer;
+
+
 /**
  * Saturation.
  * @type {number|undefined}

src/ol/layer/vectorlayer.js

@@ -37,6 +37,13 @@ ol.layer.Vector = function(opt_options) {
   delete baseOptions.style;
   goog.base(this, /** @type {olx.layer.LayerOptions} */ (baseOptions));
 
+  /**
+   * @type {number}
+   * @private
+   */
+  this.renderBuffer_ = goog.isDef(options.renderBuffer) ?
+      options.renderBuffer : 100;
+
   /**
    * User provided style.
    * @type {ol.style.Style|Array.<ol.style.Style>|ol.style.StyleFunction}
@@ -57,6 +64,14 @@ ol.layer.Vector = function(opt_options) {
 goog.inherits(ol.layer.Vector, ol.layer.Layer);
 
 
+/**
+ * @return {number|undefined} Render buffer.
+ */
+ol.layer.Vector.prototype.getRenderBuffer = function() {
+  return this.renderBuffer_;
+};
+
+
 /**
  * @return {function(ol.Feature, ol.Feature): number|null|undefined} Render
  *     order.

src/ol/renderer/canvas/canvasvectorlayerrenderer.js

@@ -194,12 +194,8 @@ ol.renderer.canvas.VectorLayer.prototype.prepareFrame =
   }
 
   var extent = this.renderedExtent_;
-  var xBuffer = ol.extent.getWidth(frameStateExtent) / 4;
+  var renderBuffer = vectorLayer.getRenderBuffer();
-  var yBuffer = ol.extent.getHeight(frameStateExtent) / 4;
+  ol.extent.buffer(frameStateExtent, renderBuffer * resolution, extent);
-  extent[0] = frameStateExtent[0] - xBuffer;
-  extent[1] = frameStateExtent[1] - yBuffer;
-  extent[2] = frameStateExtent[2] + xBuffer;
-  extent[3] = frameStateExtent[3] + yBuffer;
 
   // FIXME dispose of old replayGroup in post render
   goog.dispose(this.replayGroup_);

src/ol/renderer/dom/domvectorlayerrenderer.js

@@ -234,12 +234,8 @@ ol.renderer.dom.VectorLayer.prototype.prepareFrame =
   }
 
   var extent = this.renderedExtent_;
-  var xBuffer = ol.extent.getWidth(frameStateExtent) / 4;
+  var renderBuffer = vectorLayer.getRenderBuffer();
-  var yBuffer = ol.extent.getHeight(frameStateExtent) / 4;
+  ol.extent.buffer(frameStateExtent, renderBuffer * resolution, extent);
-  extent[0] = frameStateExtent[0] - xBuffer;
-  extent[1] = frameStateExtent[1] - yBuffer;
-  extent[2] = frameStateExtent[2] + xBuffer;
-  extent[3] = frameStateExtent[3] + yBuffer;
 
   // FIXME dispose of old replayGroup in post render
   goog.dispose(this.replayGroup_);

src/ol/renderer/webgl/webglvectorlayerrenderer.js

@@ -153,12 +153,8 @@ ol.renderer.webgl.VectorLayer.prototype.prepareFrame =
   }
 
   var extent = this.renderedExtent_;
-  var xBuffer = ol.extent.getWidth(frameStateExtent) / 4;
+  var renderBuffer = vectorLayer.getRenderBuffer();
-  var yBuffer = ol.extent.getHeight(frameStateExtent) / 4;
+  ol.extent.buffer(frameStateExtent, renderBuffer * resolution, extent);
-  extent[0] = frameStateExtent[0] - xBuffer;
-  extent[1] = frameStateExtent[1] - yBuffer;
-  extent[2] = frameStateExtent[2] + xBuffer;
-  extent[3] = frameStateExtent[3] + yBuffer;
 
   if (!goog.isNull(this.replayGroup_)) {
     frameState.postRenderFunctions.push(