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

Refactor VectorTile renderer and add lower resolution clipping

Browse Source
This commit is contained in:
Andreas Hocevar
2016-11-07 09:37:09 +01:00
parent 0d65d1d813
commit ee7b894350
8 changed files with 228 additions and 259 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/ol/render/canvas/replaygroup.js
View File

@@ -149,6 +149,23 @@ ol.render.canvas.ReplayGroup.prototype.forEachFeatureAtCoordinate = function(
};
/**
* @param {ol.Transform} transform Transform.
* @return {Array.<number>} Clip coordinates.
*/
ol.render.canvas.ReplayGroup.prototype.getClipCoords = function(transform) {
var maxExtent = this.maxExtent_;
var minX = maxExtent[0];
var minY = maxExtent[1];
var maxX = maxExtent[2];
var maxY = maxExtent[3];
var flatClipCoords = [minX, minY, minX, maxY, maxX, maxY, maxX, minY];
ol.geom.flat.transform.transform2D(
flatClipCoords, 0, 8, 2, transform, flatClipCoords);
return flatClipCoords;
};
/**
* @inheritDoc
*/
@@ -200,14 +217,7 @@ ol.render.canvas.ReplayGroup.prototype.replay = function(context, pixelRatio,
// setup clipping so that the parts of over-simplified geometries are not
// visible outside the current extent when panning
var maxExtent = this.maxExtent_;
var minX = maxExtent[0];
var minY = maxExtent[1];
var maxX = maxExtent[2];
var maxY = maxExtent[3];
var flatClipCoords = [minX, minY, minX, maxY, maxX, maxY, maxX, minY];
ol.geom.flat.transform.transform2D(
flatClipCoords, 0, 8, 2, transform, flatClipCoords);
var flatClipCoords = this.getClipCoords(transform);
context.save();
context.beginPath();
context.moveTo(flatClipCoords[0], flatClipCoords[1]);

10
src/ol/renderer/canvas/layer.js
View File

@@ -69,7 +69,7 @@ ol.renderer.canvas.Layer.prototype.clip = function(context, frameState, extent)
*/
ol.renderer.canvas.Layer.prototype.composeFrame = function(frameState, layerState, context) {
this.dispatchPreComposeEvent(context, frameState);
this.preCompose(context, frameState);
var image = this.getImage();
if (image) {
@@ -103,8 +103,7 @@ ol.renderer.canvas.Layer.prototype.composeFrame = function(frameState, layerStat
}
}
this.dispatchPostComposeEvent(context, frameState);
this.postCompose(context, frameState, layerState);
};
@@ -138,10 +137,11 @@ ol.renderer.canvas.Layer.prototype.dispatchComposeEvent_ = function(type, contex
/**
* @param {CanvasRenderingContext2D} context Context.
* @param {olx.FrameState} frameState Frame state.
* @param {ol.LayerState} layerState Layer state.
* @param {ol.Transform=} opt_transform Transform.
* @protected
*/
ol.renderer.canvas.Layer.prototype.dispatchPostComposeEvent = function(context, frameState, opt_transform) {
ol.renderer.canvas.Layer.prototype.postCompose = function(context, frameState, layerState, opt_transform) {
this.dispatchComposeEvent_(ol.render.Event.Type.POSTCOMPOSE, context,
frameState, opt_transform);
};
@@ -153,7 +153,7 @@ ol.renderer.canvas.Layer.prototype.dispatchPostComposeEvent = function(context,
* @param {ol.Transform=} opt_transform Transform.
* @protected
*/
ol.renderer.canvas.Layer.prototype.dispatchPreComposeEvent = function(context, frameState, opt_transform) {
ol.renderer.canvas.Layer.prototype.preCompose = function(context, frameState, opt_transform) {
this.dispatchComposeEvent_(ol.render.Event.Type.PRECOMPOSE, context,
frameState, opt_transform);
};

134
src/ol/renderer/canvas/tilelayer.js
View File

@@ -27,18 +27,6 @@ ol.renderer.canvas.TileLayer = function(tileLayer) {
*/
this.context = ol.dom.createCanvasContext2D();
/**
* @private
* @type {ol.Extent}
*/
this.renderedExtent_ = ol.extent.createEmpty();
/**
* @private
* @type {number}
*/
this.renderedResolution_;
/**
* @private
* @type {number}
@@ -47,9 +35,15 @@ ol.renderer.canvas.TileLayer = function(tileLayer) {
/**
* @private
* @type {Array.<string>}
* @type {ol.TileRange}
*/
this.renderedTileKeys_ = null;
this.renderedTileRange_ = null;
/**
* @protected
* @type {!Array.<ol.Tile>}
*/
this.renderedTiles = [];
/**
* @protected
@@ -63,6 +57,12 @@ ol.renderer.canvas.TileLayer = function(tileLayer) {
*/
this.tmpTileCoord_ = [0, 0, 0];
/**
* @private
* @type {ol.TileRange}
*/
this.tmpTileRange_ = new ol.TileRange(0, 0, 0, 0);
/**
* @private
* @type {ol.Transform}
@@ -88,8 +88,7 @@ ol.inherits(ol.renderer.canvas.TileLayer, ol.renderer.canvas.Layer);
/**
* @inheritDoc
*/
ol.renderer.canvas.TileLayer.prototype.prepareFrame = function(
frameState, layerState) {
ol.renderer.canvas.TileLayer.prototype.prepareFrame = function(frameState, layerState) {
var pixelRatio = frameState.pixelRatio;
var size = frameState.size;
@@ -121,13 +120,13 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame = function(
var tilePixelRatio = tileSource.getTilePixelRatio(pixelRatio);
var scale = pixelRatio / tilePixelRatio * tileResolution / viewResolution;
var transform = ol.transform.compose(ol.transform.reset(this.imageTransform_),
var transform = ol.transform.compose(this.imageTransform_,
pixelRatio * size[0] / 2, pixelRatio * size[1] / 2,
scale, scale,
0,
tilePixelRatio * (imageExtent[0] - viewCenter[0]) / tileResolution,
tilePixelRatio * (viewCenter[1] - imageExtent[3]) / tileResolution);
ol.transform.compose(ol.transform.reset(this.coordinateToCanvasPixelTransform_),
ol.transform.compose(this.coordinateToCanvasPixelTransform_,
pixelRatio * size[0] / 2 - transform[4], pixelRatio * size[1] / 2 - transform[5],
pixelRatio / viewResolution, -pixelRatio / viewResolution,
0,
@@ -138,45 +137,38 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame = function(
*/
var tilesToDrawByZ = {};
tilesToDrawByZ[z] = {};
var loadedTileKeys = [];
var findLoadedTiles = this.createLoadedTileFinder(
tileSource, projection, tilesToDrawByZ);
var useInterimTilesOnError = tileLayer.getUseInterimTilesOnError();
var tmpExtent = this.tmpExtent;
var tmpTileRange = new ol.TileRange(0, 0, 0, 0);
var childTileRange, fullyLoaded, tile, tileCoordKey, x, y;
var drawableTile = (
/**
* @param {!ol.Tile} tile Tile.
* @return {boolean} Tile is selected.
*/
function(tile) {
var tileState = tile.getState();
return tileState == ol.Tile.State.LOADED ||
tileState == ol.Tile.State.EMPTY ||
tileState == ol.Tile.State.ERROR && !useInterimTilesOnError;
});
var tmpTileRange = this.tmpTileRange_;
var newTiles = false;
var tile, x, y;
for (x = tileRange.minX; x <= tileRange.maxX; ++x) {
for (y = tileRange.minY; y <= tileRange.maxY; ++y) {
tile = tileSource.getTile(z, x, y, pixelRatio, projection);
if (!drawableTile(tile)) {
var tileState = tile.getState();
var drawable = tileState == ol.Tile.State.LOADED ||
tileState == ol.Tile.State.EMPTY ||
tileState == ol.Tile.State.ERROR && !useInterimTilesOnError;
if (!drawable) {
tile = tile.getInterimTile();
}
if (drawableTile(tile)) {
if (tile.getState() == ol.Tile.State.LOADED) {
loadedTileKeys.push(tileCoordKey);
tileCoordKey = tile.tileCoord.toString();
tilesToDrawByZ[z][tileCoordKey] = tile;
} else {
if (tileState == ol.Tile.State.LOADED) {
tilesToDrawByZ[z][tile.tileCoord.toString()] = tile;
if (!newTiles && this.renderedTiles.indexOf(tile) == -1) {
newTiles = true;
}
}
continue;
}
fullyLoaded = tileGrid.forEachTileCoordParentTileRange(
var fullyLoaded = tileGrid.forEachTileCoordParentTileRange(
tile.tileCoord, findLoadedTiles, null, tmpTileRange, tmpExtent);
if (!fullyLoaded) {
childTileRange = tileGrid.getTileCoordChildTileRange(
var childTileRange = tileGrid.getTileCoordChildTileRange(
tile.tileCoord, tmpTileRange, tmpExtent);
if (childTileRange) {
findLoadedTiles(z + 1, childTileRange);
@@ -185,12 +177,10 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame = function(
}
}
loadedTileKeys.sort();
if (tileResolution != this.renderedResolution_ ||
sourceRevision != this.renderedRevision_ ||
!ol.extent.equals(this.renderedExtent_, imageExtent) ||
!ol.array.equals(loadedTileKeys, this.renderedTileKeys_)) {
if (newTiles || !(this.renderedTileRange_ &&
this.renderedTileRange_.equals(tileRange)) ||
this.renderedRevision_ != sourceRevision) {
var tilePixelSize = tileSource.getTilePixelSize(z, pixelRatio, projection);
var width = tileRange.getWidth() * tilePixelSize[0];
@@ -203,11 +193,12 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame = function(
canvas.height = height;
}
this.renderedTiles.length = 0;
/** @type {Array.<number>} */
var zs = Object.keys(tilesToDrawByZ).map(Number);
zs.sort(ol.array.numberSafeCompareFunction);
var currentResolution, currentScale, currentTilePixelSize, currentZ, i, ii;
var image, tileExtent, tileGutter, tilesToDraw, w, h;
var tileExtent, tileGutter, tilesToDraw, w, h;
for (i = 0, ii = zs.length; i < ii; ++i) {
currentZ = zs[i];
currentTilePixelSize = tileSource.getTilePixelSize(currentZ, pixelRatio, projection);
@@ -215,7 +206,7 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame = function(
currentScale = currentResolution / tileResolution;
tileGutter = tilePixelRatio * tileSource.getGutter(projection);
tilesToDraw = tilesToDrawByZ[currentZ];
for (tileCoordKey in tilesToDraw) {
for (var tileCoordKey in tilesToDraw) {
tile = tilesToDraw[tileCoordKey];
tileExtent = tileGrid.getTileCoordExtent(tile.getTileCoord(), tmpExtent);
x = (tileExtent[0] - imageExtent[0]) / tileResolution * tilePixelRatio;
@@ -225,12 +216,13 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame = function(
if (!opaque) {
context.clearRect(x, y, w, h);
}
image = tile.getImage();
context.drawImage(image, tileGutter, tileGutter,
image.width, image.height, x, y, w, h);
this.drawTileImage(tile, frameState, layerState, x, y, w, h, tileGutter);
this.renderedTiles.push(tile);
}
}
this.renderedTileRange_ = tileRange;
this.renderedRevision_ = sourceRevision;
}
this.updateUsedTiles(frameState.usedTiles, tileSource, z, tileRange);
@@ -239,12 +231,26 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame = function(
this.scheduleExpireCache(frameState, tileSource);
this.updateLogos(frameState, tileSource);
this.renderedTileKeys_ = loadedTileKeys;
this.renderedExtent_ = imageExtent;
this.renderedResolution_ = tileResolution;
this.renderedRevision_ = sourceRevision;
return this.renderedTiles.length > 0;
};
return true;
/**
* @param {ol.Tile} tile Tile.
* @param {olx.FrameState} frameState Frame state.
* @param {ol.LayerState} layerState Layer state.
* @param {number} x Left of the tile.
* @param {number} y Top of the tile.
* @param {number} w Width of the tile.
* @param {number} h Height of the tile.
* @param {number} gutter Tile gutter.
*/
ol.renderer.canvas.TileLayer.prototype.drawTileImage = function(tile, frameState, layerState, x, y, w, h, gutter) {
var image = tile.getImage();
if (image) {
this.context.drawImage(image, gutter, gutter,
image.width - 2 * gutter, image.height - 2 * gutter, x, y, w, h);
}
};
@@ -279,16 +285,16 @@ ol.renderer.canvas.TileLayer.prototype.getImage = function() {
};
/**
* @function
* @return {ol.layer.Tile|ol.layer.VectorTile}
*/
ol.renderer.canvas.TileLayer.prototype.getLayer;
/**
* @inheritDoc
*/
ol.renderer.canvas.TileLayer.prototype.getImageTransform = function() {
return this.imageTransform_;
};
/**
* @function
* @return {ol.layer.Tile|ol.layer.VectorTile}
*/
ol.renderer.canvas.TileLayer.prototype.getLayer;

4
src/ol/renderer/canvas/vectorlayer.js
View File

@@ -83,7 +83,7 @@ ol.renderer.canvas.VectorLayer.prototype.composeFrame = function(frameState, lay
var transform = this.getTransform(frameState, 0);
this.dispatchPreComposeEvent(context, frameState, transform);
this.preCompose(context, frameState, transform);
// clipped rendering if layer extent is set
var clipExtent = layerState.extent;
@@ -169,7 +169,7 @@ ol.renderer.canvas.VectorLayer.prototype.composeFrame = function(frameState, lay
if (clipped) {
context.restore();
}
this.dispatchPostComposeEvent(context, frameState, transform);
this.postCompose(context, frameState, layerState, transform);
};

293
src/ol/renderer/canvas/vectortilelayer.js
View File

@@ -1,12 +1,10 @@
goog.provide('ol.renderer.canvas.VectorTileLayer');
goog.require('ol');
goog.require('ol.array');
goog.require('ol.extent');
goog.require('ol.proj');
goog.require('ol.proj.Units');
goog.require('ol.layer.VectorTile');
goog.require('ol.render.Event');
goog.require('ol.render.ReplayType');
goog.require('ol.render.canvas');
goog.require('ol.render.canvas.ReplayGroup');
@@ -66,126 +64,12 @@ ol.renderer.canvas.VectorTileLayer.VECTOR_REPLAYS = {
};
/**
* @inheritDoc
*/
ol.renderer.canvas.VectorTileLayer.prototype.composeFrame = function(
frameState, layerState, context) {
var transform = this.getTransform(frameState, 0);
this.dispatchPreComposeEvent(context, frameState, transform);
// clipped rendering if layer extent is set
var extent = layerState.extent;
var clipped = extent !== undefined;
if (clipped) {
this.clip(context, frameState, /** @type {ol.Extent} */ (extent));
}
var renderMode = this.getLayer().getRenderMode();
if (renderMode !== ol.layer.VectorTile.RenderType.VECTOR) {
this.renderTileImages(context, frameState, layerState);
}
if (renderMode !== ol.layer.VectorTile.RenderType.IMAGE) {
this.renderTileReplays_(context, frameState, layerState);
}
if (clipped) {
context.restore();
}
this.dispatchPostComposeEvent(context, frameState, transform);
};
/**
* @param {CanvasRenderingContext2D} context Context.
* @param {olx.FrameState} frameState Frame state.
* @param {ol.LayerState} layerState Layer state.
* @private
*/
ol.renderer.canvas.VectorTileLayer.prototype.renderTileReplays_ = function(
context, frameState, layerState) {
var layer = this.getLayer();
var replays = ol.renderer.canvas.VectorTileLayer.VECTOR_REPLAYS[layer.getRenderMode()];
var pixelRatio = frameState.pixelRatio;
var skippedFeatureUids = layerState.managed ?
frameState.skippedFeatureUids : {};
var viewState = frameState.viewState;
var center = viewState.center;
var resolution = viewState.resolution;
var rotation = viewState.rotation;
var size = frameState.size;
var pixelScale = pixelRatio / resolution;
var source = /** @type {ol.source.VectorTile} */ (layer.getSource());
var tilePixelRatio = source.getTilePixelRatio();
var transform = this.getTransform(frameState, 0);
var replayContext;
if (layer.hasListener(ol.render.Event.Type.RENDER)) {
// resize and clear
this.context.canvas.width = context.canvas.width;
this.context.canvas.height = context.canvas.height;
replayContext = this.context;
} else {
replayContext = context;
}
// for performance reasons, context.save / context.restore is not used
// to save and restore the transformation matrix and the opacity.
// see http://jsperf.com/context-save-restore-versus-variable
var alpha = replayContext.globalAlpha;
replayContext.globalAlpha = layerState.opacity;
/** @type {Array.<ol.VectorTile>} */
var tilesToDraw = this.renderedTiles;
var tileGrid = source.getTileGrid();
var currentZ, i, ii, offsetX, offsetY, origin, pixelSpace, replayState;
var tile, tileExtent, tilePixelResolution, tileResolution, tileTransform;
for (i = 0, ii = tilesToDraw.length; i < ii; ++i) {
tile = tilesToDraw[i];
replayState = tile.getReplayState();
tileExtent = tileGrid.getTileCoordExtent(
tile.getTileCoord(), this.tmpExtent);
currentZ = tile.getTileCoord()[0];
pixelSpace = tile.getProjection().getUnits() == ol.proj.Units.TILE_PIXELS;
tileResolution = tileGrid.getResolution(currentZ);
tilePixelResolution = tileResolution / tilePixelRatio;
offsetX = Math.round(pixelRatio * size[0] / 2);
offsetY = Math.round(pixelRatio * size[1] / 2);
if (pixelSpace) {
origin = ol.extent.getTopLeft(tileExtent);
tileTransform = ol.transform.reset(this.tmpTransform_);
tileTransform = ol.transform.compose(this.tmpTransform_,
offsetX, offsetY,
pixelScale * tilePixelResolution, pixelScale * tilePixelResolution,
rotation,
(origin[0] - center[0]) / tilePixelResolution, (center[1] - origin[1]) / tilePixelResolution);
} else {
tileTransform = transform;
}
ol.render.canvas.rotateAtOffset(replayContext, -rotation, offsetX, offsetY);
replayState.replayGroup.replay(replayContext, pixelRatio,
tileTransform, rotation, skippedFeatureUids, replays);
ol.render.canvas.rotateAtOffset(replayContext, rotation, offsetX, offsetY);
}
if (replayContext != context) {
this.dispatchRenderEvent(replayContext, frameState, transform);
context.drawImage(replayContext.canvas, 0, 0);
}
replayContext.globalAlpha = alpha;
};
/**
* @param {ol.VectorTile} tile Tile.
* @param {olx.FrameState} frameState Frame state.
* @private
*/
ol.renderer.canvas.VectorTileLayer.prototype.createReplayGroup = function(tile,
ol.renderer.canvas.VectorTileLayer.prototype.createReplayGroup_ = function(tile,
frameState) {
var layer = this.getLayer();
var pixelRatio = frameState.pixelRatio;
@@ -204,12 +88,11 @@ ol.renderer.canvas.VectorTileLayer.prototype.createReplayGroup = function(tile,
var source = /** @type {ol.source.VectorTile} */ (layer.getSource());
var tileGrid = source.getTileGrid();
var tileCoord = tile.getTileCoord();
var tileCoord = tile.tileCoord;
var tileProjection = tile.getProjection();
var pixelSpace = tileProjection.getUnits() == ol.proj.Units.TILE_PIXELS;
var resolution = tileGrid.getResolution(tileCoord[0]);
var extent, reproject, tileResolution;
if (pixelSpace) {
if (tileProjection.getUnits() == ol.proj.Units.TILE_PIXELS) {
var tilePixelRatio = tileResolution = source.getTilePixelRatio();
var tileSize = ol.size.toSize(tileGrid.getTileSize(tileCoord[0]));
extent = [0, 0, tileSize[0] * tilePixelRatio, tileSize[1] * tilePixelRatio];
@@ -275,6 +158,21 @@ ol.renderer.canvas.VectorTileLayer.prototype.createReplayGroup = function(tile,
};
/**
* @inheritDoc
*/
ol.renderer.canvas.VectorTileLayer.prototype.drawTileImage = function(
tile, frameState, layerState, x, y, w, h, gutter) {
var vectorTile = /** @type {ol.VectorTile} */ (tile);
this.createReplayGroup_(vectorTile, frameState);
var layer = this.getLayer();
if (layer.getRenderMode() != ol.layer.VectorTile.RenderType.VECTOR) {
this.renderTileImage_(vectorTile, frameState, layerState);
}
ol.renderer.canvas.TileLayer.prototype.drawTileImage.apply(this, arguments);
};
/**
* @inheritDoc
*/
@@ -295,9 +193,8 @@ ol.renderer.canvas.VectorTileLayer.prototype.forEachFeatureAtCoordinate = functi
var tile, tileCoord, tileExtent, tilePixelRatio, tileResolution;
for (i = 0, ii = replayables.length; i < ii; ++i) {
tile = replayables[i];
tileCoord = tile.getTileCoord();
tileExtent = source.getTileGrid().getTileCoordExtent(tileCoord,
this.tmpExtent);
tileCoord = tile.tileCoord;
tileExtent = source.getTileGrid().getTileCoordExtent(tileCoord, this.tmpExtent);
if (!ol.extent.containsCoordinate(tileExtent, coordinate)) {
continue;
}
@@ -332,6 +229,41 @@ ol.renderer.canvas.VectorTileLayer.prototype.forEachFeatureAtCoordinate = functi
};
/**
* @param {ol.Tile} tile Tile.
* @param {olx.FrameState} frameState Frame state.
* @return {ol.Transform} transform Transform.
* @private
*/
ol.renderer.canvas.VectorTileLayer.prototype.getReplayTransform_ = function(tile, frameState) {
if (tile.getProjection().getUnits() == ol.proj.Units.TILE_PIXELS) {
var layer = this.getLayer();
var source = /** @type {ol.source.VectorTile} */ (layer.getSource());
var tileGrid = source.getTileGrid();
var tileCoord = tile.tileCoord;
var tileResolution =
tileGrid.getResolution(tileCoord[0]) / source.getTilePixelRatio();
var viewState = frameState.viewState;
var pixelRatio = frameState.pixelRatio;
var renderResolution = viewState.resolution / pixelRatio;
var tileExtent = tileGrid.getTileCoordExtent(tileCoord, this.tmpExtent);
var center = viewState.center;
var origin = ol.extent.getTopLeft(tileExtent);
var size = frameState.size;
var offsetX = Math.round(pixelRatio * size[0] / 2);
var offsetY = Math.round(pixelRatio * size[1] / 2);
return ol.transform.compose(this.tmpTransform_,
offsetX, offsetY,
tileResolution / renderResolution, tileResolution / renderResolution,
viewState.rotation,
(origin[0] - center[0]) / tileResolution,
(center[1] - origin[1]) / tileResolution);
} else {
return this.getTransform(frameState, 0);
}
};
/**
* Handle changes in image style state.
* @param {ol.events.Event} event Image style change event.
@@ -345,17 +277,53 @@ ol.renderer.canvas.VectorTileLayer.prototype.handleStyleImageChange_ = function(
/**
* @inheritDoc
*/
ol.renderer.canvas.VectorTileLayer.prototype.prepareFrame = function(frameState, layerState) {
var prepared = ol.renderer.canvas.TileLayer.prototype.prepareFrame.call(this, frameState, layerState);
if (prepared) {
var skippedFeatures = Object.keys(frameState.skippedFeatureUids_ || {});
for (var i = 0, ii = this.renderedTiles.length; i < ii; ++i) {
var tile = /** @type {ol.VectorTile} */ (this.renderedTiles[i]);
this.createReplayGroup(tile, frameState);
this.renderTileImage_(tile, frameState, layerState, skippedFeatures);
ol.renderer.canvas.VectorTileLayer.prototype.postCompose = function(context, frameState, layerState) {
var renderMode = this.getLayer().getRenderMode();
var replays = ol.renderer.canvas.VectorTileLayer.VECTOR_REPLAYS[renderMode];
if (replays) {
var pixelRatio = frameState.pixelRatio;
var rotation = frameState.viewState.rotation;
var size = frameState.size;
var offsetX = Math.round(pixelRatio * size[0] / 2);
var offsetY = Math.round(pixelRatio * size[1] / 2);
var tiles = this.renderedTiles;
var clips = [];
var zs = [];
for (var i = tiles.length - 1; i >= 0; --i) {
var tile = /** @type {ol.VectorTile} */ (tiles[i]);
// Create a clip mask for regions in this low resolution tile that are
// already filled by a higher resolution tile
var transform = this.getReplayTransform_(tile, frameState);
var currentClip = tile.getReplayState().replayGroup.getClipCoords(transform);
var currentZ = tile.tileCoord[0];
context.save();
context.globalAlpha = layerState.opacity;
ol.render.canvas.rotateAtOffset(context, -rotation, offsetX, offsetY);
for (var j = 0, jj = clips.length; j < jj; ++j) {
var clip = clips[j];
if (currentZ < zs[j]) {
context.beginPath();
// counter-clockwise (outer ring) for current tile
context.moveTo(currentClip[0], currentClip[1]);
context.lineTo(currentClip[2], currentClip[3]);
context.lineTo(currentClip[4], currentClip[5]);
context.lineTo(currentClip[6], currentClip[7]);
// clockwise (inner ring) for higher resolution tile
context.moveTo(clip[6], clip[7]);
context.lineTo(clip[4], clip[5]);
context.lineTo(clip[2], clip[3]);
context.lineTo(clip[0], clip[1]);
context.clip();
}
}
var replayGroup = tile.getReplayState().replayGroup;
replayGroup.replay(context, pixelRatio, transform, rotation, {}, replays);
context.restore();
clips.push(currentClip);
zs.push(currentZ);
}
}
return prepared;
ol.renderer.canvas.TileLayer.prototype.postCompose.apply(this, arguments);
};
@@ -391,57 +359,38 @@ ol.renderer.canvas.VectorTileLayer.prototype.renderFeature = function(feature, s
* @param {ol.VectorTile} tile Tile.
* @param {olx.FrameState} frameState Frame state.
* @param {ol.LayerState} layerState Layer state.
* @param {Array.<string>} skippedFeatures Skipped features.
* @private
*/
ol.renderer.canvas.VectorTileLayer.prototype.renderTileImage_ = function(
tile, frameState, layerState, skippedFeatures) {
tile, frameState, layerState) {
var layer = this.getLayer();
var replays = ol.renderer.canvas.VectorTileLayer.IMAGE_REPLAYS[layer.getRenderMode()];
if (!replays) {
// do not create an image in 'vector' mode
return;
}
var pixelRatio = frameState.pixelRatio;
var replayState = tile.getReplayState();
var revision = layer.getRevision();
if (!ol.array.equals(replayState.skippedFeatures, skippedFeatures) ||
replayState.renderedTileRevision !== revision) {
replayState.skippedFeatures = skippedFeatures;
var replays = ol.renderer.canvas.VectorTileLayer.IMAGE_REPLAYS[layer.getRenderMode()];
if (replays && replayState.renderedTileRevision !== revision) {
replayState.renderedTileRevision = revision;
var tileContext = tile.getContext();
var tileCoord = tile.tileCoord;
var z = tile.tileCoord[0];
var pixelRatio = frameState.pixelRatio;
var source = layer.getSource();
var tileGrid = source.getTileGrid();
var currentZ = tile.getTileCoord()[0];
var resolution = tileGrid.getResolution(currentZ);
var tileSize = ol.size.toSize(tileGrid.getTileSize(currentZ));
var tileResolution = tileGrid.getResolution(currentZ);
var resolutionRatio = tileResolution / resolution;
var width = tileSize[0] * pixelRatio * resolutionRatio;
var height = tileSize[1] * pixelRatio * resolutionRatio;
tileContext.canvas.width = width / resolutionRatio + 0.5;
tileContext.canvas.height = height / resolutionRatio + 0.5;
tileContext.scale(1 / resolutionRatio, 1 / resolutionRatio);
tileContext.translate(width / 2, height / 2);
var pixelSpace = tile.getProjection().getUnits() == ol.proj.Units.TILE_PIXELS;
var pixelScale = pixelRatio / resolution;
var tilePixelRatio = source.getTilePixelRatio();
var tilePixelResolution = tileResolution / tilePixelRatio;
var tileExtent = tileGrid.getTileCoordExtent(
tile.getTileCoord(), this.tmpExtent);
var tileTransform = ol.transform.reset(this.tmpTransform_);
if (pixelSpace) {
ol.transform.scale(tileTransform,
pixelScale * tilePixelResolution, pixelScale * tilePixelResolution);
ol.transform.translate(tileTransform,
-tileSize[0] * tilePixelRatio / 2, -tileSize[1] * tilePixelRatio / 2);
var transform = ol.transform.reset(this.tmpTransform_);
if (tile.getProjection().getUnits() == ol.proj.Units.TILE_PIXELS) {
var renderPixelRatio = pixelRatio / tilePixelRatio;
ol.transform.scale(transform, renderPixelRatio, renderPixelRatio);
} else {
var tileCenter = ol.extent.getCenter(tileExtent);
ol.transform.scale(tileTransform, pixelScale, -pixelScale);
ol.transform.translate(tileTransform, -tileCenter[0], -tileCenter[1]);
var resolution = tileGrid.getResolution(z);
var pixelScale = pixelRatio / resolution;
var tileExtent = tileGrid.getTileCoordExtent(tileCoord, this.tmpExtent);
ol.transform.scale(transform, pixelScale, -pixelScale);
ol.transform.translate(transform, -tileExtent[0], -tileExtent[3]);
}
replayState.replayGroup.replay(tileContext, pixelRatio,
tileTransform, 0, frameState.skippedFeatureUids || {}, replays);
var context = tile.getContext();
var size = source.getTilePixelSize(z, pixelRatio, frameState.viewState.projection);
context.canvas.width = size[0];
context.canvas.height = size[1];
replayState.replayGroup.replay(context, pixelRatio, transform, 0, {}, replays);
}
};

12
test/spec/ol/renderer/canvas/tilelayer.test.js
View File

@@ -32,15 +32,18 @@ describe('ol.renderer.canvas.TileLayer', function() {
renderer.renderedTiles = [];
var frameState = {
viewState: {
center: [2, 3],
center: [10, 5],
projection: ol.proj.get('EPSG:3857'),
resolution: 1,
rotation: Math.PI
},
size: [10, 10],
extent: [0, 0, 20, 10],
size: [20, 10],
pixelRatio: 2,
coordinateToPixelTransform: ol.transform.create(),
pixelToCoordinateTransform: ol.transform.create()
pixelToCoordinateTransform: ol.transform.create(),
usedTiles: {},
wantedTiles: {}
};
renderer.getImageTransform = function() {
return ol.transform.create();
@@ -62,8 +65,9 @@ describe('ol.renderer.canvas.TileLayer', function() {
return img;
}
}];
renderer.prepareFrame(frameState, layerState);
renderer.composeFrame(frameState, layerState, context);
expect(context.drawImage.firstCall.args[0].width).to.be(112);
expect(context.drawImage.firstCall.args[0].width).to.be(17);
});
});

8
test/spec/ol/renderer/canvas/vectortilelayer.test.js
View File

@@ -89,7 +89,7 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
it('does not render images for pure vector rendering', function() {
layer.renderMode_ = 'vector';
var spy = sinon.spy(ol.renderer.canvas.VectorTileLayer.prototype,
'renderTileImages');
'renderTileImage_');
map.renderSync();
expect(spy.callCount).to.be(0);
spy.restore();
@@ -98,7 +98,7 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
it('does not render replays for pure image rendering', function() {
layer.renderMode_ = 'image';
var spy = sinon.spy(ol.renderer.canvas.VectorTileLayer.prototype,
'renderTileReplays_');
'getReplayTransform_');
map.renderSync();
expect(spy.callCount).to.be(0);
spy.restore();
@@ -106,9 +106,9 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
it('renders both replays and images for hybrid rendering', function() {
var spy1 = sinon.spy(ol.renderer.canvas.VectorTileLayer.prototype,
'renderTileReplays_');
'getReplayTransform_');
var spy2 = sinon.spy(ol.renderer.canvas.VectorTileLayer.prototype,
'renderTileImages');
'renderTileImage_');
map.renderSync();
expect(spy1.callCount).to.be(1);
expect(spy2.callCount).to.be(1);

BIN
test_rendering/spec/ol/layer/expected/2-layers-canvas-extent-rotate-hidpi.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB