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

Calculate low resolution tile clipping like current tile position

Browse Source
This commit is contained in:
Andreas Hocevar
2016-02-29 21:30:57 +01:00
parent 23172a3695
commit 16f63a7e0c
1 changed files with 28 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/ol/renderer/canvas/canvastilelayerrenderer.js
+28 -22
View File
@@ -26,9 +26,9 @@ ol.renderer.canvas.TileLayer = function(tileLayer) {
/** /**
* @private * @private
* @type {!Object.<string, Array.<ol.Extent>>} * @type {!Object.<string, Array.<ol.TileCoord>>}
*/ */
this.clipExtents_ = {}; this.clipTileCoords_ = {};
/** /**
* @private * @private
@@ -95,8 +95,9 @@ ol.renderer.canvas.TileLayer.prototype.composeFrame = function(
var tileGrid = source.getTileGridForProjection(projection); var tileGrid = source.getTileGridForProjection(projection);
var tilesToDraw = this.renderedTiles_; var tilesToDraw = this.renderedTiles_;
var clipExtent, clipExtents, currentZ, h, i, ii, j, jj, left, origin, tile; var clipExtent, clipH, clipLeft, clipOrigin, clipTileCoord, clipTileCoords;
var tileExtent, tilePixelSize, top, w; var clipTop, clipW, currentZ, h, i, ii, j, jj, left, origin, tile, tileExtent;
var tilePixelSize, top, w;
for (i = 0, ii = tilesToDraw.length; i < ii; ++i) { for (i = 0, ii = tilesToDraw.length; i < ii; ++i) {
tile = tilesToDraw[i]; tile = tilesToDraw[i];
tileExtent = tileGrid.getTileCoordExtent( tileExtent = tileGrid.getTileCoordExtent(
@@ -112,8 +113,8 @@ ol.renderer.canvas.TileLayer.prototype.composeFrame = function(
offsetX + Math.round((origin[0] - center[0]) * pixelScale); offsetX + Math.round((origin[0] - center[0]) * pixelScale);
top = Math.round((origin[1] - tileExtent[3]) * pixelScale / h) * h + top = Math.round((origin[1] - tileExtent[3]) * pixelScale / h) * h +
offsetY + Math.round((center[1] - origin[1]) * pixelScale); offsetY + Math.round((center[1] - origin[1]) * pixelScale);
clipExtents = this.clipExtents_[tile.tileCoord.toString()]; clipTileCoords = this.clipTileCoords_[tile.tileCoord.toString()];
if (clipExtents) { if (clipTileCoords) {
// Create a clip mask for regions in this low resolution tile that will be // Create a clip mask for regions in this low resolution tile that will be
// filled by a higher resolution tile // filled by a higher resolution tile
renderContext.save(); renderContext.save();
@@ -125,16 +126,21 @@ ol.renderer.canvas.TileLayer.prototype.composeFrame = function(
renderContext.lineTo(left + w, top + h); renderContext.lineTo(left + w, top + h);
renderContext.closePath(); renderContext.closePath();
// clockwise (inner rings) for lower resolution tiles // clockwise (inner rings) for lower resolution tiles
for (j = 0, jj = clipExtents.length; j < jj; ++j) { for (j = 0, jj = clipTileCoords.length; j < jj; ++j) {
clipExtent = clipExtents[j]; clipTileCoord = clipTileCoords[j];
renderContext.moveTo((clipExtent[0] - center[0]) * pixelScale + offsetX, clipExtent = tileGrid.getTileCoordExtent(clipTileCoord);
(center[1] - clipExtent[1]) * pixelScale + offsetY); clipOrigin = ol.extent.getBottomLeft(tileGrid.getTileCoordExtent(
renderContext.lineTo((clipExtent[0] - center[0]) * pixelScale + offsetX, tileGrid.getTileCoordForCoordAndZ(center, clipTileCoord[0])));
(center[1] - clipExtent[3]) * pixelScale + offsetY); clipW = Math.round(ol.extent.getWidth(clipExtent) * pixelScale);
renderContext.lineTo((clipExtent[2] - center[0]) * pixelScale + offsetX, clipH = Math.round(ol.extent.getHeight(clipExtent) * pixelScale);
(center[1] - clipExtent[3]) * pixelScale + offsetY); clipLeft = Math.round((clipExtent[0] - clipOrigin[0]) * pixelScale / clipW) * clipW +
renderContext.lineTo((clipExtent[2] - center[0]) * pixelScale + offsetX, offsetX + Math.round((clipOrigin[0] - center[0]) * pixelScale);
(center[1] - clipExtent[1]) * pixelScale + offsetY); clipTop = Math.round((clipOrigin[1] - clipExtent[3]) * pixelScale / clipH) * clipH +
offsetY + Math.round((center[1] - clipOrigin[1]) * pixelScale);
renderContext.moveTo(clipLeft, clipTop + clipH);
renderContext.lineTo(clipLeft, clipTop);
renderContext.lineTo(clipLeft + clipW, clipTop);
renderContext.lineTo(clipLeft + clipW, clipTop + clipH);
renderContext.closePath(); renderContext.closePath();
} }
renderContext.clip(); renderContext.clip();
@@ -142,7 +148,7 @@ ol.renderer.canvas.TileLayer.prototype.composeFrame = function(
tilePixelSize = source.getTilePixelSize(currentZ, pixelRatio, projection); tilePixelSize = source.getTilePixelSize(currentZ, pixelRatio, projection);
renderContext.drawImage(tile.getImage(), tileGutter, tileGutter, renderContext.drawImage(tile.getImage(), tileGutter, tileGutter,
tilePixelSize[0], tilePixelSize[1], left, top, w, h); tilePixelSize[0], tilePixelSize[1], left, top, w, h);
if (clipExtents) { if (clipTileCoords) {
renderContext.restore(); renderContext.restore();
} }
} }
@@ -260,9 +266,9 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame = function(
} }
} }
this.renderedTiles_ = renderables; this.renderedTiles_ = renderables;
ol.object.clear(this.clipExtents_); ol.object.clear(this.clipTileCoords_);
if (!(tileSource.getOpaque(projection) && layerState.opacity == 1)) { if (!(tileSource.getOpaque(projection) && layerState.opacity == 1)) {
var clipExtents = this.clipExtents_; var clipTileCoords = this.clipTileCoords_;
var tileCoord; var tileCoord;
for (i = renderables.length - 1; i >= 0; --i) { for (i = renderables.length - 1; i >= 0; --i) {
tileCoord = renderables[i].getTileCoord(); tileCoord = renderables[i].getTileCoord();
@@ -275,10 +281,10 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame = function(
tile = tiles[key]; tile = tiles[key];
if (tileRange.contains(tile.getTileCoord()) && if (tileRange.contains(tile.getTileCoord()) &&
tile.getState() == ol.TileState.LOADED) { tile.getState() == ol.TileState.LOADED) {
if (!(key in clipExtents)) { if (!(key in clipTileCoords)) {
clipExtents[key] = []; clipTileCoords[key] = [];
} }
clipExtents[key].push(tileGrid.getTileCoordExtent(tileCoord)); clipTileCoords[key].push(tileCoord);
return true; return true;
} }
} }