Merge pull request #7120 from ahocevar/fix-overzoom-hitdetect

Fix hit detection for overzoomed vector tiles

src/ol/renderer/canvas/vectortilelayer.js

@@ -238,7 +238,7 @@ ol.renderer.canvas.VectorTileLayer.prototype.forEachFeatureAtCoordinate = functi
   var sourceTileGrid = source.getTileGrid();
   var bufferedExtent, found, tileSpaceCoordinate;
   var i, ii, origin, replayGroup;
-  var tile, tileCoord, tileExtent, tilePixelRatio, tileResolution;
+  var tile, tileCoord, tileExtent, tilePixelRatio, tileRenderResolution;
   for (i = 0, ii = renderedTiles.length; i < ii; ++i) {
     tile = renderedTiles[i];
     tileCoord = tile.tileCoord;
@@ -254,12 +254,14 @@ ol.renderer.canvas.VectorTileLayer.prototype.forEachFeatureAtCoordinate = functi
         var sourceTileExtent = sourceTileGrid.getTileCoordExtent(sourceTileCoord, this.tmpExtent);
         origin = ol.extent.getTopLeft(sourceTileExtent);
         tilePixelRatio = this.getTilePixelRatio_(source, sourceTile);
-        tileResolution = sourceTileGrid.getResolution(sourceTileCoord[0]) / tilePixelRatio;
+        var sourceTileResolution = sourceTileGrid.getResolution(sourceTileCoord[0]);
+        tileRenderResolution = sourceTileResolution / tilePixelRatio;
         tileSpaceCoordinate = [
-          (coordinate[0] - origin[0]) / tileResolution,
+          (coordinate[0] - origin[0]) / tileRenderResolution,
-          (origin[1] - coordinate[1]) / tileResolution
+          (origin[1] - coordinate[1]) / tileRenderResolution
         ];
-        resolution = tilePixelRatio;
+        var upscaling = tileGrid.getResolution(tileCoord[0]) / sourceTileResolution;
+        resolution = tilePixelRatio * upscaling;
       } else {
         tileSpaceCoordinate = coordinate;
       }

test/spec/ol/renderer/canvas/vectortilelayer.test.js

@@ -298,6 +298,42 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
       expect(spy.callCount).to.be(1);
       expect(spy.getCall(0).args[1]).to.equal(layer);
     });
-  });
 
+    it('does not give false positives when overzoomed', function(done) {
+      var target = document.createElement('div');
+      target.style.width = '100px';
+      target.style.height = '100px';
+      document.body.appendChild(target);
+      var extent = [1824704.739223726, 6141868.096770482, 1827150.7241288517, 6144314.081675608];
+      var source = new ol.source.VectorTile({
+        format: new ol.format.MVT(),
+        url: 'spec/ol/data/14-8938-5680.vector.pbf',
+        minZoom: 14,
+        maxZoom: 14
+      });
+      var map = new ol.Map({
+        target: target,
+        layers: [
+          new ol.layer.VectorTile({
+            extent: extent,
+            source: source
+          })
+        ],
+        view: new ol.View({
+          center: ol.extent.getCenter(extent),
+          zoom: 19
+        })
+      });
+      source.on('tileloadend', function() {
+        setTimeout(function() {
+          var features = map.getFeaturesAtPixel([96, 96]);
+          document.body.removeChild(target);
+          map.dispose();
+          expect(features).to.be(null);
+          done();
+        }, 200);
+      });
+    });
+
+  });
 });