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

Merge pull request #5072 from tschaub/immediate-api

Browse Source 
Add setStyle() and drawGeometry() to the immediate rendering API.
This commit is contained in:
Tim Schaub
2016-03-18 17:18:08 -06:00
parent 109bda60d0 42c2dd8702
commit ef0487c3ab
20 changed files with 485 additions and 335 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
changelog/upgrade-notes.md
View File

@@ -1,6 +1,35 @@
## Upgrade notes
### v3.15.0
### <NEXT RELEASE>
#### Immediate rendering API
Listeners for `precompose`, `render`, and `postcompose` receive an event with a `vectorContext` property with methods for immediate vector rendering. The previous geometry drawing methods have been replaced with a single `vectorContext.drawGeometry(geometry)` method. If you were using any of the following experimental methods on the vector context, replace them with `drawGeometry`:
* Removed experimental geometry drawing methods: `drawPointGeometry`, `drawLineStringGeometry`, `drawPolygonGeometry`, `drawMultiPointGeometry`, `drawMultiLineStringGeometry`, `drawMultiPolygonGeometry`, and `drawCircleGeometry` (all have been replaced with `drawGeometry`).
In addition, the previous methods for setting style parts have been replaced with a single `vectorContext.setStyle(style)` method. If you were using any of the following experimental methods on the vector context, replace them with `setStyle`:
* Removed experimental style setting methods: `setFillStrokeStyle`, `setImageStyle`, `setTextStyle` (all have been replaced with `setStyle`).
Below is an example of how the vector context might have been used in the past:
```js
// OLD WAY, NO LONGER SUPPORTED
map.on('postcompose', function(event) {
event.vectorContext.setFillStrokeStyle(style.getFill(), style.getStroke());
event.vectorContext.drawPointGeometry(geometry);
});
```
Here is an example of how you could accomplish the same with the new methods:
```js
// NEW WAY, USE THIS INSTEAD OF THE CODE ABOVE
map.on('postcompose', function(event) {
event.vectorContext.setStyle(style);
event.vectorContext.drawGeometry(geometry);
});
```
#### Removal of `ol.DEFAULT_TILE_CACHE_HIGH_WATER_MARK`

36
examples/dynamic-data.js
View File

@@ -25,11 +25,13 @@ var map = new ol.Map({
})
});
var imageStyle = new ol.style.Circle({
radius: 5,
snapToPixel: false,
fill: new ol.style.Fill({color: 'yellow'}),
stroke: new ol.style.Stroke({color: 'red', width: 1})
var imageStyle = new ol.style.Style({
image: new ol.style.Circle({
radius: 5,
snapToPixel: false,
fill: new ol.style.Fill({color: 'yellow'}),
stroke: new ol.style.Stroke({color: 'red', width: 1})
})
});
var headInnerImageStyle = new ol.style.Style({
@@ -40,10 +42,12 @@ var headInnerImageStyle = new ol.style.Style({
})
});
var headOuterImageStyle = new ol.style.Circle({
radius: 5,
snapToPixel: false,
fill: new ol.style.Fill({color: 'black'})
var headOuterImageStyle = new ol.style.Style({
image: new ol.style.Circle({
radius: 5,
snapToPixel: false,
fill: new ol.style.Fill({color: 'black'})
})
});
var n = 200;
@@ -63,16 +67,16 @@ map.on('postcompose', function(event) {
var y = (R + r) * Math.sin(t) + p * Math.sin((R + r) * t / r);
coordinates.push([x, y]);
}
vectorContext.setImageStyle(imageStyle);
vectorContext.drawMultiPointGeometry(
new ol.geom.MultiPoint(coordinates), null);
vectorContext.setStyle(imageStyle);
vectorContext.drawGeometry(new ol.geom.MultiPoint(coordinates));
var headPoint = new ol.geom.Point(coordinates[coordinates.length - 1]);
var headFeature = new ol.Feature(headPoint);
vectorContext.drawFeature(headFeature, headInnerImageStyle);
vectorContext.setImageStyle(headOuterImageStyle);
vectorContext.drawMultiPointGeometry(headPoint, null);
vectorContext.setStyle(headOuterImageStyle);
vectorContext.drawGeometry(headPoint);
vectorContext.setStyle(headInnerImageStyle);
vectorContext.drawGeometry(headPoint);
map.render();
});

11
examples/earthquake-custom-symbol.js
View File

@@ -25,13 +25,14 @@ var styleFunction = function(feature) {
if (!style) {
var canvas =
/** @type {HTMLCanvasElement} */ (document.createElement('canvas'));
var render = ol.render.toContext(
var vectorContext = ol.render.toContext(
/** @type {CanvasRenderingContext2D} */ (canvas.getContext('2d')),
{size: [size + 2, size + 2], pixelRatio: size / 10});
render.setFillStrokeStyle(
new ol.style.Fill({color: 'rgba(255, 153, 0, 0.4)'}),
new ol.style.Stroke({color: 'rgba(255, 204, 0, 0.2)', width: 1}));
render.drawPolygonGeometry(new ol.geom.Polygon(
vectorContext.setStyle(new ol.style.Style({
fill: new ol.style.Fill({color: 'rgba(255, 153, 0, 0.4)'}),
stroke: new ol.style.Stroke({color: 'rgba(255, 204, 0, 0.2)', width: 1})
}));
vectorContext.drawGeometry(new ol.geom.Polygon(
[[[0, 0], [4, 2], [6, 0], [10, 5], [6, 3], [4, 5], [0, 0]]]));
style = new ol.style.Style({
image: new ol.style.Icon({

19
examples/feature-animation.js
View File

@@ -12,6 +12,7 @@ goog.require('ol.source.OSM');
goog.require('ol.source.Vector');
goog.require('ol.style.Circle');
goog.require('ol.style.Stroke');
goog.require('ol.style.Style');
var map = new ol.Map({
@@ -67,17 +68,19 @@ function flash(feature) {
var radius = ol.easing.easeOut(elapsedRatio) * 25 + 5;
var opacity = ol.easing.easeOut(1 - elapsedRatio);
var flashStyle = new ol.style.Circle({
radius: radius,
snapToPixel: false,
stroke: new ol.style.Stroke({
color: 'rgba(255, 0, 0, ' + opacity + ')',
width: 1
var style = new ol.style.Style({
image: new ol.style.Circle({
radius: radius,
snapToPixel: false,
stroke: new ol.style.Stroke({
color: 'rgba(255, 0, 0, ' + opacity + ')',
width: 0.25 + opacity
})
})
});
vectorContext.setImageStyle(flashStyle);
vectorContext.drawPointGeometry(flashGeom, null);
vectorContext.setStyle(style);
vectorContext.drawGeometry(flashGeom);
if (elapsed > duration) {
ol.Observable.unByKey(listenerKey);
return;

22
examples/flight-animation.js
View File

@@ -27,12 +27,11 @@ var map = new ol.Map({
})
});
var defaultStroke = new ol.style.Stroke({
color: '#EAE911',
width: 2
});
var defaultStyle = new ol.style.Style({
stroke: defaultStroke
var style = new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#EAE911',
width: 2
})
});
var flightsSource;
@@ -47,14 +46,13 @@ var pointsPerMs = 0.1;
var animateFlights = function(event) {
var vectorContext = event.vectorContext;
var frameState = event.frameState;
vectorContext.setFillStrokeStyle(null, defaultStroke);
vectorContext.setStyle(style);
var features = flightsSource.getFeatures();
for (var i = 0; i < features.length; i++) {
var feature = features[i];
if (!feature.get('finished')) {
// only draw the lines for which the animation has not
// finished yet
// only draw the lines for which the animation has not finished yet
var coords = feature.getGeometry().getCoordinates();
var elapsedTime = frameState.time - feature.get('start');
var elapsedPoints = elapsedTime * pointsPerMs;
@@ -67,10 +65,10 @@ var animateFlights = function(event) {
var currentLine = new ol.geom.LineString(coords.slice(0, maxIndex));
// directly draw the line with the vector context
vectorContext.drawLineStringGeometry(currentLine, feature);
vectorContext.drawGeometry(currentLine);
}
}
// tell OL3 to continue the postcompose animation
// tell OL3 to continue the animation
map.render();
};
@@ -119,7 +117,7 @@ var flightsLayer = new ol.layer.Vector({
// if the animation is still active for a feature, do not
// render the feature with the layer style
if (feature.get('finished')) {
return defaultStyle;
return style;
} else {
return null;
}

28
examples/igc.js
View File

@@ -152,27 +152,26 @@ map.on('click', function(evt) {
displaySnap(evt.coordinate);
});
var imageStyle = new ol.style.Circle({
radius: 5,
fill: null,
stroke: new ol.style.Stroke({
color: 'rgba(255,0,0,0.9)',
width: 1
})
});
var strokeStyle = new ol.style.Stroke({
var stroke = new ol.style.Stroke({
color: 'rgba(255,0,0,0.9)',
width: 1
})
var style = new ol.style.Style({
stroke: stroke,
image: new ol.style.Circle({
radius: 5,
fill: null,
stroke: stroke
})
});
map.on('postcompose', function(evt) {
var vectorContext = evt.vectorContext;
vectorContext.setStyle(style);
if (point !== null) {
vectorContext.setImageStyle(imageStyle);
vectorContext.drawPointGeometry(point);
vectorContext.drawGeometry(point);
}
if (line !== null) {
vectorContext.setFillStrokeStyle(null, strokeStyle);
vectorContext.drawLineStringGeometry(line);
vectorContext.drawGeometry(line);
}
});
@@ -184,8 +183,7 @@ var featureOverlay = new ol.layer.Vector({
radius: 5,
fill: new ol.style.Fill({
color: 'rgba(255,0,0,0.9)'
}),
stroke: null
})
})
})
});

24
examples/render-geometry.js
View File

@@ -5,21 +5,25 @@ goog.require('ol.render');
goog.require('ol.style.Circle');
goog.require('ol.style.Fill');
goog.require('ol.style.Stroke');
goog.require('ol.style.Style');
var canvas = document.getElementById('canvas');
var render = ol.render.toContext(canvas.getContext('2d'), {size: [100, 100]});
var vectorContext = ol.render.toContext(canvas.getContext('2d'), {size: [100, 100]});
var fill = new ol.style.Fill({color: 'blue'});
var stroke = new ol.style.Stroke({color: 'black'});
render.setFillStrokeStyle(fill, stroke);
render.setImageStyle(new ol.style.Circle({
radius: 10,
var style = new ol.style.Style({
fill: fill,
stroke: stroke
}));
stroke: stroke,
image: new ol.style.Circle({
radius: 10,
fill: fill,
stroke: stroke
})
})
vectorContext.setStyle(style);
render.drawLineStringGeometry(new ol.geom.LineString([[10, 10], [90, 90]]));
render.drawPolygonGeometry(
new ol.geom.Polygon([[[2, 2], [98, 2], [2, 98], [2, 2]]]));
render.drawPointGeometry(new ol.geom.Point([88, 88]));
vectorContext.drawGeometry(new ol.geom.LineString([[10, 10], [90, 90]]));
vectorContext.drawGeometry(new ol.geom.Polygon([[[2, 2], [98, 2], [2, 98], [2, 2]]]));
vectorContext.drawGeometry(new ol.geom.Point([88, 88]));

25
examples/synthetic-points.js
View File

@@ -96,27 +96,26 @@ map.on('click', function(evt) {
displaySnap(evt.coordinate);
});
var imageStyle = new ol.style.Circle({
radius: 10,
fill: null,
stroke: new ol.style.Stroke({
color: 'rgba(255,255,0,0.9)',
width: 3
})
});
var strokeStyle = new ol.style.Stroke({
var stroke = new ol.style.Stroke({
color: 'rgba(255,255,0,0.9)',
width: 3
});
var style = new ol.style.Style({
stroke: stroke,
image: new ol.style.Circle({
radius: 10,
stroke: stroke
})
});
map.on('postcompose', function(evt) {
var vectorContext = evt.vectorContext;
vectorContext.setStyle(style);
if (point !== null) {
vectorContext.setImageStyle(imageStyle);
vectorContext.drawPointGeometry(point);
vectorContext.drawGeometry(point);
}
if (line !== null) {
vectorContext.setFillStrokeStyle(null, strokeStyle);
vectorContext.drawLineStringGeometry(line);
vectorContext.drawGeometry(line);
}
});

4
src/ol/graticule.js
View File

@@ -442,11 +442,11 @@ ol.Graticule.prototype.handlePostCompose_ = function(e) {
var i, l, line;
for (i = 0, l = this.meridians_.length; i < l; ++i) {
line = this.meridians_[i];
vectorContext.drawLineStringGeometry(line, null);
vectorContext.drawLineString(line, null);
}
for (i = 0, l = this.parallels_.length; i < l; ++i) {
line = this.parallels_[i];
vectorContext.drawLineStringGeometry(line, null);
vectorContext.drawLineString(line, null);
}
};

2
src/ol/render.js
View File

@@ -16,7 +16,7 @@ goog.require('ol.vec.Mat4');
* var render = ol.render.toContext(canvas.getContext('2d'),
* { size: [100, 100] });
* render.setFillStrokeStyle(new ol.style.Fill({ color: blue }));
* render.drawPolygonGeometry(
* render.drawPolygon(
* new ol.geom.Polygon([[[0, 0], [100, 100], [100, 0], [0, 0]]]));
* ```
*

190
src/ol/render/canvas/canvasimmediate.js
View File

@@ -10,6 +10,7 @@ goog.require('ol.array');
goog.require('ol.color');
goog.require('ol.colorlike');
goog.require('ol.extent');
goog.require('ol.geom.GeometryType');
goog.require('ol.geom.flat.transform');
goog.require('ol.has');
goog.require('ol.render.VectorContext');
@@ -425,11 +426,11 @@ ol.render.canvas.Immediate.prototype.drawAsync = function(zIndex, callback) {
* Render a circle geometry into the canvas. Rendering is immediate and uses
* the current fill and stroke styles.
*
* @param {ol.geom.Circle} circleGeometry Circle geometry.
* @param {ol.geom.Circle} geometry Circle geometry.
* @api
*/
ol.render.canvas.Immediate.prototype.drawCircleGeometry = function(circleGeometry) {
if (!ol.extent.intersects(this.extent_, circleGeometry.getExtent())) {
ol.render.canvas.Immediate.prototype.drawCircle = function(geometry) {
if (!ol.extent.intersects(this.extent_, geometry.getExtent())) {
return;
}
if (this.fillState_ || this.strokeState_) {
@@ -440,7 +441,7 @@ ol.render.canvas.Immediate.prototype.drawCircleGeometry = function(circleGeometr
this.setContextStrokeState_(this.strokeState_);
}
var pixelCoordinates = ol.geom.transformSimpleGeometry2D(
circleGeometry, this.transform_, this.pixelCoordinates_);
geometry, this.transform_, this.pixelCoordinates_);
var dx = pixelCoordinates[2] - pixelCoordinates[0];
var dy = pixelCoordinates[3] - pixelCoordinates[1];
var radius = Math.sqrt(dx * dx + dy * dy);
@@ -456,7 +457,61 @@ ol.render.canvas.Immediate.prototype.drawCircleGeometry = function(circleGeometr
}
}
if (this.text_ !== '') {
this.drawText_(circleGeometry.getCenter(), 0, 2, 2);
this.drawText_(geometry.getCenter(), 0, 2, 2);
}
};
/**
* Set the rendering style. Note that since this is an immediate rendering API,
* any `zIndex` on the provided style will be ignored.
*
* @param {ol.style.Style} style The rendering style.
* @api
*/
ol.render.canvas.Immediate.prototype.setStyle = function(style) {
this.setFillStrokeStyle(style.getFill(), style.getStroke());
this.setImageStyle(style.getImage());
this.setTextStyle(style.getText());
};
/**
* Render a geometry into the canvas. Call
* {@link ol.render.canvas.Immediate#setStyle} first to set the rendering style.
*
* @param {ol.geom.Geometry|ol.render.Feature} geometry The geometry to render.
* @api
*/
ol.render.canvas.Immediate.prototype.drawGeometry = function(geometry) {
var type = geometry.getType();
switch (type) {
case ol.geom.GeometryType.POINT:
this.drawPoint(/** @type {ol.geom.Point} */ (geometry));
break;
case ol.geom.GeometryType.LINE_STRING:
this.drawLineString(/** @type {ol.geom.LineString} */ (geometry));
break;
case ol.geom.GeometryType.POLYGON:
this.drawPolygon(/** @type {ol.geom.Polygon} */ (geometry));
break;
case ol.geom.GeometryType.MULTI_POINT:
this.drawMultiPoint(/** @type {ol.geom.MultiPoint} */ (geometry));
break;
case ol.geom.GeometryType.MULTI_LINE_STRING:
this.drawMultiLineString(/** @type {ol.geom.MultiLineString} */ (geometry));
break;
case ol.geom.GeometryType.MULTI_POLYGON:
this.drawMultiPolygon(/** @type {ol.geom.MultiPolygon} */ (geometry));
break;
case ol.geom.GeometryType.GEOMETRY_COLLECTION:
this.drawGeometryCollection(/** @type {ol.geom.GeometryCollection} */ (geometry));
break;
case ol.geom.GeometryType.CIRCLE:
this.drawCircle(/** @type {ol.geom.Circle} */ (geometry));
break;
default:
goog.asserts.fail('Unsupported geometry type: ' + type);
}
};
@@ -486,11 +541,8 @@ ol.render.canvas.Immediate.prototype.drawFeature = function(feature, style) {
render.setFillStrokeStyle(style.getFill(), style.getStroke());
render.setImageStyle(style.getImage());
render.setTextStyle(style.getText());
var renderGeometry =
ol.render.canvas.Immediate.GEOMETRY_RENDERERS_[geometry.getType()];
goog.asserts.assert(renderGeometry !== undefined,
'renderGeometry should be defined');
renderGeometry.call(render, geometry, null);
goog.asserts.assert(geometry, 'geometry must be truthy');
render.drawGeometry(geometry);
});
};
@@ -499,20 +551,13 @@ ol.render.canvas.Immediate.prototype.drawFeature = function(feature, style) {
* Render a GeometryCollection to the canvas. Rendering is immediate and
* uses the current styles appropriate for each geometry in the collection.
*
* @param {ol.geom.GeometryCollection} geometryCollectionGeometry Geometry
* collection.
* @param {ol.Feature} feature Feature.
* @param {ol.geom.GeometryCollection} geometry Geometry collection.
*/
ol.render.canvas.Immediate.prototype.drawGeometryCollectionGeometry = function(geometryCollectionGeometry, feature) {
var geometries = geometryCollectionGeometry.getGeometriesArray();
ol.render.canvas.Immediate.prototype.drawGeometryCollection = function(geometry) {
var geometries = geometry.getGeometriesArray();
var i, ii;
for (i = 0, ii = geometries.length; i < ii; ++i) {
var geometry = geometries[i];
var geometryRenderer =
ol.render.canvas.Immediate.GEOMETRY_RENDERERS_[geometry.getType()];
goog.asserts.assert(geometryRenderer !== undefined,
'geometryRenderer should be defined');
geometryRenderer.call(this, geometry, feature);
this.drawGeometry(geometries[i]);
}
};
@@ -521,12 +566,11 @@ ol.render.canvas.Immediate.prototype.drawGeometryCollectionGeometry = function(g
* Render a Point geometry into the canvas. Rendering is immediate and uses
* the current style.
*
* @param {ol.geom.Point|ol.render.Feature} pointGeometry Point geometry.
* @api
* @param {ol.geom.Point|ol.render.Feature} geometry Point geometry.
*/
ol.render.canvas.Immediate.prototype.drawPointGeometry = function(pointGeometry) {
var flatCoordinates = pointGeometry.getFlatCoordinates();
var stride = pointGeometry.getStride();
ol.render.canvas.Immediate.prototype.drawPoint = function(geometry) {
var flatCoordinates = geometry.getFlatCoordinates();
var stride = geometry.getStride();
if (this.image_) {
this.drawImages_(flatCoordinates, 0, flatCoordinates.length, stride);
}
@@ -540,13 +584,11 @@ ol.render.canvas.Immediate.prototype.drawPointGeometry = function(pointGeometry)
* Render a MultiPoint geometry into the canvas. Rendering is immediate and
* uses the current style.
*
* @param {ol.geom.MultiPoint|ol.render.Feature} multiPointGeometry MultiPoint
* geometry.
* @api
* @param {ol.geom.MultiPoint|ol.render.Feature} geometry MultiPoint geometry.
*/
ol.render.canvas.Immediate.prototype.drawMultiPointGeometry = function(multiPointGeometry) {
var flatCoordinates = multiPointGeometry.getFlatCoordinates();
var stride = multiPointGeometry.getStride();
ol.render.canvas.Immediate.prototype.drawMultiPoint = function(geometry) {
var flatCoordinates = geometry.getFlatCoordinates();
var stride = geometry.getStride();
if (this.image_) {
this.drawImages_(flatCoordinates, 0, flatCoordinates.length, stride);
}
@@ -560,25 +602,23 @@ ol.render.canvas.Immediate.prototype.drawMultiPointGeometry = function(multiPoin
* Render a LineString into the canvas. Rendering is immediate and uses
* the current style.
*
* @param {ol.geom.LineString|ol.render.Feature} lineStringGeometry Line
* string geometry.
* @api
* @param {ol.geom.LineString|ol.render.Feature} geometry LineString geometry.
*/
ol.render.canvas.Immediate.prototype.drawLineStringGeometry = function(lineStringGeometry) {
if (!ol.extent.intersects(this.extent_, lineStringGeometry.getExtent())) {
ol.render.canvas.Immediate.prototype.drawLineString = function(geometry) {
if (!ol.extent.intersects(this.extent_, geometry.getExtent())) {
return;
}
if (this.strokeState_) {
this.setContextStrokeState_(this.strokeState_);
var context = this.context_;
var flatCoordinates = lineStringGeometry.getFlatCoordinates();
var flatCoordinates = geometry.getFlatCoordinates();
context.beginPath();
this.moveToLineTo_(flatCoordinates, 0, flatCoordinates.length,
lineStringGeometry.getStride(), false);
geometry.getStride(), false);
context.stroke();
}
if (this.text_ !== '') {
var flatMidpoint = lineStringGeometry.getFlatMidpoint();
var flatMidpoint = geometry.getFlatMidpoint();
this.drawText_(flatMidpoint, 0, 2, 2);
}
};
@@ -588,22 +628,21 @@ ol.render.canvas.Immediate.prototype.drawLineStringGeometry = function(lineStrin
* Render a MultiLineString geometry into the canvas. Rendering is immediate
* and uses the current style.
*
* @param {ol.geom.MultiLineString|ol.render.Feature} multiLineStringGeometry
* MultiLineString geometry.
* @api
* @param {ol.geom.MultiLineString|ol.render.Feature} geometry MultiLineString
* geometry.
*/
ol.render.canvas.Immediate.prototype.drawMultiLineStringGeometry = function(multiLineStringGeometry) {
var geometryExtent = multiLineStringGeometry.getExtent();
ol.render.canvas.Immediate.prototype.drawMultiLineString = function(geometry) {
var geometryExtent = geometry.getExtent();
if (!ol.extent.intersects(this.extent_, geometryExtent)) {
return;
}
if (this.strokeState_) {
this.setContextStrokeState_(this.strokeState_);
var context = this.context_;
var flatCoordinates = multiLineStringGeometry.getFlatCoordinates();
var flatCoordinates = geometry.getFlatCoordinates();
var offset = 0;
var ends = multiLineStringGeometry.getEnds();
var stride = multiLineStringGeometry.getStride();
var ends = geometry.getEnds();
var stride = geometry.getStride();
context.beginPath();
var i, ii;
for (i = 0, ii = ends.length; i < ii; ++i) {
@@ -613,7 +652,7 @@ ol.render.canvas.Immediate.prototype.drawMultiLineStringGeometry = function(mult
context.stroke();
}
if (this.text_ !== '') {
var flatMidpoints = multiLineStringGeometry.getFlatMidpoints();
var flatMidpoints = geometry.getFlatMidpoints();
this.drawText_(flatMidpoints, 0, flatMidpoints.length, 2);
}
};
@@ -623,12 +662,10 @@ ol.render.canvas.Immediate.prototype.drawMultiLineStringGeometry = function(mult
* Render a Polygon geometry into the canvas. Rendering is immediate and uses
* the current style.
*
* @param {ol.geom.Polygon|ol.render.Feature} polygonGeometry Polygon
* geometry.
* @api
* @param {ol.geom.Polygon|ol.render.Feature} geometry Polygon geometry.
*/
ol.render.canvas.Immediate.prototype.drawPolygonGeometry = function(polygonGeometry) {
if (!ol.extent.intersects(this.extent_, polygonGeometry.getExtent())) {
ol.render.canvas.Immediate.prototype.drawPolygon = function(geometry) {
if (!ol.extent.intersects(this.extent_, geometry.getExtent())) {
return;
}
if (this.strokeState_ || this.fillState_) {
@@ -640,8 +677,8 @@ ol.render.canvas.Immediate.prototype.drawPolygonGeometry = function(polygonGeome
}
var context = this.context_;
context.beginPath();
this.drawRings_(polygonGeometry.getOrientedFlatCoordinates(),
0, polygonGeometry.getEnds(), polygonGeometry.getStride());
this.drawRings_(geometry.getOrientedFlatCoordinates(),
0, geometry.getEnds(), geometry.getStride());
if (this.fillState_) {
context.fill();
}
@@ -650,7 +687,7 @@ ol.render.canvas.Immediate.prototype.drawPolygonGeometry = function(polygonGeome
}
}
if (this.text_ !== '') {
var flatInteriorPoint = polygonGeometry.getFlatInteriorPoint();
var flatInteriorPoint = geometry.getFlatInteriorPoint();
this.drawText_(flatInteriorPoint, 0, 2, 2);
}
};
@@ -659,11 +696,10 @@ ol.render.canvas.Immediate.prototype.drawPolygonGeometry = function(polygonGeome
/**
* Render MultiPolygon geometry into the canvas. Rendering is immediate and
* uses the current style.
* @param {ol.geom.MultiPolygon} multiPolygonGeometry MultiPolygon geometry.
* @api
* @param {ol.geom.MultiPolygon} geometry MultiPolygon geometry.
*/
ol.render.canvas.Immediate.prototype.drawMultiPolygonGeometry = function(multiPolygonGeometry) {
if (!ol.extent.intersects(this.extent_, multiPolygonGeometry.getExtent())) {
ol.render.canvas.Immediate.prototype.drawMultiPolygon = function(geometry) {
if (!ol.extent.intersects(this.extent_, geometry.getExtent())) {
return;
}
if (this.strokeState_ || this.fillState_) {
@@ -674,10 +710,10 @@ ol.render.canvas.Immediate.prototype.drawMultiPolygonGeometry = function(multiPo
this.setContextStrokeState_(this.strokeState_);
}
var context = this.context_;
var flatCoordinates = multiPolygonGeometry.getOrientedFlatCoordinates();
var flatCoordinates = geometry.getOrientedFlatCoordinates();
var offset = 0;
var endss = multiPolygonGeometry.getEndss();
var stride = multiPolygonGeometry.getStride();
var endss = geometry.getEndss();
var stride = geometry.getStride();
var i, ii;
for (i = 0, ii = endss.length; i < ii; ++i) {
var ends = endss[i];
@@ -692,7 +728,7 @@ ol.render.canvas.Immediate.prototype.drawMultiPolygonGeometry = function(multiPo
}
}
if (this.text_ !== '') {
var flatInteriorPoints = multiPolygonGeometry.getFlatInteriorPoints();
var flatInteriorPoints = geometry.getFlatInteriorPoints();
this.drawText_(flatInteriorPoints, 0, flatInteriorPoints.length, 2);
}
};
@@ -824,7 +860,6 @@ ol.render.canvas.Immediate.prototype.setContextTextState_ = function(textState)
*
* @param {ol.style.Fill} fillStyle Fill style.
* @param {ol.style.Stroke} strokeStyle Stroke style.
* @api
*/
ol.render.canvas.Immediate.prototype.setFillStrokeStyle = function(fillStyle, strokeStyle) {
if (!fillStyle) {
@@ -868,7 +903,6 @@ ol.render.canvas.Immediate.prototype.setFillStrokeStyle = function(fillStyle, st
* the image style.
*
* @param {ol.style.Image} imageStyle Image style.
* @api
*/
ol.render.canvas.Immediate.prototype.setImageStyle = function(imageStyle) {
if (!imageStyle) {
@@ -904,7 +938,6 @@ ol.render.canvas.Immediate.prototype.setImageStyle = function(imageStyle) {
* remove the text style.
*
* @param {ol.style.Text} textStyle Text style.
* @api
*/
ol.render.canvas.Immediate.prototype.setTextStyle = function(textStyle) {
if (!textStyle) {
@@ -971,24 +1004,3 @@ ol.render.canvas.Immediate.prototype.setTextStyle = function(textStyle) {
textScale : 1);
}
};
/**
* @const
* @private
* @type {Object.<ol.geom.GeometryType,
* function(this: ol.render.canvas.Immediate,
* (ol.geom.Geometry|ol.render.Feature), Object)>}
*/
ol.render.canvas.Immediate.GEOMETRY_RENDERERS_ = {
'Point': ol.render.canvas.Immediate.prototype.drawPointGeometry,
'LineString': ol.render.canvas.Immediate.prototype.drawLineStringGeometry,
'Polygon': ol.render.canvas.Immediate.prototype.drawPolygonGeometry,
'MultiPoint': ol.render.canvas.Immediate.prototype.drawMultiPointGeometry,
'MultiLineString':
ol.render.canvas.Immediate.prototype.drawMultiLineStringGeometry,
'MultiPolygon': ol.render.canvas.Immediate.prototype.drawMultiPolygonGeometry,
'GeometryCollection':
ol.render.canvas.Immediate.prototype.drawGeometryCollectionGeometry,
'Circle': ol.render.canvas.Immediate.prototype.drawCircleGeometry
};

14
src/ol/render/canvas/canvasreplay.js
View File

@@ -779,7 +779,7 @@ ol.render.canvas.ImageReplay.prototype.drawCoordinates_ = function(flatCoordinat
/**
* @inheritDoc
*/
ol.render.canvas.ImageReplay.prototype.drawPointGeometry = function(pointGeometry, feature) {
ol.render.canvas.ImageReplay.prototype.drawPoint = function(pointGeometry, feature) {
if (!this.image_) {
return;
}
@@ -831,7 +831,7 @@ ol.render.canvas.ImageReplay.prototype.drawPointGeometry = function(pointGeometr
/**
* @inheritDoc
*/
ol.render.canvas.ImageReplay.prototype.drawMultiPointGeometry = function(multiPointGeometry, feature) {
ol.render.canvas.ImageReplay.prototype.drawMultiPoint = function(multiPointGeometry, feature) {
if (!this.image_) {
return;
}
@@ -1064,7 +1064,7 @@ ol.render.canvas.LineStringReplay.prototype.setStrokeStyle_ = function() {
/**
* @inheritDoc
*/
ol.render.canvas.LineStringReplay.prototype.drawLineStringGeometry = function(lineStringGeometry, feature) {
ol.render.canvas.LineStringReplay.prototype.drawLineString = function(lineStringGeometry, feature) {
var state = this.state_;
goog.asserts.assert(state, 'state should not be null');
var strokeStyle = state.strokeStyle;
@@ -1091,7 +1091,7 @@ ol.render.canvas.LineStringReplay.prototype.drawLineStringGeometry = function(li
/**
* @inheritDoc
*/
ol.render.canvas.LineStringReplay.prototype.drawMultiLineStringGeometry = function(multiLineStringGeometry, feature) {
ol.render.canvas.LineStringReplay.prototype.drawMultiLineString = function(multiLineStringGeometry, feature) {
var state = this.state_;
goog.asserts.assert(state, 'state should not be null');
var strokeStyle = state.strokeStyle;
@@ -1267,7 +1267,7 @@ ol.render.canvas.PolygonReplay.prototype.drawFlatCoordinatess_ = function(flatCo
/**
* @inheritDoc
*/
ol.render.canvas.PolygonReplay.prototype.drawCircleGeometry = function(circleGeometry, feature) {
ol.render.canvas.PolygonReplay.prototype.drawCircle = function(circleGeometry, feature) {
var state = this.state_;
goog.asserts.assert(state, 'state should not be null');
var fillStyle = state.fillStyle;
@@ -1319,7 +1319,7 @@ ol.render.canvas.PolygonReplay.prototype.drawCircleGeometry = function(circleGeo
/**
* @inheritDoc
*/
ol.render.canvas.PolygonReplay.prototype.drawPolygonGeometry = function(polygonGeometry, feature) {
ol.render.canvas.PolygonReplay.prototype.drawPolygon = function(polygonGeometry, feature) {
var state = this.state_;
goog.asserts.assert(state, 'state should not be null');
var fillStyle = state.fillStyle;
@@ -1354,7 +1354,7 @@ ol.render.canvas.PolygonReplay.prototype.drawPolygonGeometry = function(polygonG
/**
* @inheritDoc
*/
ol.render.canvas.PolygonReplay.prototype.drawMultiPolygonGeometry = function(multiPolygonGeometry, feature) {
ol.render.canvas.PolygonReplay.prototype.drawMultiPolygon = function(multiPolygonGeometry, feature) {
var state = this.state_;
goog.asserts.assert(state, 'state should not be null');
var fillStyle = state.fillStyle;

14
src/ol/render/vector.js
View File

@@ -52,7 +52,7 @@ ol.renderer.vector.renderCircleGeometry_ = function(replayGroup, geometry, style
var polygonReplay = replayGroup.getReplay(
style.getZIndex(), ol.render.ReplayType.POLYGON);
polygonReplay.setFillStrokeStyle(fillStyle, strokeStyle);
polygonReplay.drawCircleGeometry(geometry, feature);
polygonReplay.drawCircle(geometry, feature);
}
var textStyle = style.getText();
if (textStyle) {
@@ -156,7 +156,7 @@ ol.renderer.vector.renderLineStringGeometry_ = function(replayGroup, geometry, s
var lineStringReplay = replayGroup.getReplay(
style.getZIndex(), ol.render.ReplayType.LINE_STRING);
lineStringReplay.setFillStrokeStyle(null, strokeStyle);
lineStringReplay.drawLineStringGeometry(geometry, feature);
lineStringReplay.drawLineString(geometry, feature);
}
var textStyle = style.getText();
if (textStyle) {
@@ -181,7 +181,7 @@ ol.renderer.vector.renderMultiLineStringGeometry_ = function(replayGroup, geomet
var lineStringReplay = replayGroup.getReplay(
style.getZIndex(), ol.render.ReplayType.LINE_STRING);
lineStringReplay.setFillStrokeStyle(null, strokeStyle);
lineStringReplay.drawMultiLineStringGeometry(geometry, feature);
lineStringReplay.drawMultiLineString(geometry, feature);
}
var textStyle = style.getText();
if (textStyle) {
@@ -209,7 +209,7 @@ ol.renderer.vector.renderMultiPolygonGeometry_ = function(replayGroup, geometry,
var polygonReplay = replayGroup.getReplay(
style.getZIndex(), ol.render.ReplayType.POLYGON);
polygonReplay.setFillStrokeStyle(fillStyle, strokeStyle);
polygonReplay.drawMultiPolygonGeometry(geometry, feature);
polygonReplay.drawMultiPolygon(geometry, feature);
}
var textStyle = style.getText();
if (textStyle) {
@@ -239,7 +239,7 @@ ol.renderer.vector.renderPointGeometry_ = function(replayGroup, geometry, style,
var imageReplay = replayGroup.getReplay(
style.getZIndex(), ol.render.ReplayType.IMAGE);
imageReplay.setImageStyle(imageStyle);
imageReplay.drawPointGeometry(geometry, feature);
imageReplay.drawPoint(geometry, feature);
}
var textStyle = style.getText();
if (textStyle) {
@@ -268,7 +268,7 @@ ol.renderer.vector.renderMultiPointGeometry_ = function(replayGroup, geometry, s
var imageReplay = replayGroup.getReplay(
style.getZIndex(), ol.render.ReplayType.IMAGE);
imageReplay.setImageStyle(imageStyle);
imageReplay.drawMultiPointGeometry(geometry, feature);
imageReplay.drawMultiPoint(geometry, feature);
}
var textStyle = style.getText();
if (textStyle) {
@@ -296,7 +296,7 @@ ol.renderer.vector.renderPolygonGeometry_ = function(replayGroup, geometry, styl
var polygonReplay = replayGroup.getReplay(
style.getZIndex(), ol.render.ReplayType.POLYGON);
polygonReplay.setFillStrokeStyle(fillStyle, strokeStyle);
polygonReplay.drawPolygonGeometry(geometry, feature);
polygonReplay.drawPolygon(geometry, feature);
}
var textStyle = style.getText();
if (textStyle) {

36
src/ol/render/vectorcontext.js
View File

@@ -19,11 +19,27 @@ ol.render.VectorContext = function() {
ol.render.VectorContext.prototype.drawAsync = goog.abstractMethod;
/**
* Render a geometry.
*
* @param {ol.geom.Geometry} geometry The geometry to render.
*/
ol.render.VectorContext.prototype.drawGeometry = goog.abstractMethod;
/**
* Set the rendering style.
*
* @param {ol.style.Style} style The rendering style.
*/
ol.render.VectorContext.prototype.setStyle = goog.abstractMethod;
/**
* @param {ol.geom.Circle} circleGeometry Circle geometry.
* @param {ol.Feature} feature Feature,
*/
ol.render.VectorContext.prototype.drawCircleGeometry = goog.abstractMethod;
ol.render.VectorContext.prototype.drawCircle = goog.abstractMethod;
/**
@@ -38,8 +54,7 @@ ol.render.VectorContext.prototype.drawFeature = goog.abstractMethod;
* collection.
* @param {ol.Feature} feature Feature.
*/
ol.render.VectorContext.prototype.drawGeometryCollectionGeometry =
goog.abstractMethod;
ol.render.VectorContext.prototype.drawGeometryCollection = goog.abstractMethod;
/**
@@ -47,8 +62,7 @@ ol.render.VectorContext.prototype.drawGeometryCollectionGeometry =
* string geometry.
* @param {ol.Feature|ol.render.Feature} feature Feature.
*/
ol.render.VectorContext.prototype.drawLineStringGeometry =
goog.abstractMethod;
ol.render.VectorContext.prototype.drawLineString = goog.abstractMethod;
/**
@@ -56,8 +70,7 @@ ol.render.VectorContext.prototype.drawLineStringGeometry =
* MultiLineString geometry.
* @param {ol.Feature|ol.render.Feature} feature Feature.
*/
ol.render.VectorContext.prototype.drawMultiLineStringGeometry =
goog.abstractMethod;
ol.render.VectorContext.prototype.drawMultiLineString = goog.abstractMethod;
/**
@@ -65,22 +78,21 @@ ol.render.VectorContext.prototype.drawMultiLineStringGeometry =
* geometry.
* @param {ol.Feature|ol.render.Feature} feature Feature.
*/
ol.render.VectorContext.prototype.drawMultiPointGeometry = goog.abstractMethod;
ol.render.VectorContext.prototype.drawMultiPoint = goog.abstractMethod;
/**
* @param {ol.geom.MultiPolygon} multiPolygonGeometry MultiPolygon geometry.
* @param {ol.Feature} feature Feature.
*/
ol.render.VectorContext.prototype.drawMultiPolygonGeometry =
goog.abstractMethod;
ol.render.VectorContext.prototype.drawMultiPolygon = goog.abstractMethod;
/**
* @param {ol.geom.Point|ol.render.Feature} pointGeometry Point geometry.
* @param {ol.Feature|ol.render.Feature} feature Feature.
*/
ol.render.VectorContext.prototype.drawPointGeometry = goog.abstractMethod;
ol.render.VectorContext.prototype.drawPoint = goog.abstractMethod;
/**
@@ -88,7 +100,7 @@ ol.render.VectorContext.prototype.drawPointGeometry = goog.abstractMethod;
* geometry.
* @param {ol.Feature|ol.render.Feature} feature Feature.
*/
ol.render.VectorContext.prototype.drawPolygonGeometry = goog.abstractMethod;
ol.render.VectorContext.prototype.drawPolygon = goog.abstractMethod;
/**

148
src/ol/render/webgl/webglimmediate.js
View File

@@ -1,6 +1,8 @@
goog.provide('ol.render.webgl.Immediate');
goog.require('goog.asserts');
goog.require('ol.array');
goog.require('ol.extent');
goog.require('ol.geom.GeometryType');
goog.require('ol.render.VectorContext');
goog.require('ol.render.webgl.ImageReplay');
goog.require('ol.render.webgl.ReplayGroup');
@@ -18,8 +20,7 @@ goog.require('ol.render.webgl.ReplayGroup');
* @param {number} pixelRatio Pixel ratio.
* @struct
*/
ol.render.webgl.Immediate = function(context,
center, resolution, rotation, size, extent, pixelRatio) {
ol.render.webgl.Immediate = function(context, center, resolution, rotation, size, extent, pixelRatio) {
goog.base(this);
/**
@@ -110,10 +111,39 @@ ol.render.webgl.Immediate.prototype.drawAsync = function(zIndex, callback) {
/**
* @inheritDoc
* Set the rendering style. Note that since this is an immediate rendering API,
* any `zIndex` on the provided style will be ignored.
*
* @param {ol.style.Style} style The rendering style.
* @api
*/
ol.render.webgl.Immediate.prototype.drawCircleGeometry = function(circleGeometry, data) {
ol.render.webgl.Immediate.prototype.setStyle = function(style) {
this.setImageStyle(style.getImage());
};
/**
* Render a geometry into the canvas. Call
* {@link ol.render.webgl.Immediate#setStyle} first to set the rendering style.
*
* @param {ol.geom.Geometry|ol.render.Feature} geometry The geometry to render.
* @api
*/
ol.render.webgl.Immediate.prototype.drawGeometry = function(geometry) {
var type = geometry.getType();
switch (type) {
case ol.geom.GeometryType.POINT:
this.drawPoint(/** @type {ol.geom.Point} */ (geometry), null);
break;
case ol.geom.GeometryType.MULTI_POINT:
this.drawMultiPoint(/** @type {ol.geom.MultiPoint} */ (geometry), null);
break;
case ol.geom.GeometryType.GEOMETRY_COLLECTION:
this.drawGeometryCollection(/** @type {ol.geom.GeometryCollection} */ (geometry), null);
break;
default:
goog.asserts.fail('Unsupported geometry type: ' + type);
}
};
@@ -132,52 +162,35 @@ ol.render.webgl.Immediate.prototype.drawFeature = function(feature, style) {
zIndex = 0;
}
this.drawAsync(zIndex, function(render) {
render.setFillStrokeStyle(style.getFill(), style.getStroke());
render.setImageStyle(style.getImage());
render.setTextStyle(style.getText());
var type = geometry.getType();
var renderGeometry = ol.render.webgl.Immediate.GEOMETRY_RENDERERS_[type];
// Do not assert since all kinds of geometries are not handled yet.
// In spite, render what we support.
if (renderGeometry) {
renderGeometry.call(render, geometry, null);
}
render.setStyle(style);
goog.asserts.assert(geometry, 'geometry must be truthy');
render.drawGeometry(geometry);
});
};
/**
* @inheritDoc
* @api
*/
ol.render.webgl.Immediate.prototype.drawGeometryCollectionGeometry = function(geometryCollectionGeometry, data) {
var geometries = geometryCollectionGeometry.getGeometriesArray();
var renderers = ol.render.webgl.Immediate.GEOMETRY_RENDERERS_;
ol.render.webgl.Immediate.prototype.drawGeometryCollection = function(geometry, data) {
var geometries = geometry.getGeometriesArray();
var i, ii;
for (i = 0, ii = geometries.length; i < ii; ++i) {
var geometry = geometries[i];
var geometryRenderer = renderers[geometry.getType()];
// Do not assert since all kinds of geometries are not handled yet.
// In order to support hierarchies, delegate instead what we can to
// valid renderers.
if (geometryRenderer) {
geometryRenderer.call(this, geometry, data);
}
this.drawGeometry(geometries[i]);
}
};
/**
* @inheritDoc
* @api
*/
ol.render.webgl.Immediate.prototype.drawPointGeometry = function(pointGeometry, data) {
ol.render.webgl.Immediate.prototype.drawPoint = function(geometry, data) {
var context = this.context_;
var replayGroup = new ol.render.webgl.ReplayGroup(1, this.extent_);
var replay = /** @type {ol.render.webgl.ImageReplay} */ (
replayGroup.getReplay(0, ol.render.ReplayType.IMAGE));
replay.setImageStyle(this.imageStyle_);
replay.drawPointGeometry(pointGeometry, data);
replay.drawPoint(geometry, data);
replay.finish(context);
// default colors
var opacity = 1;
@@ -193,31 +206,14 @@ ol.render.webgl.Immediate.prototype.drawPointGeometry = function(pointGeometry,
/**
* @inheritDoc
* @api
*/
ol.render.webgl.Immediate.prototype.drawLineStringGeometry = function(lineStringGeometry, data) {
};
/**
* @inheritDoc
* @api
*/
ol.render.webgl.Immediate.prototype.drawMultiLineStringGeometry = function(multiLineStringGeometry, data) {
};
/**
* @inheritDoc
* @api
*/
ol.render.webgl.Immediate.prototype.drawMultiPointGeometry = function(multiPointGeometry, data) {
ol.render.webgl.Immediate.prototype.drawMultiPoint = function(geometry, data) {
var context = this.context_;
var replayGroup = new ol.render.webgl.ReplayGroup(1, this.extent_);
var replay = /** @type {ol.render.webgl.ImageReplay} */ (
replayGroup.getReplay(0, ol.render.ReplayType.IMAGE));
replay.setImageStyle(this.imageStyle_);
replay.drawMultiPointGeometry(multiPointGeometry, data);
replay.drawMultiPoint(geometry, data);
replay.finish(context);
var opacity = 1;
var skippedFeatures = {};
@@ -232,63 +228,7 @@ ol.render.webgl.Immediate.prototype.drawMultiPointGeometry = function(multiPoint
/**
* @inheritDoc
* @api
*/
ol.render.webgl.Immediate.prototype.drawMultiPolygonGeometry = function(multiPolygonGeometry, data) {
};
/**
* @inheritDoc
* @api
*/
ol.render.webgl.Immediate.prototype.drawPolygonGeometry = function(polygonGeometry, data) {
};
/**
* @inheritDoc
* @api
*/
ol.render.webgl.Immediate.prototype.drawText = function(flatCoordinates, offset, end, stride, geometry, data) {
};
/**
* @inheritDoc
* @api
*/
ol.render.webgl.Immediate.prototype.setFillStrokeStyle = function(fillStyle, strokeStyle) {
};
/**
* @inheritDoc
* @api
*/
ol.render.webgl.Immediate.prototype.setImageStyle = function(imageStyle) {
this.imageStyle_ = imageStyle;
};
/**
* @inheritDoc
* @api
*/
ol.render.webgl.Immediate.prototype.setTextStyle = function(textStyle) {
};
/**
* @const
* @private
* @type {Object.<ol.geom.GeometryType,
* function(this: ol.render.webgl.Immediate,
* (ol.geom.Geometry|ol.render.Feature), Object)>}
*/
ol.render.webgl.Immediate.GEOMETRY_RENDERERS_ = {
'Point': ol.render.webgl.Immediate.prototype.drawPointGeometry,
'MultiPoint': ol.render.webgl.Immediate.prototype.drawMultiPointGeometry,
'GeometryCollection':
ol.render.webgl.Immediate.prototype.drawGeometryCollectionGeometry
};

4
src/ol/render/webgl/webglreplay.js
View File

@@ -370,7 +370,7 @@ ol.render.webgl.ImageReplay.prototype.drawCoordinates_ = function(flatCoordinate
/**
* @inheritDoc
*/
ol.render.webgl.ImageReplay.prototype.drawMultiPointGeometry = function(multiPointGeometry, feature) {
ol.render.webgl.ImageReplay.prototype.drawMultiPoint = function(multiPointGeometry, feature) {
this.startIndices_.push(this.indices_.length);
this.startIndicesFeature_.push(feature);
var flatCoordinates = multiPointGeometry.getFlatCoordinates();
@@ -383,7 +383,7 @@ ol.render.webgl.ImageReplay.prototype.drawMultiPointGeometry = function(multiPoi
/**
* @inheritDoc
*/
ol.render.webgl.ImageReplay.prototype.drawPointGeometry = function(pointGeometry, feature) {
ol.render.webgl.ImageReplay.prototype.drawPoint = function(pointGeometry, feature) {
this.startIndices_.push(this.indices_.length);
this.startIndicesFeature_.push(feature);
var flatCoordinates = pointGeometry.getFlatCoordinates();

154
test/spec/ol/render/canvasimmediate.test.js
View File

@@ -2,6 +2,17 @@ goog.provide('ol.test.render.canvas.Immediate');
describe('ol.render.canvas.Immediate', function() {
function getMockContext() {
return {
setLineDash: sinon.spy(),
beginPath: sinon.spy(),
closePath: sinon.spy(),
stroke: sinon.spy(),
lineTo: sinon.spy(),
moveTo: sinon.spy()
};
}
describe('constructor', function() {
it('creates an instance', function() {
var instance = new ol.render.canvas.Immediate();
@@ -25,7 +36,134 @@ describe('ol.render.canvas.Immediate', function() {
});
});
describe('#drawMultiPolygonGeometry', function() {
describe('#setStyle()', function() {
it('calls the more specific methods with style parts', function() {
var context = new ol.render.canvas.Immediate();
sinon.spy(context, 'setFillStrokeStyle');
sinon.spy(context, 'setImageStyle');
sinon.spy(context, 'setTextStyle');
var fill = new ol.style.Fill({});
var stroke = new ol.style.Stroke({});
var text = new ol.style.Text({});
var image = new ol.style.Circle({});
var style = new ol.style.Style({
fill: fill,
stroke: stroke,
image: image,
text: text
});
context.setStyle(style);
expect(context.setFillStrokeStyle.calledOnce).to.be(true);
expect(context.setFillStrokeStyle.firstCall.calledWithExactly(fill, stroke)).to.be(true);
expect(context.setImageStyle.calledOnce).to.be(true);
expect(context.setImageStyle.firstCall.calledWithExactly(image)).to.be(true);
expect(context.setTextStyle.calledOnce).to.be(true);
expect(context.setTextStyle.firstCall.calledWithExactly(text)).to.be(true);
});
});
describe('#drawGeometry()', function() {
var extent = [-10, -10, 10, 10];
it('calls drawPoint() with a Point', function() {
var context = new ol.render.canvas.Immediate(getMockContext(), 1, extent);
sinon.spy(context, 'drawPoint');
var geometry = new ol.geom.Point([1, 2]);
context.drawGeometry(geometry);
expect(context.drawPoint.calledOnce).to.be(true);
expect(context.drawPoint.firstCall.calledWithExactly(geometry)).to.be(true);
});
it('calls drawLineString() with a LineString', function() {
var context = new ol.render.canvas.Immediate(getMockContext(), 1, extent);
sinon.spy(context, 'drawLineString');
var geometry = new ol.geom.LineString([[1, 2], [3, 4]]);
context.drawGeometry(geometry);
expect(context.drawLineString.calledOnce).to.be(true);
expect(context.drawLineString.firstCall.calledWithExactly(geometry)).to.be(true);
});
it('calls drawPolygon() with a Polygon', function() {
var context = new ol.render.canvas.Immediate(getMockContext(), 1, extent);
sinon.spy(context, 'drawPolygon');
var geometry = new ol.geom.Polygon([[[1, 2], [3, 4], [5, 6], [1, 2]]]);
context.drawGeometry(geometry);
expect(context.drawPolygon.calledOnce).to.be(true);
expect(context.drawPolygon.firstCall.calledWithExactly(geometry)).to.be(true);
});
it('calls drawMultiPoint() with a MultiPoint', function() {
var context = new ol.render.canvas.Immediate(getMockContext(), 1, extent);
sinon.spy(context, 'drawMultiPoint');
var geometry = new ol.geom.MultiPoint([[1, 2], [3, 4]]);
context.drawGeometry(geometry);
expect(context.drawMultiPoint.calledOnce).to.be(true);
expect(context.drawMultiPoint.firstCall.calledWithExactly(geometry)).to.be(true);
});
it('calls drawMultiLineString() with a MultiLineString', function() {
var context = new ol.render.canvas.Immediate(getMockContext(), 1, extent);
sinon.spy(context, 'drawMultiLineString');
var geometry = new ol.geom.MultiLineString([[[1, 2], [3, 4]]]);
context.drawGeometry(geometry);
expect(context.drawMultiLineString.calledOnce).to.be(true);
expect(context.drawMultiLineString.firstCall.calledWithExactly(geometry)).to.be(true);
});
it('calls drawMultiPolygon() with a MultiPolygon', function() {
var context = new ol.render.canvas.Immediate(getMockContext(), 1, extent);
sinon.spy(context, 'drawMultiPolygon');
var geometry = new ol.geom.MultiPolygon([[[[1, 2], [3, 4], [5, 6], [1, 2]]]]);
context.drawGeometry(geometry);
expect(context.drawMultiPolygon.calledOnce).to.be(true);
expect(context.drawMultiPolygon.firstCall.calledWithExactly(geometry)).to.be(true);
});
it('calls drawGeometryCollection() with a GeometryCollection', function() {
var context = new ol.render.canvas.Immediate(getMockContext(), 1, extent);
sinon.spy(context, 'drawGeometryCollection');
sinon.spy(context, 'drawPoint');
sinon.spy(context, 'drawLineString');
sinon.spy(context, 'drawPolygon');
var point = new ol.geom.Point([1, 2]);
var linestring = new ol.geom.LineString([[1, 2], [3, 4]]);
var polygon = new ol.geom.Polygon([[[1, 2], [3, 4], [5, 6], [1, 2]]]);
var geometry = new ol.geom.GeometryCollection([point, linestring, polygon]);
context.drawGeometry(geometry);
expect(context.drawGeometryCollection.calledOnce).to.be(true);
expect(context.drawPoint.calledOnce).to.be(true);
expect(context.drawPoint.firstCall.calledWithExactly(point)).to.be(true);
expect(context.drawLineString.calledOnce).to.be(true);
expect(context.drawLineString.firstCall.calledWithExactly(linestring)).to.be(true);
expect(context.drawPolygon.calledOnce).to.be(true);
expect(context.drawPolygon.firstCall.calledWithExactly(polygon)).to.be(true);
});
it('calls drawCircle() with a Circle', function() {
var context = new ol.render.canvas.Immediate(getMockContext(), 1, extent);
sinon.spy(context, 'drawCircle');
var geometry = new ol.geom.Circle([0, 0]);
context.drawGeometry(geometry);
expect(context.drawCircle.calledOnce).to.be(true);
expect(context.drawCircle.firstCall.calledWithExactly(geometry)).to.be(true);
});
});
describe('#drawMultiPolygon', function() {
it('creates the correct canvas instructions for 3D geometries', function() {
var log = {
lineTo: [],
@@ -76,7 +214,7 @@ describe('ol.render.canvas.Immediate', function() {
[-82.128838, 26.693342, 0],
[-82.102127, 26.585724, 0]]]
]).transform('EPSG:4326', 'EPSG:3857');
canvas.drawMultiPolygonGeometry(multiPolygonGeometry, null);
canvas.drawMultiPolygon(multiPolygonGeometry, null);
expect(log.lineTo.length).to.be(15);
expect(log.lineTo[0][0]).to.roughlyEqual(805.3521540835154, 1e-9);
expect(log.lineTo[0][1]).to.roughlyEqual(158.76358389011807, 1e-9);
@@ -117,6 +255,18 @@ describe('ol.render.canvas.Immediate', function() {
});
});
goog.require('ol.geom.Circle');
goog.require('ol.geom.GeometryCollection');
goog.require('ol.geom.LineString');
goog.require('ol.geom.MultiLineString');
goog.require('ol.geom.MultiPoint');
goog.require('ol.geom.MultiPolygon');
goog.require('ol.geom.Point');
goog.require('ol.geom.Polygon');
goog.require('ol.render.VectorContext');
goog.require('ol.render.canvas.Immediate');
goog.require('ol.style.Circle');
goog.require('ol.style.Fill');
goog.require('ol.style.Stroke');
goog.require('ol.style.Style');
goog.require('ol.style.Text');

44
test/spec/ol/render/vector.test.js
View File

@@ -62,13 +62,13 @@ describe('ol.renderer.vector', function() {
var imageReplay = replayGroup.getReplay(
style.getZIndex(), ol.render.ReplayType.IMAGE);
var setImageStyleSpy = sinon.spy(imageReplay, 'setImageStyle');
var drawPointGeometrySpy = sinon.stub(imageReplay,
'drawPointGeometry', ol.nullFunction);
var drawPointSpy = sinon.stub(imageReplay,
'drawPoint', ol.nullFunction);
ol.renderer.vector.renderFeature(replayGroup, feature,
style, squaredTolerance, listener, listenerThis);
expect(setImageStyleSpy.called).to.be(false);
setImageStyleSpy.restore();
drawPointGeometrySpy.restore();
drawPointSpy.restore();
});
it('does not render the multipoint', function() {
@@ -76,13 +76,13 @@ describe('ol.renderer.vector', function() {
var imageReplay = replayGroup.getReplay(
style.getZIndex(), ol.render.ReplayType.IMAGE);
var setImageStyleSpy = sinon.spy(imageReplay, 'setImageStyle');
var drawMultiPointGeometrySpy = sinon.stub(imageReplay,
'drawMultiPointGeometry', ol.nullFunction);
var drawMultiPointSpy = sinon.stub(imageReplay,
'drawMultiPoint', ol.nullFunction);
ol.renderer.vector.renderFeature(replayGroup, feature,
style, squaredTolerance, listener, listenerThis);
expect(setImageStyleSpy.called).to.be(false);
setImageStyleSpy.restore();
drawMultiPointGeometrySpy.restore();
drawMultiPointSpy.restore();
});
it('does render the linestring', function() {
@@ -91,14 +91,14 @@ describe('ol.renderer.vector', function() {
style.getZIndex(), ol.render.ReplayType.LINE_STRING);
var setFillStrokeStyleSpy = sinon.spy(lineStringReplay,
'setFillStrokeStyle');
var drawLineStringGeometrySpy = sinon.stub(lineStringReplay,
'drawLineStringGeometry', ol.nullFunction);
var drawLineStringSpy = sinon.stub(lineStringReplay,
'drawLineString', ol.nullFunction);
ol.renderer.vector.renderFeature(replayGroup, feature,
style, squaredTolerance, listener, listenerThis);
expect(setFillStrokeStyleSpy.called).to.be(true);
expect(drawLineStringGeometrySpy.called).to.be(true);
expect(drawLineStringSpy.called).to.be(true);
setFillStrokeStyleSpy.restore();
drawLineStringGeometrySpy.restore();
drawLineStringSpy.restore();
});
it('does render the multilinestring', function() {
@@ -107,14 +107,14 @@ describe('ol.renderer.vector', function() {
style.getZIndex(), ol.render.ReplayType.LINE_STRING);
var setFillStrokeStyleSpy = sinon.spy(lineStringReplay,
'setFillStrokeStyle');
var drawMultiLineStringGeometrySpy = sinon.stub(lineStringReplay,
'drawMultiLineStringGeometry', ol.nullFunction);
var drawMultiLineStringSpy = sinon.stub(lineStringReplay,
'drawMultiLineString', ol.nullFunction);
ol.renderer.vector.renderFeature(replayGroup, feature,
style, squaredTolerance, listener, listenerThis);
expect(setFillStrokeStyleSpy.called).to.be(true);
expect(drawMultiLineStringGeometrySpy.called).to.be(true);
expect(drawMultiLineStringSpy.called).to.be(true);
setFillStrokeStyleSpy.restore();
drawMultiLineStringGeometrySpy.restore();
drawMultiLineStringSpy.restore();
});
it('does render the polygon', function() {
@@ -124,14 +124,14 @@ describe('ol.renderer.vector', function() {
style.getZIndex(), ol.render.ReplayType.POLYGON);
var setFillStrokeStyleSpy = sinon.spy(polygonReplay,
'setFillStrokeStyle');
var drawPolygonGeometrySpy = sinon.stub(polygonReplay,
'drawPolygonGeometry', ol.nullFunction);
var drawPolygonSpy = sinon.stub(polygonReplay,
'drawPolygon', ol.nullFunction);
ol.renderer.vector.renderFeature(replayGroup, feature,
style, squaredTolerance, listener, listenerThis);
expect(setFillStrokeStyleSpy.called).to.be(true);
expect(drawPolygonGeometrySpy.called).to.be(true);
expect(drawPolygonSpy.called).to.be(true);
setFillStrokeStyleSpy.restore();
drawPolygonGeometrySpy.restore();
drawPolygonSpy.restore();
});
it('does render the multipolygon', function() {
@@ -141,14 +141,14 @@ describe('ol.renderer.vector', function() {
style.getZIndex(), ol.render.ReplayType.POLYGON);
var setFillStrokeStyleSpy = sinon.spy(polygonReplay,
'setFillStrokeStyle');
var drawMultiPolygonGeometrySpy = sinon.stub(polygonReplay,
'drawMultiPolygonGeometry', ol.nullFunction);
var drawMultiPolygonSpy = sinon.stub(polygonReplay,
'drawMultiPolygon', ol.nullFunction);
ol.renderer.vector.renderFeature(replayGroup, feature,
style, squaredTolerance, listener, listenerThis);
expect(setFillStrokeStyleSpy.called).to.be(true);
expect(drawMultiPolygonGeometrySpy.called).to.be(true);
expect(drawMultiPolygonSpy.called).to.be(true);
setFillStrokeStyleSpy.restore();
drawMultiPolygonGeometrySpy.restore();
drawMultiPolygonSpy.restore();
});
});

12
test/spec/ol/render/webglreplay.test.js
View File

@@ -82,7 +82,7 @@ describe('ol.render.webgl.ImageReplay', function() {
});
});
describe('#drawPointGeometry', function() {
describe('#drawPoint', function() {
beforeEach(function() {
var imageStyle = createImageStyle(new Image());
replay.setImageStyle(imageStyle);
@@ -92,7 +92,7 @@ describe('ol.render.webgl.ImageReplay', function() {
var point;
point = new ol.geom.Point([1000, 2000]);
replay.drawPointGeometry(point, null);
replay.drawPoint(point, null);
expect(replay.vertices_).to.have.length(32);
expect(replay.indices_).to.have.length(6);
expect(replay.indices_[0]).to.be(0);
@@ -103,7 +103,7 @@ describe('ol.render.webgl.ImageReplay', function() {
expect(replay.indices_[5]).to.be(3);
point = new ol.geom.Point([2000, 3000]);
replay.drawPointGeometry(point, null);
replay.drawPoint(point, null);
expect(replay.vertices_).to.have.length(64);
expect(replay.indices_).to.have.length(12);
expect(replay.indices_[6]).to.be(4);
@@ -115,7 +115,7 @@ describe('ol.render.webgl.ImageReplay', function() {
});
});
describe('#drawMultiPointGeometry', function() {
describe('#drawMultiPoint', function() {
beforeEach(function() {
var imageStyle = createImageStyle(new Image());
replay.setImageStyle(imageStyle);
@@ -126,7 +126,7 @@ describe('ol.render.webgl.ImageReplay', function() {
multiPoint = new ol.geom.MultiPoint(
[[1000, 2000], [2000, 3000]]);
replay.drawMultiPointGeometry(multiPoint, null);
replay.drawMultiPoint(multiPoint, null);
expect(replay.vertices_).to.have.length(64);
expect(replay.indices_).to.have.length(12);
expect(replay.indices_[0]).to.be(0);
@@ -144,7 +144,7 @@ describe('ol.render.webgl.ImageReplay', function() {
multiPoint = new ol.geom.MultiPoint(
[[3000, 4000], [4000, 5000]]);
replay.drawMultiPointGeometry(multiPoint, null);
replay.drawMultiPoint(multiPoint, null);
expect(replay.vertices_).to.have.length(128);
expect(replay.indices_).to.have.length(24);
expect(replay.indices_[12]).to.be(8);

2
test_rendering/spec/ol/layer/tile.test.js
View File

@@ -203,7 +203,7 @@ describe('ol.rendering.layer.Tile', function() {
fill: new ol.style.Fill({color: 'yellow'}),
stroke: new ol.style.Stroke({color: 'red', width: 1})
}));
e.vectorContext.drawPointGeometry(new ol.geom.Point(
e.vectorContext.drawPoint(new ol.geom.Point(
ol.proj.transform([-123, 38], 'EPSG:4326', 'EPSG:3857')));
});
}