diff --git a/changelog/upgrade-notes.md b/changelog/upgrade-notes.md index a835d4a556..0f2d5cbf66 100644 --- a/changelog/upgrade-notes.md +++ b/changelog/upgrade-notes.md @@ -1,6 +1,35 @@ ## Upgrade notes -### v3.15.0 +### + +#### 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` diff --git a/examples/dynamic-data.js b/examples/dynamic-data.js index 26f4f3fc1c..41a3d3431a 100644 --- a/examples/dynamic-data.js +++ b/examples/dynamic-data.js @@ -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(); }); diff --git a/examples/earthquake-custom-symbol.js b/examples/earthquake-custom-symbol.js index 6d0016a174..bbe4c56827 100644 --- a/examples/earthquake-custom-symbol.js +++ b/examples/earthquake-custom-symbol.js @@ -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({ diff --git a/examples/feature-animation.js b/examples/feature-animation.js index e6ba2c15f3..e3211d8f67 100644 --- a/examples/feature-animation.js +++ b/examples/feature-animation.js @@ -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; diff --git a/examples/flight-animation.js b/examples/flight-animation.js index d6c5fd5a56..c48b97071e 100644 --- a/examples/flight-animation.js +++ b/examples/flight-animation.js @@ -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; } diff --git a/examples/igc.js b/examples/igc.js index fabe56dad5..2658abc951 100644 --- a/examples/igc.js +++ b/examples/igc.js @@ -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 + }) }) }) }); diff --git a/examples/render-geometry.js b/examples/render-geometry.js index 0540a66a81..0dd1eb1620 100644 --- a/examples/render-geometry.js +++ b/examples/render-geometry.js @@ -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])); diff --git a/examples/synthetic-points.js b/examples/synthetic-points.js index 21c1eaf713..4c1e672bf0 100644 --- a/examples/synthetic-points.js +++ b/examples/synthetic-points.js @@ -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); } }); diff --git a/src/ol/graticule.js b/src/ol/graticule.js index 94732ea570..980a7b9c66 100644 --- a/src/ol/graticule.js +++ b/src/ol/graticule.js @@ -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); } }; diff --git a/src/ol/render.js b/src/ol/render.js index d4f61d9913..67c4a695ef 100644 --- a/src/ol/render.js +++ b/src/ol/render.js @@ -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]]])); * ``` * diff --git a/src/ol/render/canvas/canvasimmediate.js b/src/ol/render/canvas/canvasimmediate.js index 79bba88f3c..58aaf34ca7 100644 --- a/src/ol/render/canvas/canvasimmediate.js +++ b/src/ol/render/canvas/canvasimmediate.js @@ -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.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 -}; diff --git a/src/ol/render/canvas/canvasreplay.js b/src/ol/render/canvas/canvasreplay.js index 2396040895..b907b04eb5 100644 --- a/src/ol/render/canvas/canvasreplay.js +++ b/src/ol/render/canvas/canvasreplay.js @@ -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; diff --git a/src/ol/render/vector.js b/src/ol/render/vector.js index 7654a6efd6..72034eef12 100644 --- a/src/ol/render/vector.js +++ b/src/ol/render/vector.js @@ -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) { diff --git a/src/ol/render/vectorcontext.js b/src/ol/render/vectorcontext.js index 5329ad7630..0b9cb7f80a 100644 --- a/src/ol/render/vectorcontext.js +++ b/src/ol/render/vectorcontext.js @@ -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; /** diff --git a/src/ol/render/webgl/webglimmediate.js b/src/ol/render/webgl/webglimmediate.js index ddde7db05a..01c783fe15 100644 --- a/src/ol/render/webgl/webglimmediate.js +++ b/src/ol/render/webgl/webglimmediate.js @@ -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.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 -}; diff --git a/src/ol/render/webgl/webglreplay.js b/src/ol/render/webgl/webglreplay.js index d61b123fad..18580f518e 100644 --- a/src/ol/render/webgl/webglreplay.js +++ b/src/ol/render/webgl/webglreplay.js @@ -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(); diff --git a/test/spec/ol/render/canvasimmediate.test.js b/test/spec/ol/render/canvasimmediate.test.js index 8e50efda3d..8c4f6ca74a 100644 --- a/test/spec/ol/render/canvasimmediate.test.js +++ b/test/spec/ol/render/canvasimmediate.test.js @@ -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'); diff --git a/test/spec/ol/render/vector.test.js b/test/spec/ol/render/vector.test.js index d4f4743c97..719d279e19 100644 --- a/test/spec/ol/render/vector.test.js +++ b/test/spec/ol/render/vector.test.js @@ -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(); }); }); diff --git a/test/spec/ol/render/webglreplay.test.js b/test/spec/ol/render/webglreplay.test.js index 838004e6d5..77a5ccabb1 100644 --- a/test/spec/ol/render/webglreplay.test.js +++ b/test/spec/ol/render/webglreplay.test.js @@ -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); diff --git a/test_rendering/spec/ol/layer/tile.test.js b/test_rendering/spec/ol/layer/tile.test.js index 6113f07db1..ba547f1bcf 100644 --- a/test_rendering/spec/ol/layer/tile.test.js +++ b/test_rendering/spec/ol/layer/tile.test.js @@ -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'))); }); }