[Bugfix] Disbale High DPI support

OpenLayers supports High DPI rendering. For WMS layers, it requested to the server images with Higher DPI that depends on device pixel ratio.
With High DPI enabled, more images are requested and the rendering of QGIS label is too small.
We prefer to disble High DPI support.

Funded by Valabre

Author: rldhont

assets/src/modules/map.js

@@ -120,6 +120,9 @@ export default class map extends olMap {
             });
         };
 
+        // Disable High DPI for requests
+        this._hidpi = false;
+
         // Ratio between WMS single tiles and map viewport
         this._WMSRatio = 1.1;
 
@@ -129,8 +132,8 @@ export default class map extends olMap {
             mainLizmap.initialConfig.options.wmsMaxHeight,
         ];
 
-        // Get pixel ratio
-        const pixelRatio = this.pixelRatio_;
+        // Get pixel ratio, if High DPI is disabled do not use device pixel ratio
+        const pixelRatio = this._hidpi ? this.pixelRatio_ : 1;
 
         const useTileWms = this.getSize().reduce(
             (r /*accumulator*/, x /*currentValue*/, i /*currentIndex*/) => r || Math.ceil(x*this._WMSRatio*pixelRatio) > wmsMaxSize[i],
@@ -245,6 +248,7 @@ export default class map extends olMap {
                             url: mainLizmap.serviceURL,
                             serverType: 'qgis',
                             ratio: WMSRatio,
+                            hidpi: this._hidpi,
                             params: {
                                 LAYERS: node.wmsName,
                                 FORMAT: node.layerConfig.imageFormat,
@@ -278,7 +282,7 @@ export default class map extends olMap {
                                     TILED: 'true'
                                 },
                                 wrapX: false, // do not reused across the 180° meridian.
-                                //hidpi: false, pixelRatio is used in useTileWms and customTileGrid definition
+                                hidpi: this._hidpi, // pixelRatio is used in useTileWms and customTileGrid definition
                             })
                         });
 
@@ -435,6 +439,7 @@ export default class map extends olMap {
                             projection: qgisProjectProjection,
                             serverType: 'qgis',
                             ratio: this._WMSRatio,
+                            hidpi: this._hidpi,
                             params: {
                                 LAYERS: baseLayerState.itemState.wmsName,
                                 FORMAT: baseLayerState.layerConfig.imageFormat,
@@ -459,7 +464,7 @@ export default class map extends olMap {
                                     TILED: 'true'
                                 },
                                 wrapX: false, // do not reused across the 180° meridian.
-                                //hidpi: false, pixelRatio is used in useTileWms and customTileGrid definition
+                                hidpi: this._hidpi, // pixelRatio is used in useTileWms and customTileGrid definition
                             })
                         });
                     }

tests/end2end/playwright/viewport.spec.js

@@ -1,3 +1,4 @@
+// @ts-check
 import { test, expect } from '@playwright/test';
 
 test.describe('Viewport devicePixelRatio 1', () => {
@@ -34,9 +35,9 @@ test.describe('Viewport devicePixelRatio 1', () => {
         await page.waitForTimeout(1000);
 
         // Check that the WMS Max Size has been well overwrite
-        expect(await page.evaluate(() => lizMap.mainLizmap.initialConfig.options.wmsMaxHeight)).toBe(950);
+        expect(await page.evaluate(() => globalThis.lizMap.mainLizmap.initialConfig.options.wmsMaxHeight)).toBe(950);
         expect(await page.evaluate(() => window.devicePixelRatio)).toBe(1);
-        expect(await page.evaluate(() => lizMap.mainLizmap.map.getSize())).toStrictEqual([870, 575]);
+        expect(await page.evaluate(() => globalThis.lizMap.mainLizmap.map.getSize())).toStrictEqual([870,575]);
         await page.unroute('**/service/getProjectConfig*')
 
         // Catch GetMaps request;
@@ -67,6 +68,7 @@ test.describe('Viewport devicePixelRatio 1', () => {
 })
 
 test.describe('Viewport devicePixelRatio 2', () => {
+    // Force device pixel ratio to 2
     test.use({
         deviceScaleFactor: 2,
     });
@@ -103,19 +105,20 @@ test.describe('Viewport devicePixelRatio 2', () => {
         await page.waitForTimeout(1000);
 
         // Check that the WMS Max Size has been well overwrite
-        expect(await page.evaluate(() => lizMap.mainLizmap.initialConfig.options.wmsMaxHeight)).toBe(1900);
+        expect(await page.evaluate(() => globalThis.lizMap.mainLizmap.initialConfig.options.wmsMaxHeight)).toBe(1900);
         expect(await page.evaluate(() => window.devicePixelRatio)).toBe(2);
-        expect(await page.evaluate(() => lizMap.mainLizmap.map.getSize())).toStrictEqual([870, 620]);
+        expect(await page.evaluate(() => globalThis.lizMap.mainLizmap.map.getSize())).toStrictEqual([870,620]);
         await page.unroute('**/service/getProjectConfig*')
 
         // Catch GetMaps request;
+        // Because we disable High DPI, the OL pixel ratio is forced to 1 even if the device pixel ratio is 2
         let GetMaps = [];
         await page.route('**/service*', async route => {
             const request = route.request();
             if (request.url().includes('GetMap')) {
                 GetMaps.push(request.url());
             }
-        }, { times: 4 });
+        }, {times: 1}); // No tiles, if High DPI is enabled we got 4 tiles
 
         // Activate world layer
         await page.getByLabel('world').check();
@@ -124,11 +127,11 @@ test.describe('Viewport devicePixelRatio 2', () => {
         await page.waitForTimeout(1000);
 
         // Check GetMap requests
-        expect(GetMaps).toHaveLength(4);
-        for (const GetMap of GetMaps) {
-            expect(GetMap).toContain('&WIDTH=870&')
-            expect(GetMap).toContain('&HEIGHT=620&')
-            expect(GetMap).toContain('&DPI=180&')
+        expect(GetMaps).toHaveLength(1); // No tiles, if High DPI is enabled we got 4 tiles
+        for(const GetMap of GetMaps) {
+            expect(GetMap).toContain('&WIDTH=957&')
+            expect(GetMap).toContain('&HEIGHT=682&')
+            expect(GetMap).toContain('&DPI=96&')
         }
         await page.unroute('**/service*')
     })
@@ -164,11 +167,11 @@ test.describe('Viewport mobile', () => {
         await expect(await page.locator('#right-dock')).toBeInViewport();
 
         // Choose a feature and check getFeatureInfo
-        let getFeatureInfoRequestPromise = page.waitForRequest(request => request.method() === 'POST' && request?.postData().includes('GetFeatureInfo'));
+        let getFeatureInfoRequestPromise = page.waitForRequest(request => request.method() === 'POST' && request.postData().includes('GetFeatureInfo'));
         await page.locator('#liz-atlas-select').selectOption('2');
         let getFeatureInfoRequest = await getFeatureInfoRequestPromise;
         let getFeatureInfoResponse = await getFeatureInfoRequest.response();
-        await expect(await getFeatureInfoResponse.headerValue('content-type')).toContain('text/html');
+        await expect(await getFeatureInfoResponse?.headerValue('content-type')).toContain('text/html');
         await expect(await page.locator('#liz-atlas-item-detail .lizmapPopupContent')).toBeInViewport();
         await expect(await page.locator('#liz-atlas-item-detail .lizmapPopupContent')).toContainText('MOSSON');
         // Close atlas