Get a pixel perfect match WMS image

To avoid having little blurry image
openlayers · May 9, 2023 · 2049902 · 2049902
1 parent 06708a0
commit 2049902
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 10 deletions.
diff --git a/src/ol/source/ImageWMS.js b/src/ol/source/ImageWMS.js
@@ -306,14 +306,10 @@ class ImageWMS extends ImageSource {
       viewWidth,
       viewHeight,
     ]);
-    const requestWidth = ceil(
-      (this.ratio_ * getWidth(extent)) / imageResolution,
-      DECIMALS
-    );
-    const requestHeight = ceil(
-      (this.ratio_ * getHeight(extent)) / imageResolution,
-      DECIMALS
-    );
+    const marginWidth = ceil(((this.ratio_ - 1) * viewWidth) / 2, DECIMALS);
+    const requestWidth = viewWidth + 2 * marginWidth;
+    const marginHeight = ceil(((this.ratio_ - 1) * viewHeight) / 2, DECIMALS);
+    const requestHeight = viewHeight + 2 * marginHeight;
     const requestExtent = getForViewAndSize(center, imageResolution, 0, [
       requestWidth,
       requestHeight,

diff --git a/test/browser/spec/ol/source/ImageWMS.test.js b/test/browser/spec/ol/source/ImageWMS.test.js
@@ -55,8 +55,19 @@ describe('ol/source/ImageWMS', function () {
         const bbox = queryData.get('BBOX').split(',').map(Number);
         const bboxAspectRatio = (bbox[3] - bbox[1]) / (bbox[2] - bbox[0]);
         const imageAspectRatio = imageWidth / imageHeight;
-        expect(imageWidth).to.be(Math.ceil((viewWidth / resolution) * ratio));
-        expect(imageHeight).to.be(Math.ceil((viewHeight / resolution) * ratio));
+        const marginWidth = Math.ceil(
+          ((ratio - 1) * viewWidth) / resolution / 2
+        );
+        const marginHeight = Math.ceil(
+          ((ratio - 1) * viewHeight) / resolution / 2
+        );
+
+        expect(imageWidth).to.be(
+          Math.round(viewWidth / resolution) + 2 * marginWidth
+        );
+        expect(imageHeight).to.be(
+          Math.round(viewHeight / resolution) + 2 * marginHeight
+        );
         expect(bboxAspectRatio).to.roughlyEqual(imageAspectRatio, 1e-12);
       });
     });