diff --git a/examples/street-labels.js b/examples/street-labels.js index 5aa5c71789..4a909ac6d3 100644 --- a/examples/street-labels.js +++ b/examples/street-labels.js @@ -25,7 +25,8 @@ function collectDrawData(letter, x, y, angle) { } var style = new ol.style.Style({ - renderer: function(coords, geometry, feature) { + renderer: function(coords, context) { + var feature = context.feature; var text = feature.get('name'); if (text) { // Only create label when geometry has a long and straight segment diff --git a/examples/vector-label-decluttering.js b/examples/vector-label-decluttering.js index 9a50d04dd9..574fd6db97 100644 --- a/examples/vector-label-decluttering.js +++ b/examples/vector-label-decluttering.js @@ -70,9 +70,9 @@ var styles = [ }) }), new ol.style.Style({ - renderer: function(coord, geometry, feature, state) { + renderer: function(coords, state) { var pixelRatio = state.pixelRatio; - var text = feature.get('name'); + var text = state.feature.get('name'); var canvas = textCache[text]; if (!canvas) { // Draw the label to its own canvas and cache it. @@ -87,7 +87,7 @@ var styles = [ context.fillText(text, 0, 0); } // The 3rd value of the coordinate is the measure of the extent width - var extentWidth = geometry.getCoordinates()[2] / resolution * pixelRatio; + var extentWidth = state.geometry.getCoordinates()[2] / resolution * pixelRatio; if (extentWidth > canvas.width) { // Only consider labels not wider than their country's bounding box createLabel(canvas, text, coord); diff --git a/externs/olx.js b/externs/olx.js index 7f31fbdcea..19adf59a9e 100644 --- a/externs/olx.js +++ b/externs/olx.js @@ -4402,6 +4402,8 @@ olx.render; /** * @typedef {{context: CanvasRenderingContext2D, + * feature: (ol.Feature|ol.render.Feature), + * geometry: ol.geom.SimpleGeometry, * pixelRatio: number, * resolution: number, * rotation: number}} diff --git a/src/ol/render/canvas/replay.js b/src/ol/render/canvas/replay.js index 406a77585d..08713d9595 100644 --- a/src/ol/render/canvas/replay.js +++ b/src/ol/render/canvas/replay.js @@ -90,7 +90,7 @@ ol.render.canvas.Replay = function(tolerance, maxExtent, resolution, overlaps) { /** * @private - * @type {ol.Coordinate|Array.|Array.>} + * @type {Object.|Array.>>} */ this.coordinateCache_ = {}; @@ -326,16 +326,14 @@ ol.render.canvas.Replay.prototype.replay_ = function( var prevX, prevY, roundX, roundY; var pendingFill = 0; var pendingStroke = 0; + var coordinateCache = this.coordinateCache_; - /** - * @type {olx.render.State} - */ - var state = { + var state = /** @type {olx.render.State} */ ({ context: context, pixelRatio: pixelRatio, resolution: this.resolution, rotation: viewRotation - }; + }); // When the batch size gets too big, performance decreases. 200 is a good // balance between batch size and number of fill/stroke instructions. @@ -344,7 +342,7 @@ ol.render.canvas.Replay.prototype.replay_ = function( while (i < ii) { var instruction = instructions[i]; var type = /** @type {ol.render.canvas.Instruction} */ (instruction[0]); - var feature, fill, stroke, text, x, y; + var /** @type {ol.Feature|ol.render.Feature} */ feature, fill, stroke, text, x, y; switch (type) { case ol.render.canvas.Instruction.BEGIN_GEOMETRY: feature = /** @type {ol.Feature|ol.render.Feature} */ (instruction[1]); @@ -396,17 +394,21 @@ ol.render.canvas.Replay.prototype.replay_ = function( dd = instruction[2]; var geometry = /** @type {ol.geom.SimpleGeometry} */ (instruction[3]); var renderer = instruction[4]; - var coords; - if (instruction.length == 6) { - var fn = instruction[5]; - if (!(d in this.coordinateCache_)) { - this.coordinateCache_[d] = []; - } - coords = fn(pixelCoordinates, d, dd, 2, this.coordinateCache_[d]); - } else { - coords = pixelCoordinates.slice(d, dd); + var fn = instruction.length == 6 ? instruction[5] : undefined; + state.geometry = geometry; + state.feature = feature; + if (!(i in coordinateCache)) { + coordinateCache[i] = []; } - renderer(coords, geometry, feature, state); + var coords = coordinateCache[i]; + if (fn) { + fn(pixelCoordinates, d, dd, 2, coords); + } else { + coords[0] = pixelCoordinates[d]; + coords[1] = pixelCoordinates[d + 1]; + coords.length = 2; + } + renderer(coords, state); ++i; break; case ol.render.canvas.Instruction.DRAW_IMAGE: diff --git a/src/ol/typedefs.js b/src/ol/typedefs.js index ec24160a3e..92e0a6cdbd 100644 --- a/src/ol/typedefs.js +++ b/src/ol/typedefs.js @@ -627,14 +627,12 @@ ol.StyleGeometryFunction; /** - * Custom renderer function. Takes 4 arguments: + * Custom renderer function. Takes two arguments: * * 1. The pixel coordinates of the geometry in GeoJSON notation. - * 2. The original {@link ol.geom.SimpleGeometry}. - * 3. The underlying {@link ol.Feature} or {@link ol.render.Feature}. - * 4. The {@link olx.render.State} of the layer renderer. + * 2. The {@link olx.render.State} of the layer renderer. * - * @typedef {function(Array,ol.geom.SimpleGeometry,(ol.Feature|ol.render.Feature),olx.render.State)} + * @typedef {function((ol.Coordinate|Array|Array.>),olx.render.State)} */ ol.StyleRenderFunction; diff --git a/test/spec/ol/renderer/canvas/replay.test.js b/test/spec/ol/renderer/canvas/replay.test.js index 6398f5b55b..65ddd21f59 100644 --- a/test/spec/ol/renderer/canvas/replay.test.js +++ b/test/spec/ol/renderer/canvas/replay.test.js @@ -207,9 +207,19 @@ describe('ol.render.canvas.ReplayGroup', function() { }); it('calls the renderer function configured for the style', function() { - var spy = sinon.spy(); + var calls = []; var style = new ol.style.Style({ - renderer: spy + renderer: function(coords, state) { + calls.push({ + coords: coords, + geometry: state.geometry, + feature: state.feature, + context: state.context, + pixelRatio: state.pixelRatio, + rotation: state.rotation, + resolution: state.resolution + }); + } }); var point = new ol.Feature(new ol.geom.Point([45, 90])); var multipoint = new ol.Feature(new ol.geom.MultiPoint( @@ -233,24 +243,28 @@ describe('ol.render.canvas.ReplayGroup', function() { ol.renderer.vector.renderFeature(replay, geometrycollection, style, 1); ol.transform.scale(transform, 0.1, 0.1); replay.replay(context, 1, transform, 0, {}); - expect(spy.callCount).to.be(9); - expect(spy.firstCall.args.length).to.be(4); - expect(spy.firstCall.args[1]).to.be(point.getGeometry()); - expect(spy.firstCall.args[2]).to.be(point); - expect(spy.firstCall.args[3].context).to.be(context); - expect(spy.firstCall.args[3].pixelRatio).to.be(1); - expect(spy.firstCall.args[3].rotation).to.be(0); - expect(spy.firstCall.args[3].resolution).to.be(1); - expect(spy.getCall(0).args[0]).to.eql([4.5, 9]); - expect(spy.getCall(1).args[0][0]).to.eql([4.5, 9]); - expect(spy.getCall(2).args[0][0]).to.eql([4.5, 9]); - expect(spy.getCall(3).args[0][0][0]).to.eql([4.5, 9]); - expect(spy.getCall(4).args[0][0][0]).to.eql([-9, -4.5]); - expect(spy.getCall(5).args[0][0][0][0]).to.eql([-9, -4.5]); - expect(spy.getCall(6).args[2]).to.be(geometrycollection); - expect(spy.getCall(6).args[1].getCoordinates()).to.eql([45, 90]); - expect(spy.getCall(7).args[1].getCoordinates()[0]).to.eql([45, 90]); - expect(spy.getCall(8).args[1].getCoordinates()[0][0]).to.eql([-90, -45]); + expect(calls.length).to.be(9); + expect(calls[0].geometry).to.be(point.getGeometry()); + expect(calls[0].feature).to.be(point); + expect(calls[0].context).to.be(context); + expect(calls[0].pixelRatio).to.be(1); + expect(calls[0].rotation).to.be(0); + expect(calls[0].resolution).to.be(1); + expect(calls[0].coords).to.eql([4.5, 9]); + expect(calls[1].feature).to.be(multipoint); + expect(calls[1].coords[0]).to.eql([4.5, 9]); + expect(calls[2].feature).to.be(linestring); + expect(calls[2].coords[0]).to.eql([4.5, 9]); + expect(calls[3].feature).to.be(multilinestring); + expect(calls[3].coords[0][0]).to.eql([4.5, 9]); + expect(calls[4].feature).to.be(polygon); + expect(calls[4].coords[0][0]).to.eql([-9, -4.5]); + expect(calls[5].feature).to.be(multipolygon); + expect(calls[5].coords[0][0][0]).to.eql([-9, -4.5]); + expect(calls[6].feature).to.be(geometrycollection); + expect(calls[6].geometry.getCoordinates()).to.eql([45, 90]); + expect(calls[7].geometry.getCoordinates()[0]).to.eql([45, 90]); + expect(calls[8].geometry.getCoordinates()[0][0]).to.eql([-90, -45]); }); });