Add imageRatio option for VectorImage layers

src/ol/layer/VectorImage.js

@@ -2,10 +2,13 @@
  * @module ol/layer/VectorImage
  */
 import BaseVectorLayer from './BaseVector.js';
+import {assign} from '../obj.js';
 import CanvasVectorImageLayerRenderer from '../renderer/canvas/VectorImageLayer.js';
 
 /**
  * @typedef {import("./BaseVector.js").Options} Options
+ * @property {number} [imageRatio=1] Ratio by which the rendered extent should be larger than the
+ * viewport extent A larger ratio avoids cut images during panning, but will cause a decrease in performance.
  */
 
 
@@ -23,7 +26,25 @@ class VectorImageLayer extends BaseVectorLayer {
    * @param {Options=} opt_options Options.
    */
   constructor(opt_options) {
+    const options = opt_options ? opt_options : /** @type {Options} */ ({});
+
+    const baseOptions = assign({}, options);
+    delete baseOptions.imageRatio;
     super(opt_options);
+
+    /**
+     * @type {number}
+     * @private
+     */
+    this.imageRatio_ = options.imageRatio !== undefined ? options.imageRatio : 1;
+
+  }
+
+  /**
+   * @return {number} Ratio between rendered extent size and viewport extent size.
+   */
+  getImageRatio() {
+    return this.imageRatio_;
   }
 
   /**

src/ol/renderer/canvas/VectorImageLayer.js

@@ -4,7 +4,7 @@
 import ImageCanvas from '../../ImageCanvas.js';
 import ViewHint from '../../ViewHint.js';
 import {equals} from '../../array.js';
-import {getHeight, getWidth, isEmpty} from '../../extent.js';
+import {getHeight, getWidth, isEmpty, scaleFromCenter} from '../../extent.js';
 import {assign} from '../../obj.js';
 import CanvasImageLayerRenderer from './ImageLayer.js';
 import CanvasVectorLayerRenderer from './VectorLayer.js';
@@ -33,6 +33,12 @@ class CanvasVectorImageLayerRenderer extends CanvasImageLayerRenderer {
      */
     this.vectorRenderer_ = new CanvasVectorLayerRenderer(layer);
 
+    /**
+     * @private
+     * @type {number}
+     */
+    this.layerImageRatio_ = layer.getImageRatio();
+
   }
 
   /**
@@ -53,7 +59,11 @@ class CanvasVectorImageLayerRenderer extends CanvasImageLayerRenderer {
 
     const hints = frameState.viewHints;
     const vectorRenderer = this.vectorRenderer_;
-    const renderedExtent = frameState.extent;
+    let renderedExtent = frameState.extent;
+    if (this.layerImageRatio_ !== 1) {
+      renderedExtent = renderedExtent.slice(0);
+      scaleFromCenter(renderedExtent, this.layerImageRatio_);
+    }
 
     if (!hints[ViewHint.ANIMATING] && !hints[ViewHint.INTERACTING] && !isEmpty(renderedExtent)) {
       let skippedFeatures = this.skippedFeatures_;