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

Fix clipping and clearing

Browse Source
This commit is contained in:
ahocevar
2019-06-23 14:23:32 +02:00
parent 4d2fa476a3
commit 9cd35d67a9
1 changed files with 28 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/ol/renderer/canvas/TileLayer.js
View File

@@ -7,6 +7,7 @@ import TileState from '../../TileState.js';
import {createEmpty, equals, getIntersection, getTopLeft} from '../../extent.js'; import {createEmpty, equals, getIntersection, getTopLeft} from '../../extent.js';
import CanvasLayerRenderer from './Layer.js'; import CanvasLayerRenderer from './Layer.js';
import {apply as applyTransform, compose as composeTransform, makeInverse, toString as transformToString} from '../../transform.js'; import {apply as applyTransform, compose as composeTransform, makeInverse, toString as transformToString} from '../../transform.js';
import {numberSafeCompareFunction} from '../../array.js';
/** /**
* @classdesc * @classdesc
@@ -303,32 +304,37 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
const h = nextY - y; const h = nextY - y;
const transition = z === currentZ; const transition = z === currentZ;
if (clips && (!transition || tile.getAlpha(getUid(this), frameState.time) === 1)) { const inTransition = transition && tile.getAlpha(getUid(this), frameState.time) !== 1;
// Clip mask for regions in this tile that already filled by a higher z tile if (!inTransition) {
context.save(); if (clips) {
currentClip = [x, y, x + w, y, x + w, y + h, x, y + h]; // Clip mask for regions in this tile that already filled by a higher z tile
for (let i = 0, ii = clips.length; i < ii; ++i) { context.save();
if (z !== currentZ && currentZ < clipZs[i]) { currentClip = [x, y, x + w, y, x + w, y + h, x, y + h];
const clip = clips[i]; for (let i = 0, ii = clips.length; i < ii; ++i) {
context.beginPath(); if (z !== currentZ && currentZ < clipZs[i]) {
// counter-clockwise (outer ring) for current tile const clip = clips[i];
context.moveTo(currentClip[0], currentClip[1]); context.beginPath();
context.lineTo(currentClip[2], currentClip[3]); // counter-clockwise (outer ring) for current tile
context.lineTo(currentClip[4], currentClip[5]); context.moveTo(currentClip[0], currentClip[1]);
context.lineTo(currentClip[6], currentClip[7]); context.lineTo(currentClip[2], currentClip[3]);
// clockwise (inner ring) for higher z tile context.lineTo(currentClip[4], currentClip[5]);
context.moveTo(clip[6], clip[7]); context.lineTo(currentClip[6], currentClip[7]);
context.lineTo(clip[4], clip[5]); // clockwise (inner ring) for higher z tile
context.lineTo(clip[2], clip[3]); context.moveTo(clip[6], clip[7]);
context.lineTo(clip[0], clip[1]); context.lineTo(clip[4], clip[5]);
context.clip(); context.lineTo(clip[2], clip[3]);
context.lineTo(clip[0], clip[1]);
context.clip();
}
} }
clips.push(currentClip);
clipZs.push(currentZ);
} else {
context.clearRect(x, y, w, h);
} }
clips.push(currentClip);
clipZs.push(currentZ);
} }
this.drawTileImage(tile, frameState, x, y, w, h, tileGutter, transition, layerState.opacity); this.drawTileImage(tile, frameState, x, y, w, h, tileGutter, transition, layerState.opacity);
if (clips) { if (clips && !inTransition) {
context.restore(); context.restore();
} }
this.renderedTiles.push(tile); this.renderedTiles.push(tile);