Merge pull request #5072 from tschaub/immediate-api

Add setStyle() and drawGeometry() to the immediate rendering API.

changelog/upgrade-notes.md

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

examples/dynamic-data.js

@@ -25,11 +25,13 @@ var map = new ol.Map({
   })
 });
 
-var imageStyle = new ol.style.Circle({
+var imageStyle = new ol.style.Style({
-  radius: 5,
+  image: new ol.style.Circle({
-  snapToPixel: false,
+    radius: 5,
-  fill: new ol.style.Fill({color: 'yellow'}),
+    snapToPixel: false,
-  stroke: new ol.style.Stroke({color: 'red', width: 1})
+    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({
+var headOuterImageStyle = new ol.style.Style({
-  radius: 5,
+  image: new ol.style.Circle({
-  snapToPixel: false,
+    radius: 5,
-  fill: new ol.style.Fill({color: 'black'})
+    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.setStyle(imageStyle);
-  vectorContext.drawMultiPointGeometry(
+  vectorContext.drawGeometry(new ol.geom.MultiPoint(coordinates));
-      new ol.geom.MultiPoint(coordinates), null);
 
   var headPoint = new ol.geom.Point(coordinates[coordinates.length - 1]);
-  var headFeature = new ol.Feature(headPoint);
-  vectorContext.drawFeature(headFeature, headInnerImageStyle);
 
-  vectorContext.setImageStyle(headOuterImageStyle);
+  vectorContext.setStyle(headOuterImageStyle);
-  vectorContext.drawMultiPointGeometry(headPoint, null);
+  vectorContext.drawGeometry(headPoint);
+
+  vectorContext.setStyle(headInnerImageStyle);
+  vectorContext.drawGeometry(headPoint);
 
   map.render();
 });

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(
+    vectorContext.setStyle(new ol.style.Style({
-        new ol.style.Fill({color: 'rgba(255, 153, 0, 0.4)'}),
+      fill: new ol.style.Fill({color: 'rgba(255, 153, 0, 0.4)'}),
-        new ol.style.Stroke({color: 'rgba(255, 204, 0, 0.2)', width: 1}));
+      stroke: new ol.style.Stroke({color: 'rgba(255, 204, 0, 0.2)', width: 1})
-    render.drawPolygonGeometry(new ol.geom.Polygon(
+    }));
+    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({

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({
+    var style = new ol.style.Style({
-      radius: radius,
+      image: new ol.style.Circle({
-      snapToPixel: false,
+        radius: radius,
-      stroke: new ol.style.Stroke({
+        snapToPixel: false,
-        color: 'rgba(255, 0, 0, ' + opacity + ')',
+        stroke: new ol.style.Stroke({
-        width: 1
+          color: 'rgba(255, 0, 0, ' + opacity + ')',
+          width: 0.25 + opacity
+        })
       })
     });
 
-    vectorContext.setImageStyle(flashStyle);
+    vectorContext.setStyle(style);
-    vectorContext.drawPointGeometry(flashGeom, null);
+    vectorContext.drawGeometry(flashGeom);
     if (elapsed > duration) {
       ol.Observable.unByKey(listenerKey);
       return;

examples/flight-animation.js

@@ -27,12 +27,11 @@ var map = new ol.Map({
   })
 });
 
-var defaultStroke = new ol.style.Stroke({
+var style = new ol.style.Style({
-  color: '#EAE911',
+  stroke: new ol.style.Stroke({
-  width: 2
+    color: '#EAE911',
-});
+    width: 2
-var defaultStyle = new ol.style.Style({
+  })
-  stroke: defaultStroke
 });
 
 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
+      // only draw the lines for which the animation has not finished yet
-      // 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;
     }

examples/igc.js

@@ -152,27 +152,26 @@ map.on('click', function(evt) {
   displaySnap(evt.coordinate);
 });
 
-var imageStyle = new ol.style.Circle({
+var stroke = new ol.style.Stroke({
-  radius: 5,
-  fill: null,
-  stroke: new ol.style.Stroke({
-    color: 'rgba(255,0,0,0.9)',
-    width: 1
-  })
-});
-var strokeStyle = 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.drawGeometry(point);
-    vectorContext.drawPointGeometry(point);
   }
   if (line !== null) {
-    vectorContext.setFillStrokeStyle(null, strokeStyle);
+    vectorContext.drawGeometry(line);
-    vectorContext.drawLineStringGeometry(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
     })
   })
 });

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);
+var style = new ol.style.Style({
-render.setImageStyle(new ol.style.Circle({
-  radius: 10,
   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]]));
+vectorContext.drawGeometry(new ol.geom.LineString([[10, 10], [90, 90]]));
-render.drawPolygonGeometry(
+vectorContext.drawGeometry(new ol.geom.Polygon([[[2, 2], [98, 2], [2, 98], [2, 2]]]));
-    new ol.geom.Polygon([[[2, 2], [98, 2], [2, 98], [2, 2]]]));
+vectorContext.drawGeometry(new ol.geom.Point([88, 88]));
-render.drawPointGeometry(new ol.geom.Point([88, 88]));

examples/synthetic-points.js

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

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

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]]]));
  * ```
  *

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) {
+ol.render.canvas.Immediate.prototype.drawCircle = function(geometry) {
-  if (!ol.extent.intersects(this.extent_, circleGeometry.getExtent())) {
+  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 =
+    goog.asserts.assert(geometry, 'geometry must be truthy');
-        ol.render.canvas.Immediate.GEOMETRY_RENDERERS_[geometry.getType()];
+    render.drawGeometry(geometry);
-    goog.asserts.assert(renderGeometry !== undefined,
-        'renderGeometry should be defined');
-    renderGeometry.call(render, geometry, null);
   });
 };
 
@@ -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
+ * @param {ol.geom.GeometryCollection} geometry Geometry collection.
- *     collection.
- * @param {ol.Feature} feature Feature.
  */
-ol.render.canvas.Immediate.prototype.drawGeometryCollectionGeometry = function(geometryCollectionGeometry, feature) {
+ol.render.canvas.Immediate.prototype.drawGeometryCollection = function(geometry) {
-  var geometries = geometryCollectionGeometry.getGeometriesArray();
+  var geometries = geometry.getGeometriesArray();
   var i, ii;
   for (i = 0, ii = geometries.length; i < ii; ++i) {
-    var geometry = geometries[i];
+    this.drawGeometry(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);
   }
 };
 
@@ -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.
+ * @param {ol.geom.Point|ol.render.Feature} geometry Point geometry.
- * @api
  */
-ol.render.canvas.Immediate.prototype.drawPointGeometry = function(pointGeometry) {
+ol.render.canvas.Immediate.prototype.drawPoint = function(geometry) {
-  var flatCoordinates = pointGeometry.getFlatCoordinates();
+  var flatCoordinates = geometry.getFlatCoordinates();
-  var stride = pointGeometry.getStride();
+  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
+ * @param {ol.geom.MultiPoint|ol.render.Feature} geometry MultiPoint geometry.
- *     geometry.
- * @api
  */
-ol.render.canvas.Immediate.prototype.drawMultiPointGeometry = function(multiPointGeometry) {
+ol.render.canvas.Immediate.prototype.drawMultiPoint = function(geometry) {
-  var flatCoordinates = multiPointGeometry.getFlatCoordinates();
+  var flatCoordinates = geometry.getFlatCoordinates();
-  var stride = multiPointGeometry.getStride();
+  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
+ * @param {ol.geom.LineString|ol.render.Feature} geometry LineString geometry.
- *     string geometry.
- * @api
  */
-ol.render.canvas.Immediate.prototype.drawLineStringGeometry = function(lineStringGeometry) {
+ol.render.canvas.Immediate.prototype.drawLineString = function(geometry) {
-  if (!ol.extent.intersects(this.extent_, lineStringGeometry.getExtent())) {
+  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
+ * @param {ol.geom.MultiLineString|ol.render.Feature} geometry MultiLineString
- *     MultiLineString geometry.
+ *     geometry.
- * @api
  */
-ol.render.canvas.Immediate.prototype.drawMultiLineStringGeometry = function(multiLineStringGeometry) {
+ol.render.canvas.Immediate.prototype.drawMultiLineString = function(geometry) {
-  var geometryExtent = multiLineStringGeometry.getExtent();
+  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 ends = geometry.getEnds();
-    var stride = multiLineStringGeometry.getStride();
+    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
+ * @param {ol.geom.Polygon|ol.render.Feature} geometry Polygon geometry.
- *     geometry.
- * @api
  */
-ol.render.canvas.Immediate.prototype.drawPolygonGeometry = function(polygonGeometry) {
+ol.render.canvas.Immediate.prototype.drawPolygon = function(geometry) {
-  if (!ol.extent.intersects(this.extent_, polygonGeometry.getExtent())) {
+  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(),
+    this.drawRings_(geometry.getOrientedFlatCoordinates(),
-        0, polygonGeometry.getEnds(), polygonGeometry.getStride());
+        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.
+ * @param {ol.geom.MultiPolygon} geometry MultiPolygon geometry.
- * @api
  */
-ol.render.canvas.Immediate.prototype.drawMultiPolygonGeometry = function(multiPolygonGeometry) {
+ol.render.canvas.Immediate.prototype.drawMultiPolygon = function(geometry) {
-  if (!ol.extent.intersects(this.extent_, multiPolygonGeometry.getExtent())) {
+  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 endss = geometry.getEndss();
-    var stride = multiPolygonGeometry.getStride();
+    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
-};

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;

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) {

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 =
+ol.render.VectorContext.prototype.drawGeometryCollection = goog.abstractMethod;
-    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 =
+ol.render.VectorContext.prototype.drawLineString = goog.abstractMethod;
-    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 =
+ol.render.VectorContext.prototype.drawMultiLineString = goog.abstractMethod;
-    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 =
+ol.render.VectorContext.prototype.drawMultiPolygon = goog.abstractMethod;
-    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;
 
 
 /**

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,
+ol.render.webgl.Immediate = function(context, center, resolution, rotation, size, extent, pixelRatio) {
-    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.setStyle(style);
-    render.setImageStyle(style.getImage());
+    goog.asserts.assert(geometry, 'geometry must be truthy');
-    render.setTextStyle(style.getText());
+    render.drawGeometry(geometry);
-    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);
-    }
   });
 };
 
 
 /**
  * @inheritDoc
- * @api
  */
-ol.render.webgl.Immediate.prototype.drawGeometryCollectionGeometry = function(geometryCollectionGeometry, data) {
+ol.render.webgl.Immediate.prototype.drawGeometryCollection = function(geometry, data) {
-  var geometries = geometryCollectionGeometry.getGeometriesArray();
+  var geometries = geometry.getGeometriesArray();
-  var renderers = ol.render.webgl.Immediate.GEOMETRY_RENDERERS_;
   var i, ii;
   for (i = 0, ii = geometries.length; i < ii; ++i) {
-    var geometry = geometries[i];
+    this.drawGeometry(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);
-    }
   }
 };
 
 
 /**
  * @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) {
+ol.render.webgl.Immediate.prototype.drawMultiPoint = function(geometry, data) {
-};
-
-
-/**
- * @inheritDoc
- * @api
- */
-ol.render.webgl.Immediate.prototype.drawMultiLineStringGeometry = function(multiLineStringGeometry, data) {
-};
-
-
-/**
- * @inheritDoc
- * @api
- */
-ol.render.webgl.Immediate.prototype.drawMultiPointGeometry = function(multiPointGeometry, 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
-};

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

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

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,
+        var drawPointSpy = sinon.stub(imageReplay,
-            'drawPointGeometry', ol.nullFunction);
+            '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,
+        var drawMultiPointSpy = sinon.stub(imageReplay,
-            'drawMultiPointGeometry', ol.nullFunction);
+            '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,
+        var drawLineStringSpy = sinon.stub(lineStringReplay,
-            'drawLineStringGeometry', ol.nullFunction);
+            '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,
+        var drawMultiLineStringSpy = sinon.stub(lineStringReplay,
-            'drawMultiLineStringGeometry', ol.nullFunction);
+            '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,
+        var drawPolygonSpy = sinon.stub(polygonReplay,
-            'drawPolygonGeometry', ol.nullFunction);
+            '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,
+        var drawMultiPolygonSpy = sinon.stub(polygonReplay,
-            'drawMultiPolygonGeometry', ol.nullFunction);
+            '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();
       });
     });
 

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

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')));
         });
       }