Introduce new overlaps option for Vector and VectorTile sources

Instead of deciding whether to batch fills and strokes by looking at the
opacity of the style, we now rely on user input.
This commit is contained in:
Andreas Hocevar
2016-04-18 10:41:00 +02:00
parent eed52552a9
commit 7e940e618e
15 changed files with 131 additions and 62 deletions

View File

@@ -190,16 +190,6 @@ ol.color.fromStringInternal_ = function(s) {
};
/**
* @param {ol.ColorLike|string} color Color.
* @return {boolean} Is rgba.
*/
ol.color.isRgba = function(color) {
return Array.isArray(color) && color.length == 4 ||
typeof color == 'string' && ol.color.rgbaColorRe_.test(color);
};
/**
* @param {ol.Color} color Color.
* @return {boolean} Is valid.

View File

@@ -52,10 +52,11 @@ ol.render.canvas.Instruction = {
* @param {number} tolerance Tolerance.
* @param {ol.Extent} maxExtent Maximum extent.
* @param {number} resolution Resolution.
* @param {boolean} overlaps The replay can have overlapping geometries.
* @protected
* @struct
*/
ol.render.canvas.Replay = function(tolerance, maxExtent, resolution) {
ol.render.canvas.Replay = function(tolerance, maxExtent, resolution, overlaps) {
ol.render.VectorContext.call(this);
/**
@@ -75,7 +76,7 @@ ol.render.canvas.Replay = function(tolerance, maxExtent, resolution) {
* @protected
* @type {boolean}
*/
this.transparency = false;
this.overlaps = overlaps;
/**
* @private
@@ -266,7 +267,7 @@ ol.render.canvas.Replay.prototype.replay_ = function(
var pendingFill = 0;
var pendingStroke = 0;
var batchSize =
this.instructions != instructions || this.transparency ? 0 : 200;
this.instructions != instructions || this.overlaps ? 0 : 200;
while (i < ii) {
var instruction = instructions[i];
var type = /** @type {ol.render.canvas.Instruction} */ (instruction[0]);
@@ -691,11 +692,12 @@ ol.render.canvas.Replay.prototype.getBufferedMaxExtent = function() {
* @param {number} tolerance Tolerance.
* @param {ol.Extent} maxExtent Maximum extent.
* @param {number} resolution Resolution.
* @param {boolean} overlaps The replay can have overlapping geometries.
* @protected
* @struct
*/
ol.render.canvas.ImageReplay = function(tolerance, maxExtent, resolution) {
ol.render.canvas.Replay.call(this, tolerance, maxExtent, resolution);
ol.render.canvas.ImageReplay = function(tolerance, maxExtent, resolution, overlaps) {
ol.render.canvas.Replay.call(this, tolerance, maxExtent, resolution, overlaps);
/**
* @private
@@ -957,12 +959,13 @@ ol.render.canvas.ImageReplay.prototype.setImageStyle = function(imageStyle) {
* @param {number} tolerance Tolerance.
* @param {ol.Extent} maxExtent Maximum extent.
* @param {number} resolution Resolution.
* @param {boolean} overlaps The replay can have overlapping geometries.
* @protected
* @struct
*/
ol.render.canvas.LineStringReplay = function(tolerance, maxExtent, resolution) {
ol.render.canvas.LineStringReplay = function(tolerance, maxExtent, resolution, overlaps) {
ol.render.canvas.Replay.call(this, tolerance, maxExtent, resolution);
ol.render.canvas.Replay.call(this, tolerance, maxExtent, resolution, overlaps);
/**
* @private
@@ -1191,12 +1194,13 @@ ol.render.canvas.LineStringReplay.prototype.setFillStrokeStyle = function(fillSt
* @param {number} tolerance Tolerance.
* @param {ol.Extent} maxExtent Maximum extent.
* @param {number} resolution Resolution.
* @param {boolean} overlaps The replay can have overlapping geometries.
* @protected
* @struct
*/
ol.render.canvas.PolygonReplay = function(tolerance, maxExtent, resolution) {
ol.render.canvas.PolygonReplay = function(tolerance, maxExtent, resolution, overlaps) {
ol.render.canvas.Replay.call(this, tolerance, maxExtent, resolution);
ol.render.canvas.Replay.call(this, tolerance, maxExtent, resolution, overlaps);
/**
* @private
@@ -1457,10 +1461,6 @@ ol.render.canvas.PolygonReplay.prototype.setFillStrokeStyle = function(fillStyle
var fillStyleColor = fillStyle.getColor();
state.fillStyle = ol.colorlike.asColorLike(fillStyleColor ?
fillStyleColor : ol.render.canvas.defaultFillStyle);
if (!this.transparency && ol.color.isRgba(state.fillStyle)) {
this.transparency = ol.color.asArray(
/** @type {ol.Color|string} */ (state.fillStyle))[0] != 1;
}
} else {
state.fillStyle = undefined;
}
@@ -1468,9 +1468,6 @@ ol.render.canvas.PolygonReplay.prototype.setFillStrokeStyle = function(fillStyle
var strokeStyleColor = strokeStyle.getColor();
state.strokeStyle = ol.color.asString(strokeStyleColor ?
strokeStyleColor : ol.render.canvas.defaultStrokeStyle);
if (!this.transparency && ol.color.isRgba(state.strokeStyle)) {
this.transparency = ol.color.asArray(state.strokeStyle)[3] != 1;
}
var strokeStyleLineCap = strokeStyle.getLineCap();
state.lineCap = strokeStyleLineCap !== undefined ?
strokeStyleLineCap : ol.render.canvas.defaultLineCap;
@@ -1553,12 +1550,13 @@ ol.render.canvas.PolygonReplay.prototype.setFillStrokeStyles_ = function() {
* @param {number} tolerance Tolerance.
* @param {ol.Extent} maxExtent Maximum extent.
* @param {number} resolution Resolution.
* @param {boolean} overlaps The replay can have overlapping geometries.
* @protected
* @struct
*/
ol.render.canvas.TextReplay = function(tolerance, maxExtent, resolution) {
ol.render.canvas.TextReplay = function(tolerance, maxExtent, resolution, overlaps) {
ol.render.canvas.Replay.call(this, tolerance, maxExtent, resolution);
ol.render.canvas.Replay.call(this, tolerance, maxExtent, resolution, overlaps);
/**
* @private
@@ -1862,10 +1860,12 @@ ol.render.canvas.TextReplay.prototype.setTextStyle = function(textStyle) {
* @param {number} tolerance Tolerance.
* @param {ol.Extent} maxExtent Max extent.
* @param {number} resolution Resolution.
* @param {boolean} overlaps The replay group can have overlapping geometries.
* @param {number=} opt_renderBuffer Optional rendering buffer.
* @struct
*/
ol.render.canvas.ReplayGroup = function(tolerance, maxExtent, resolution, opt_renderBuffer) {
ol.render.canvas.ReplayGroup = function(
tolerance, maxExtent, resolution, overlaps, opt_renderBuffer) {
ol.render.ReplayGroup.call(this);
/**
@@ -1880,6 +1880,12 @@ ol.render.canvas.ReplayGroup = function(tolerance, maxExtent, resolution, opt_re
*/
this.maxExtent_ = maxExtent;
/**
* @private
* @type {boolean}
*/
this.overlaps_ = overlaps;
/**
* @private
* @type {number}
@@ -1999,7 +2005,7 @@ ol.render.canvas.ReplayGroup.prototype.getReplay = function(zIndex, replayType)
replayType +
' constructor missing from ol.render.canvas.BATCH_CONSTRUCTORS_');
replay = new Constructor(this.tolerance_, this.maxExtent_,
this.resolution_);
this.resolution_, this.overlaps_);
replays[replayType] = replay;
}
return replay;
@@ -2113,7 +2119,7 @@ ol.render.canvas.ReplayGroup.prototype.replayHitDetection_ = function(
* @private
* @type {Object.<ol.render.ReplayType,
* function(new: ol.render.canvas.Replay, number, ol.Extent,
* number)>}
* number, boolean)>}
*/
ol.render.canvas.BATCH_CONSTRUCTORS_ = {
'Image': ol.render.canvas.ImageReplay,

View File

@@ -271,7 +271,7 @@ ol.renderer.canvas.VectorLayer.prototype.prepareFrame = function(frameState, lay
var replayGroup =
new ol.render.canvas.ReplayGroup(
ol.renderer.vector.getTolerance(resolution, pixelRatio), extent,
resolution, vectorLayer.getRenderBuffer());
resolution, vectorSource.getOverlaps(), vectorLayer.getRenderBuffer());
vectorSource.loadFeatures(extent, resolution, projection);
/**
* @param {ol.Feature} feature Feature.

View File

@@ -207,7 +207,7 @@ ol.renderer.canvas.VectorTileLayer.prototype.createReplayGroup = function(tile,
}
replayState.dirty = false;
var replayGroup = new ol.render.canvas.ReplayGroup(0, extent,
tileResolution, layer.getRenderBuffer());
tileResolution, source.getOverlaps(), layer.getRenderBuffer());
var squaredTolerance = ol.renderer.vector.getSquaredTolerance(
tileResolution, pixelRatio);

View File

@@ -259,7 +259,7 @@ ol.renderer.dom.VectorLayer.prototype.prepareFrame = function(frameState, layerS
var replayGroup =
new ol.render.canvas.ReplayGroup(
ol.renderer.vector.getTolerance(resolution, pixelRatio), extent,
resolution, vectorLayer.getRenderBuffer());
resolution, vectorSource.getOverlaps(), vectorLayer.getRenderBuffer());
vectorSource.loadFeatures(extent, resolution, projection);
/**
* @param {ol.Feature} feature Feature.

View File

@@ -113,7 +113,7 @@ ol.source.ImageVector.prototype.canvasFunctionInternal_ = function(extent, resol
var replayGroup = new ol.render.canvas.ReplayGroup(
ol.renderer.vector.getTolerance(resolution, pixelRatio), extent,
resolution, this.renderBuffer_);
resolution, this.source_.getOverlaps(), this.renderBuffer_);
this.source_.loadFeatures(extent, resolution, projection);

View File

@@ -94,6 +94,12 @@ ol.source.Vector = function(opt_options) {
*/
this.format_ = options.format;
/**
* @private
* @type {boolean}
*/
this.overlaps_ = options.overlaps == undefined ? true : options.overlaps;
/**
* @private
* @type {string|ol.FeatureUrlFunction|undefined}
@@ -695,6 +701,14 @@ ol.source.Vector.prototype.getFormat = function() {
};
/**
* @return {boolean} The source can have overlapping geometries.
*/
ol.source.Vector.prototype.getOverlaps = function() {
return this.overlaps_;
};
/**
* Get the url associated with this source.
*

View File

@@ -52,6 +52,12 @@ ol.source.VectorTile = function(options) {
*/
this.format_ = options.format ? options.format : null;
/**
* @private
* @type {boolean}
*/
this.overlaps_ = options.overlaps || true;
/**
* @protected
* @type {function(new: ol.VectorTile, ol.TileCoord, ol.Tile.State, string,
@@ -63,6 +69,14 @@ ol.source.VectorTile = function(options) {
ol.inherits(ol.source.VectorTile, ol.source.UrlTile);
/**
* @return {boolean} The source can have overlapping geometries.
*/
ol.source.VectorTile.prototype.getOverlaps = function() {
return this.overlaps_;
};
/**
* @inheritDoc
*/