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

Simplify the renderer function API

Browse Source
This commit is contained in:
Andreas Hocevar
2017-08-04 22:52:08 +02:00
parent 67aa1a6dc9
commit 617151c8ff
6 changed files with 63 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
examples/street-labels.js
View File

@@ -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

6
examples/vector-label-decluttering.js
View File

@@ -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);

2
externs/olx.js
View File

@@ -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}}

32
src/ol/render/canvas/replay.js
View File

@@ -90,7 +90,7 @@ ol.render.canvas.Replay = function(tolerance, maxExtent, resolution, overlaps) {
/**
* @private
* @type {ol.Coordinate|Array.<ol.Coordinate>|Array.<Array.<ol.Coordinate>>}
* @type {Object.<number,ol.Coordinate|Array.<ol.Coordinate>|Array.<Array.<ol.Coordinate>>>}
*/
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] = [];
var fn = instruction.length == 6 ? instruction[5] : undefined;
state.geometry = geometry;
state.feature = feature;
if (!(i in coordinateCache)) {
coordinateCache[i] = [];
}
coords = fn(pixelCoordinates, d, dd, 2, this.coordinateCache_[d]);
var coords = coordinateCache[i];
if (fn) {
fn(pixelCoordinates, d, dd, 2, coords);
} else {
coords = pixelCoordinates.slice(d, dd);
coords[0] = pixelCoordinates[d];
coords[1] = pixelCoordinates[d + 1];
coords.length = 2;
}
renderer(coords, geometry, feature, state);
renderer(coords, state);
++i;
break;
case ol.render.canvas.Instruction.DRAW_IMAGE:

8
src/ol/typedefs.js
View File

@@ -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<ol.Coordinate>|Array.<Array.<ol.Coordinate>>),olx.render.State)}
*/
ol.StyleRenderFunction;

54
test/spec/ol/renderer/canvas/replay.test.js
View File

@@ -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]);
});
});