Only include renderBuffer when decluttering

src/ol/render/canvas/Executor.js

@@ -309,6 +309,7 @@ class Executor {
   }
 
   /**
+   * @private
    * @param {CanvasRenderingContext2D} context Context.
    * @param {number} contextScale Scale of the context.
    * @param {number} x X.
@@ -410,26 +411,26 @@ class Executor {
     } else {
       createOrUpdate(boxX, boxY, boxX + boxW, boxY + boxH, tmpExtent);
     }
-    this.renderBuffer_[0] = Math.max(
+    let renderBufferX = 0;
-      this.renderBuffer_[0],
+    let renderBufferY = 0;
-      getWidth(tmpExtent)
+    if (declutterGroup) {
-    );
+      const renderBuffer = this.renderBuffer_;
-    this.renderBuffer_[1] = Math.max(
+      renderBuffer[0] = Math.max(renderBuffer[0], getWidth(tmpExtent));
-      this.renderBuffer_[1],
+      renderBufferX = renderBuffer[0];
-      getHeight(tmpExtent)
+      renderBuffer[1] = Math.max(renderBuffer[1], getHeight(tmpExtent));
-    );
+      renderBufferY = renderBuffer[1];
+    }
     const canvas = context.canvas;
     const strokePadding = strokeInstruction
       ? (strokeInstruction[2] * scale[0]) / 2
       : 0;
-    const renderBuffer = this.renderBuffer_;
     const intersects =
       tmpExtent[0] - strokePadding <=
-        (canvas.width + renderBuffer[0]) / contextScale &&
+        (canvas.width + renderBufferX) / contextScale &&
-      tmpExtent[2] + strokePadding >= -renderBuffer[0] / contextScale &&
+      tmpExtent[2] + strokePadding >= -renderBufferX / contextScale &&
       tmpExtent[1] - strokePadding <=
-        (canvas.height + renderBuffer[1]) / contextScale &&
+        (canvas.height + renderBufferY) / contextScale &&
-      tmpExtent[3] + strokePadding >= -renderBuffer[1] / contextScale;
+      tmpExtent[3] + strokePadding >= -renderBufferY / contextScale;
 
     if (snapToPixel) {
       x = Math.round(x);

test/spec/ol/renderer/map.test.js

@@ -5,6 +5,7 @@ import MapRenderer from '../../../../src/ol/renderer/Map.js';
 import VectorLayer from '../../../../src/ol/layer/Vector.js';
 import VectorSource from '../../../../src/ol/source/Vector.js';
 import View from '../../../../src/ol/View.js';
+import {Circle, Fill, Style} from '../../../../src/ol/style.js';
 import {Point} from '../../../../src/ol/geom.js';
 import {Projection} from '../../../../src/ol/proj.js';
 
@@ -21,7 +22,7 @@ describe('ol.renderer.Map', function () {
   });
 
   describe('#forEachFeatureAtCoordinate', function () {
-    let map;
+    let map, source;
     beforeEach(function () {
       const target = document.createElement('div');
       target.style.width = '100px';
@@ -31,13 +32,23 @@ describe('ol.renderer.Map', function () {
         code: 'EPSG:21781',
         units: 'm',
       });
+      source = new VectorSource({
+        projection: projection,
+        features: [new Feature(new Point([660000, 190000]))],
+      });
       map = new Map({
         target: target,
         layers: [
           new VectorLayer({
-            source: new VectorSource({
+            source: source,
-              projection: projection,
+            renderBuffer: 12,
-              features: [new Feature(new Point([660000, 190000]))],
+            style: new Style({
+              image: new Circle({
+                radius: 6,
+                fill: new Fill({
+                  color: 'fuchsia',
+                }),
+              }),
             }),
           }),
         ],
@@ -47,7 +58,6 @@ describe('ol.renderer.Map', function () {
           zoom: 9,
         }),
       });
-      map.renderSync();
     });
 
     afterEach(function () {
@@ -57,8 +67,25 @@ describe('ol.renderer.Map', function () {
     });
 
     it('works with custom projection', function () {
+      map.renderSync();
       const features = map.getFeaturesAtPixel([50, 50]);
       expect(features.length).to.be(1);
     });
+
+    it('only draws features that intersect the hit detection viewport', function () {
+      const resolution = map.getView().getResolution();
+      source.addFeature(
+        new Feature(new Point([660000 + resolution * 6, 190000]))
+      );
+      source.addFeature(
+        new Feature(new Point([660000 - resolution * 12, 190000]))
+      );
+      map.renderSync();
+      const spy = sinon.spy(CanvasRenderingContext2D.prototype, 'drawImage');
+      const features = map.getFeaturesAtPixel([50, 44]);
+      expect(features.length).to.be(1);
+      expect(spy.callCount).to.be(2);
+      spy.restore();
+    });
   });
 });