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

Merge pull request #11148 from ahocevar/vectortile-label-flicker

Browse Source 
Vectortile label flicker
This commit is contained in:
Andreas Hocevar
2020-06-13 08:28:22 +02:00
committed by GitHub
parent e6fe0fc5ad e3c2142cab
commit 00dc86c8c6
4 changed files with 150 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files
rendering/cases/layer-mapbox-vector/expected.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 72 KiB

After

Width:  |  Height:  |  Size: 76 KiB

src/ol/render/canvas/BuilderGroup.js
+3 -4
View File
@@ -7,7 +7,6 @@ import ImageBuilder from './ImageBuilder.js';
import LineStringBuilder from './LineStringBuilder.js'; import LineStringBuilder from './LineStringBuilder.js';
import PolygonBuilder from './PolygonBuilder.js'; import PolygonBuilder from './PolygonBuilder.js';
import TextBuilder from './TextBuilder.js'; import TextBuilder from './TextBuilder.js';
import {createEmpty} from '../../extent.js';
/** /**
* @type {Object<import("./BuilderType").default, typeof Builder>} * @type {Object<import("./BuilderType").default, typeof Builder>}
@@ -78,15 +77,15 @@ class BuilderGroup {
* @return {import("../canvas").DeclutterGroups} The resulting instruction groups. * @return {import("../canvas").DeclutterGroups} The resulting instruction groups.
*/ */
addDeclutter(group) { addDeclutter(group) {
/** @type {Array<*>} */
let declutter = null; let declutter = null;
if (this.declutter_) { if (this.declutter_) {
if (group) { if (group) {
declutter = this.declutterGroups_; declutter = this.declutterGroups_;
/** @type {number} */ (declutter[0][4])++; /** @type {number} */ (declutter[0][0])++;
} else { } else {
declutter = [createEmpty()]; declutter = [[1]];
this.declutterGroups_ = declutter; this.declutterGroups_ = declutter;
declutter[0].push(1);
} }
} }
return declutter; return declutter;
src/ol/render/canvas/Executor.js
+141 -105
View File
@@ -14,8 +14,8 @@ import {
import { import {
createEmpty, createEmpty,
createOrUpdate, createOrUpdate,
createOrUpdateEmpty, getHeight,
extend, getWidth,
intersects, intersects,
} from '../../extent.js'; } from '../../extent.js';
import { import {
@@ -69,8 +69,9 @@ class Executor {
* @param {number} pixelRatio Pixel ratio. * @param {number} pixelRatio Pixel ratio.
* @param {boolean} overlaps The replay can have overlapping geometries. * @param {boolean} overlaps The replay can have overlapping geometries.
* @param {SerializableInstructions} instructions The serializable instructions * @param {SerializableInstructions} instructions The serializable instructions
* @param {import("../../size.js").Size} renderBuffer Render buffer (width/height) in pixels.
*/ */
constructor(resolution, pixelRatio, overlaps, instructions) { constructor(resolution, pixelRatio, overlaps, instructions, renderBuffer) {
/** /**
* @protected * @protected
* @type {boolean} * @type {boolean}
@@ -119,6 +120,12 @@ class Executor {
*/ */
this.coordinateCache_ = {}; this.coordinateCache_ = {};
/**
* @private
* @type {import("../../size.js").Size}
*/
this.renderBuffer_ = renderBuffer;
/** /**
* @private * @private
* @type {!import("../../transform.js").Transform} * @type {!import("../../transform.js").Transform}
@@ -316,6 +323,7 @@ class Executor {
* @param {Array<number>} padding Padding. * @param {Array<number>} padding Padding.
* @param {Array<*>} fillInstruction Fill instruction. * @param {Array<*>} fillInstruction Fill instruction.
* @param {Array<*>} strokeInstruction Stroke instruction. * @param {Array<*>} strokeInstruction Stroke instruction.
* @return {boolean} The image or label was rendered.
*/ */
replayImageOrLabel_( replayImageOrLabel_(
context, context,
@@ -397,15 +405,26 @@ class Executor {
} else { } else {
createOrUpdate(boxX, boxY, boxX + boxW, boxY + boxH, tmpExtent); createOrUpdate(boxX, boxY, boxX + boxW, boxY + boxH, tmpExtent);
} }
this.renderBuffer_[0] = Math.max(
this.renderBuffer_[0],
getWidth(tmpExtent)
);
this.renderBuffer_[1] = Math.max(
this.renderBuffer_[1],
getHeight(tmpExtent)
);
const canvas = context.canvas; const canvas = context.canvas;
const strokePadding = strokeInstruction const strokePadding = strokeInstruction
? (strokeInstruction[2] * scale) / 2 ? (strokeInstruction[2] * scale) / 2
: 0; : 0;
const renderBuffer = this.renderBuffer_;
const intersects = const intersects =
tmpExtent[0] - strokePadding <= canvas.width / contextScale && tmpExtent[0] - strokePadding <=
tmpExtent[2] + strokePadding >= 0 && (canvas.width + renderBuffer[0]) / contextScale &&
tmpExtent[1] - strokePadding <= canvas.height / contextScale && tmpExtent[2] + strokePadding >= -renderBuffer[0] / contextScale &&
tmpExtent[3] + strokePadding >= 0; tmpExtent[1] - strokePadding <=
(canvas.height + renderBuffer[1]) / contextScale &&
tmpExtent[3] + strokePadding >= -renderBuffer[1] / contextScale;
if (snapToPixel) { if (snapToPixel) {
x = Math.round(x); x = Math.round(x);
@@ -413,10 +432,9 @@ class Executor {
} }
if (declutterGroup) { if (declutterGroup) {
if (!intersects && declutterGroup[4] == 1) { if (!intersects && declutterGroup[0] == 1) {
return; return false;
} }
extend(declutterGroup, tmpExtent);
const declutterArgs = intersects const declutterArgs = intersects
? [ ? [
context, context,
@@ -430,6 +448,7 @@ class Executor {
x, x,
y, y,
scale, scale,
tmpExtent.slice(),
] ]
: null; : null;
if (declutterArgs) { if (declutterArgs) {
@@ -472,6 +491,7 @@ class Executor {
scale scale
); );
} }
return true;
} }
/** /**
@@ -517,51 +537,57 @@ class Executor {
* @return {?} Declutter tree. * @return {?} Declutter tree.
*/ */
renderDeclutter(declutterGroup, feature, opacity, declutterTree) { renderDeclutter(declutterGroup, feature, opacity, declutterTree) {
if (declutterGroup && declutterGroup.length > 5) { /** @type {Array<import("../../structs/RBush.js").Entry>} */
const groupCount = declutterGroup[4]; const boxes = [];
if (groupCount == 1 || groupCount == declutterGroup.length - 5) { for (let i = 1, ii = declutterGroup.length; i < ii; ++i) {
/** @type {import("../../structs/RBush.js").Entry} */ const declutterData = declutterGroup[i];
const box = { const box = declutterData[11];
minX: /** @type {number} */ (declutterGroup[0]), boxes.push({
minY: /** @type {number} */ (declutterGroup[1]), minX: box[0],
maxX: /** @type {number} */ (declutterGroup[2]), minY: box[1],
maxY: /** @type {number} */ (declutterGroup[3]), maxX: box[2],
value: feature, maxY: box[3],
}; value: feature,
if (!declutterTree) { });
declutterTree = new RBush(9); }
} if (!declutterTree) {
if (!declutterTree.collides(box)) { declutterTree = new RBush(9);
declutterTree.insert(box); }
for (let j = 5, jj = declutterGroup.length; j < jj; ++j) { let collides = false;
const declutterData = /** @type {Array} */ (declutterGroup[j]); for (let i = 0, ii = boxes.length; i < ii; ++i) {
const context = declutterData[0]; if (declutterTree.collides(boxes[i])) {
const currentAlpha = context.globalAlpha; collides = true;
if (currentAlpha !== opacity) { break;
context.globalAlpha = opacity;
}
if (declutterData.length > 11) {
this.replayTextBackground_(
declutterData[0],
declutterData[13],
declutterData[14],
declutterData[15],
declutterData[16],
declutterData[11],
declutterData[12],
true
);
}
drawImageOrLabel.apply(undefined, declutterData);
if (currentAlpha !== opacity) {
context.globalAlpha = currentAlpha;
}
}
}
declutterGroup.length = 5;
createOrUpdateEmpty(declutterGroup);
} }
} }
if (!collides) {
declutterTree.load(boxes);
for (let j = 1, jj = declutterGroup.length; j < jj; ++j) {
const declutterData = /** @type {Array} */ (declutterGroup[j]);
const context = declutterData[0];
const currentAlpha = context.globalAlpha;
if (currentAlpha !== opacity) {
context.globalAlpha = opacity;
}
if (declutterData.length > 12) {
this.replayTextBackground_(
declutterData[0],
declutterData[14],
declutterData[15],
declutterData[16],
declutterData[17],
declutterData[12],
declutterData[13],
true
);
}
drawImageOrLabel.apply(undefined, declutterData);
if (currentAlpha !== opacity) {
context.globalAlpha = currentAlpha;
}
}
}
declutterGroup.length = 1;
return declutterTree; return declutterTree;
} }
@@ -828,14 +854,12 @@ class Executor {
} }
if (declutterGroups) { if (declutterGroups) {
const index = Math.floor(declutterGroupIndex); const index = Math.floor(declutterGroupIndex);
if (declutterGroups.length < index + 1) { declutterGroup =
declutterGroup = createEmpty(); declutterGroups.length < index + 1
declutterGroup.push(declutterGroups[0][4]); ? [declutterGroups[0][0]]
declutterGroups.push(declutterGroup); : declutterGroups[index];
}
declutterGroup = declutterGroups[index];
} }
this.replayImageOrLabel_( const rendered = this.replayImageOrLabel_(
context, context,
contextScale, contextScale,
pixelCoordinates[d], pixelCoordinates[d],
@@ -860,11 +884,18 @@ class Executor {
? /** @type {Array<*>} */ (lastStrokeInstruction) ? /** @type {Array<*>} */ (lastStrokeInstruction)
: null : null
); );
if (
rendered &&
declutterGroup &&
declutterGroups[declutterGroups.length - 1] !== declutterGroup
) {
declutterGroups.push(declutterGroup);
}
if (declutterGroup) { if (declutterGroup) {
if (declutterGroupIndex === Math.floor(declutterGroupIndex)) { if (declutterGroup.length - 1 === declutterGroup[0]) {
this.declutterItems.push(this, declutterGroup, feature); this.declutterItems.push(this, declutterGroup, feature);
} }
declutterGroupIndex += 1 / declutterGroup[4]; declutterGroupIndex += 1 / declutterGroup[0];
} }
} }
++i; ++i;
@@ -917,6 +948,7 @@ class Executor {
cachedWidths cachedWidths
); );
if (parts) { if (parts) {
let rendered = false;
let c, cc, chars, label, part; let c, cc, chars, label, part;
if (strokeKey) { if (strokeKey) {
for (c = 0, cc = parts.length; c < cc; ++c) { for (c = 0, cc = parts.length; c < cc; ++c) {
@@ -928,27 +960,28 @@ class Executor {
baseline * label.height + baseline * label.height +
(0.5 - baseline) * 2 * strokeWidth - (0.5 - baseline) * 2 * strokeWidth -
offsetY; offsetY;
this.replayImageOrLabel_( rendered =
context, this.replayImageOrLabel_(
contextScale, context,
/** @type {number} */ (part[0]), contextScale,
/** @type {number} */ (part[1]), /** @type {number} */ (part[0]),
label, /** @type {number} */ (part[1]),
anchorX, label,
anchorY, anchorX,
declutterGroup, anchorY,
label.height, declutterGroup,
1, label.height,
0, 1,
0, 0,
/** @type {number} */ (part[3]), 0,
pixelRatioScale, /** @type {number} */ (part[3]),
false, pixelRatioScale,
label.width, false,
defaultPadding, label.width,
null, defaultPadding,
null null,
); null
) || rendered;
} }
} }
if (fillKey) { if (fillKey) {
@@ -958,32 +991,35 @@ class Executor {
label = this.createLabel(chars, textKey, fillKey, ''); label = this.createLabel(chars, textKey, fillKey, '');
anchorX = /** @type {number} */ (part[2]); anchorX = /** @type {number} */ (part[2]);
anchorY = baseline * label.height - offsetY; anchorY = baseline * label.height - offsetY;
this.replayImageOrLabel_( rendered =
context, this.replayImageOrLabel_(
contextScale, context,
/** @type {number} */ (part[0]), contextScale,
/** @type {number} */ (part[1]), /** @type {number} */ (part[0]),
label, /** @type {number} */ (part[1]),
anchorX, label,
anchorY, anchorX,
declutterGroup, anchorY,
label.height, declutterGroup,
1, label.height,
0, 1,
0, 0,
/** @type {number} */ (part[3]), 0,
pixelRatioScale, /** @type {number} */ (part[3]),
false, pixelRatioScale,
label.width, false,
defaultPadding, label.width,
null, defaultPadding,
null null,
); null
) || rendered;
} }
} }
if (rendered) {
this.declutterItems.push(this, declutterGroup, feature);
}
} }
} }
this.declutterItems.push(this, declutterGroup, feature);
++i; ++i;
break; break;
case CanvasInstruction.END_GEOMETRY: case CanvasInstruction.END_GEOMETRY:
src/ol/render/canvas/ExecutorGroup.js
+6 -4
View File
@@ -126,13 +126,15 @@ class ExecutorGroup {
this.executorsByZIndex_[zIndex] = executors; this.executorsByZIndex_[zIndex] = executors;
} }
const instructionByZindex = allInstructions[zIndex]; const instructionByZindex = allInstructions[zIndex];
const renderBuffer = [this.renderBuffer_ || 0, this.renderBuffer_ || 0];
for (const builderType in instructionByZindex) { for (const builderType in instructionByZindex) {
const instructions = instructionByZindex[builderType]; const instructions = instructionByZindex[builderType];
executors[builderType] = new Executor( executors[builderType] = new Executor(
this.resolution_, this.resolution_,
this.pixelRatio_, this.pixelRatio_,
this.overlaps_, this.overlaps_,
instructions instructions,
renderBuffer
); );
} }
} }
@@ -476,15 +478,15 @@ export function replayDeclutter(
let currentExecutor; let currentExecutor;
for (let i = 0, ii = executorData.length; i < ii; ) { for (let i = 0, ii = executorData.length; i < ii; ) {
const executor = executorData[i++]; const executor = executorData[i++];
if (executor !== currentExecutor) { const transform = executorData[i++];
executor.execute(context, 1, transform, rotation, snapToPixel);
if (executor !== currentExecutor && executor.declutterItems.length > 0) {
currentExecutor = executor; currentExecutor = executor;
declutterItems.push({ declutterItems.push({
items: executor.declutterItems, items: executor.declutterItems,
opacity: opacity, opacity: opacity,
}); });
} }
const transform = executorData[i++];
executor.execute(context, 1, transform, rotation, snapToPixel);
} }
} }
} }