Use tile position coordinates for clip geometry outer ring

This commit is contained in:
Andreas Hocevar
2016-02-29 21:28:20 +01:00
parent 8553da6679
commit 23172a3695

View File

@@ -101,21 +101,30 @@ ol.renderer.canvas.TileLayer.prototype.composeFrame = function(
tile = tilesToDraw[i]; tile = tilesToDraw[i];
tileExtent = tileGrid.getTileCoordExtent( tileExtent = tileGrid.getTileCoordExtent(
tile.getTileCoord(), this.tmpExtent_); tile.getTileCoord(), this.tmpExtent_);
currentZ = tile.getTileCoord()[0];
// Calculate all insert points by tile widths from a common origin to avoid
// gaps caused by rounding
origin = ol.extent.getBottomLeft(tileGrid.getTileCoordExtent(
tileGrid.getTileCoordForCoordAndZ(center, currentZ)));
w = Math.round(ol.extent.getWidth(tileExtent) * pixelScale);
h = Math.round(ol.extent.getHeight(tileExtent) * pixelScale);
left = Math.round((tileExtent[0] - origin[0]) * pixelScale / w) * w +
offsetX + Math.round((origin[0] - center[0]) * pixelScale);
top = Math.round((origin[1] - tileExtent[3]) * pixelScale / h) * h +
offsetY + Math.round((center[1] - origin[1]) * pixelScale);
clipExtents = this.clipExtents_[tile.tileCoord.toString()]; clipExtents = this.clipExtents_[tile.tileCoord.toString()];
if (clipExtents) { if (clipExtents) {
// 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();
renderContext.beginPath(); renderContext.beginPath();
renderContext.moveTo((tileExtent[0] - center[0]) * pixelScale + offsetX, // counter-clockwise (outer ring) for current tile
(center[1] - tileExtent[1]) * pixelScale + offsetY); renderContext.moveTo(left + w, top);
renderContext.lineTo((tileExtent[2] - center[0]) * pixelScale + offsetX, renderContext.lineTo(left, top);
(center[1] - tileExtent[1]) * pixelScale + offsetY); renderContext.lineTo(left, top + h);
renderContext.lineTo((tileExtent[2] - center[0]) * pixelScale + offsetX, renderContext.lineTo(left + w, top + h);
(center[1] - tileExtent[3]) * pixelScale + offsetY);
renderContext.lineTo((tileExtent[0] - center[0]) * pixelScale + offsetX,
(center[1] - tileExtent[3]) * pixelScale + offsetY);
renderContext.closePath(); renderContext.closePath();
// clockwise (inner rings) for lower resolution tiles
for (j = 0, jj = clipExtents.length; j < jj; ++j) { for (j = 0, jj = clipExtents.length; j < jj; ++j) {
clipExtent = clipExtents[j]; clipExtent = clipExtents[j];
renderContext.moveTo((clipExtent[0] - center[0]) * pixelScale + offsetX, renderContext.moveTo((clipExtent[0] - center[0]) * pixelScale + offsetX,
@@ -130,17 +139,6 @@ ol.renderer.canvas.TileLayer.prototype.composeFrame = function(
} }
renderContext.clip(); renderContext.clip();
} }
currentZ = tile.getTileCoord()[0];
// Calculate all insert points by tile widths from a common origin to avoid
// gaps caused by rounding
origin = ol.extent.getBottomLeft(tileGrid.getTileCoordExtent(
tileGrid.getTileCoordForCoordAndZ(center, currentZ)));
w = Math.round(ol.extent.getWidth(tileExtent) * pixelScale);
h = Math.round(ol.extent.getHeight(tileExtent) * pixelScale);
left = Math.round((tileExtent[0] - origin[0]) * pixelScale / w) * w +
offsetX + Math.round((origin[0] - center[0]) * pixelScale);
top = Math.round((origin[1] - tileExtent[3]) * pixelScale / h) * h +
offsetY + Math.round((center[1] - origin[1]) * pixelScale);
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);