Merge pull request #13627 from MoonE/hitdetect-origin-pixel-ratio

Fix hitdetection for icon with offset and pixelratio != 1

src/ol/render/canvas/ImageBuilder.js

@@ -129,8 +129,8 @@ class CanvasImageBuilder extends CanvasBuilder {
       this.anchorY_ * this.imagePixelRatio_,
       Math.ceil(this.height_ * this.imagePixelRatio_),
       this.opacity_,
-      this.originX_,
+      this.originX_ * this.imagePixelRatio_,
-      this.originY_,
+      this.originY_ * this.imagePixelRatio_,
       this.rotateWithView_,
       this.rotation_,
       [
@@ -186,8 +186,8 @@ class CanvasImageBuilder extends CanvasBuilder {
       this.anchorY_ * this.imagePixelRatio_,
       Math.ceil(this.height_ * this.imagePixelRatio_),
       this.opacity_,
-      this.originX_,
+      this.originX_ * this.imagePixelRatio_,
-      this.originY_,
+      this.originY_ * this.imagePixelRatio_,
       this.rotateWithView_,
       this.rotation_,
       [
@@ -249,18 +249,16 @@ class CanvasImageBuilder extends CanvasBuilder {
   setImageStyle(imageStyle, opt_sharedData) {
     const anchor = imageStyle.getAnchor();
     const size = imageStyle.getSize();
-    const hitDetectionImage = imageStyle.getHitDetectionImage();
-    const image = imageStyle.getImage(this.pixelRatio);
     const origin = imageStyle.getOrigin();
     this.imagePixelRatio_ = imageStyle.getPixelRatio(this.pixelRatio);
     this.anchorX_ = anchor[0];
     this.anchorY_ = anchor[1];
-    this.hitDetectionImage_ = hitDetectionImage;
+    this.hitDetectionImage_ = imageStyle.getHitDetectionImage();
-    this.image_ = image;
+    this.image_ = imageStyle.getImage(this.pixelRatio);
     this.height_ = size[1];
     this.opacity_ = imageStyle.getOpacity();
-    this.originX_ = origin[0] * this.imagePixelRatio_;
+    this.originX_ = origin[0];
-    this.originY_ = origin[1] * this.imagePixelRatio_;
+    this.originY_ = origin[1];
     this.rotateWithView_ = imageStyle.getRotateWithView();
     this.rotation_ = imageStyle.getRotation();
     this.scale_ = imageStyle.getScaleArray();

test/browser/spec/ol/Map.test.js

@@ -963,6 +963,70 @@ describe('ol/Map', function () {
     });
   });
 
+  describe('#forEachFeatureAtPixel', function () {
+    let map, target;
+
+    beforeEach(function () {
+      target = document.createElement('div');
+      target.style.width = '360px';
+      target.style.height = '180px';
+      document.body.appendChild(target);
+    });
+
+    afterEach(function () {
+      disposeMap(map);
+      map = undefined;
+    });
+    it('does hitdetection with image offset', function (done) {
+      const svg = `<svg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+        <rect x="32" y="32" width="32" height="32" />
+      </svg>`;
+
+      const feature = new Feature(new Point([0, 0]));
+      feature.setStyle(
+        new Style({
+          image: new Icon({
+            src: 'data:image/svg+xml;base64,' + window.btoa(svg),
+            color: [255, 0, 0, 1],
+            offset: [32, 32],
+            size: [32, 32],
+          }),
+        })
+      );
+
+      map = new Map({
+        pixelRatio: 2,
+        controls: [],
+        interactions: [],
+        target: target,
+        layers: [
+          new VectorLayer({
+            source: new VectorSource({
+              features: [feature],
+            }),
+          }),
+        ],
+        view: new View({
+          projection: 'EPSG:4326',
+          center: [0, 0],
+          resolution: 1,
+        }),
+      });
+      map.once('rendercomplete', function () {
+        const hit = map.forEachFeatureAtPixel(
+          map.getPixelFromCoordinate([0, 0]),
+          () => true
+        );
+        try {
+          expect(hit).to.be(true);
+          done();
+        } catch (e) {
+          done(e);
+        }
+      });
+    });
+  });
+
   describe('#forEachLayerAtPixel()', function () {
     let target, map, original, log;
 

test/browser/spec/ol/style/icon.test.js

@@ -78,8 +78,10 @@ describe('ol.style.Icon', function () {
       expect(original.anchorYUnits_).to.eql(clone.anchorYUnits_);
       expect(original.crossOrigin_).to.eql(clone.crossOrigin_);
       expect(original.getColor()).to.eql(clone.getColor());
+      expect(original.imgSize_).to.eql(clone.imgSize_);
       expect(original.offset_).to.eql(clone.offset_);
       expect(original.offsetOrigin_).to.eql(clone.offsetOrigin_);
+      expect(original.getScale()).to.eql(clone.getScale());
       expect(original.getSize()).to.eql(clone.getSize());
       expect(original.getSrc()).to.eql(clone.getSrc());
       expect(original.getOpacity()).to.eql(clone.getOpacity());