ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Work with high dpi tiles

Browse Source
This commit is contained in:
Tim Schaub
2018-11-14 18:21:43 +01:00
parent 87e5bbac4d
commit 489af4023d
1 changed files with 12 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/ol/renderer/canvas/TileLayer.js
+12 -5
View File
@@ -49,6 +49,12 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
*/ */
this.renderedExtent_ = null; this.renderedExtent_ = null;
/**
* @private
* @type {number}
*/
this.renderedPixelRatio_ = 1;
/** /**
* @protected * @protected
* @type {number} * @type {number}
@@ -179,8 +185,8 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
width = height = size; width = height = size;
} }
const dx = tileResolution * width / 2; const dx = tileResolution * width / 2 / tilePixelRatio;
const dy = tileResolution * height / 2; const dy = tileResolution * height / 2 / tilePixelRatio;
const canvasExtent = [ const canvasExtent = [
viewCenter[0] - dx, viewCenter[0] - dx,
viewCenter[1] - dy, viewCenter[1] - dy,
@@ -266,8 +272,8 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
for (const tileCoordKey in tilesToDraw) { for (const tileCoordKey in tilesToDraw) {
const tile = tilesToDraw[tileCoordKey]; const tile = tilesToDraw[tileCoordKey];
const tileExtent = tileGrid.getTileCoordExtent(tile.getTileCoord(), tmpExtent); const tileExtent = tileGrid.getTileCoordExtent(tile.getTileCoord(), tmpExtent);
const x = (tileExtent[0] - canvasExtent[0]) / tileResolution; const x = tilePixelRatio * (tileExtent[0] - canvasExtent[0]) / tileResolution;
const y = (canvasExtent[3] - tileExtent[3]) / tileResolution; const y = tilePixelRatio * (canvasExtent[3] - tileExtent[3]) / tileResolution;
const w = currentTilePixelSize[0] * currentScale; const w = currentTilePixelSize[0] * currentScale;
const h = currentTilePixelSize[1] * currentScale; const h = currentTilePixelSize[1] * currentScale;
this.drawTileImage(tile, frameState, layerState, x, y, w, h, tileGutter, z === currentZ); this.drawTileImage(tile, frameState, layerState, x, y, w, h, tileGutter, z === currentZ);
@@ -277,6 +283,7 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
this.renderedRevision = sourceRevision; this.renderedRevision = sourceRevision;
this.renderedResolution = tileResolution; this.renderedResolution = tileResolution;
this.renderedPixelRatio_ = tilePixelRatio;
this.renderedExtent_ = canvasExtent; this.renderedExtent_ = canvasExtent;
} }
@@ -326,7 +333,7 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
} }
const rotation = frameState.viewState.rotation; const rotation = frameState.viewState.rotation;
const scale = this.renderedResolution / frameState.viewState.resolution; const scale = this.renderedResolution / frameState.viewState.resolution / this.renderedPixelRatio_;
const transform = 'rotate(' + rotation + 'rad) scale(' + scale + ')'; const transform = 'rotate(' + rotation + 'rad) scale(' + scale + ')';
if (transform !== canvas.style.transform) { if (transform !== canvas.style.transform) {