Merge pull request #12683 from ahocevar/icon-sprite-offset-pixelratio

Fix sprite offset for pixel ratio !== 1

src/ol/render/canvas/ImageBuilder.js

@@ -249,8 +249,8 @@ class CanvasImageBuilder extends CanvasBuilder {
     this.image_ = image;
     this.height_ = size[1];
     this.opacity_ = imageStyle.getOpacity();
-    this.originX_ = origin[0];
+    this.originX_ = origin[0] * this.imagePixelRatio_;
-    this.originY_ = origin[1];
+    this.originY_ = origin[1] * this.imagePixelRatio_;
     this.rotateWithView_ = imageStyle.getRotateWithView();
     this.rotation_ = imageStyle.getRotation();
     this.scale_ = imageStyle.getScaleArray();

test/rendering/cases/icon-sprite/main.js

@@ -0,0 +1,37 @@
+import Feature from '../../../../src/ol/Feature.js';
+import Map from '../../../../src/ol/Map.js';
+import Point from '../../../../src/ol/geom/Point.js';
+import View from '../../../../src/ol/View.js';
+import {Icon, Style} from '../../../../src/ol/style.js';
+import {Vector as VectorLayer} from '../../../../src/ol/layer.js';
+import {Vector as VectorSource} from '../../../../src/ol/source.js';
+
+const center = [0, 0];
+
+new Map({
+  pixelRatio: 2,
+  layers: [
+    new VectorLayer({
+      style: function () {
+        return new Style({
+          image: new Icon({
+            src: '/data/sprites/gis_symbols.png',
+            color: [255, 0, 0, 1],
+            offset: [32, 0],
+            size: [32, 32],
+          }),
+        });
+      },
+      source: new VectorSource({
+        features: [new Feature(new Point(center))],
+      }),
+    }),
+  ],
+  target: 'map',
+  view: new View({
+    center: center,
+    zoom: 2,
+  }),
+});
+
+render();

test/rendering/webpack.config.js

@@ -42,6 +42,11 @@ export default {
     ],
   },
   resolve: {
+    fallback: {
+      fs: false,
+      http: false,
+      https: false,
+    },
     alias: {
       // ol-mapbox-style imports ol/style/Style etc
       ol: path.join(baseDir, '..', '..', 'src', 'ol'),