Use tile position coordinates for clip geometry outer ring
This commit is contained in:
@@ -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);
|
||||||
|
|||||||
Reference in New Issue
Block a user