Use setStyle() and drawGeometry() in examples

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