Skip to content

Commit

Permalink
[Bugfix] Disbale High DPI support
Browse files Browse the repository at this point in the history 
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
  • Loading branch information
@rldhont
rldhont committed Feb 20, 2024
1 parent 519bb4e commit d025366
Show file tree
Hide file tree
Showing 2 changed files with 24 additions and 16 deletions.
13 changes: 9 additions & 4 deletions assets/src/modules/map.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -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],
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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
})
});

Expand Down Expand Up @@ -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,
Expand All @@ -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
})
});
}
Expand Down
27 changes: 15 additions & 12 deletions tests/end2end/playwright/viewport.spec.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
// @ts-check
import { test, expect } from '@playwright/test';

test.describe('Viewport devicePixelRatio 1', () => {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -67,6 +68,7 @@ test.describe('Viewport devicePixelRatio 1', () => {
})

test.describe('Viewport devicePixelRatio 2', () => {
// Force device pixel ratio to 2
test.use({
deviceScaleFactor: 2,
});
Expand Down Expand Up @@ -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();
Expand All @@ -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*')
})
Expand Down Expand Up @@ -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
Expand Down

0 comments on commit d025366

Please sign in to comment.