Merge pull request #1598 from elemoine/detect-style-changes

Changing the style function doesn't redraw the layer

src/objectliterals.jsdoc

@@ -681,7 +681,14 @@
 /**
  * @typedef {Object} olx.source.ImageCanvasOptions
  * @property {Array.<ol.Attribution>|undefined} attributions Attributions.
- * @property {ol.CanvasFunctionType} canvasFunction Canvas function.
+ * @property {ol.CanvasFunctionType} canvasFunction Canvas function. The function
+ *     returning the canvas element used by the source as an image. The arguments
+ *     passed to the function are: `{ol.Extent}` the image extent, `{number}` the
+ *     image resolution, `{number}` the device pixel ratio, `{ol.Size}` the image
+ *     size, and `{ol.proj.Projection}` the image projection. The canvas returned
+ *     by this function is cached by the source. If the value returned by the
+ *     function is later changed then `dispatchChangeEvent` should be called on
+ *     the source for the source to invalidate the current cached image.
  * @property {ol.Extent|undefined} extent Extent.
  * @property {string|undefined} logo Logo.
  * @property {ol.proj.ProjectionLike} projection Projection.

src/ol/layer/vectorlayer.js

@@ -77,6 +77,9 @@ goog.exportProperty(
 
 
 /**
+ * If the styles are changed by setting a new style function or by changing the
+ * value returned by the style function then `dispatchChangeEvent` should be
+ * called on the layer for the layer to be refreshed on the screen.
  * @param {ol.feature.StyleFunction|undefined} styleFunction Style function.
  */
 ol.layer.Vector.prototype.setStyleFunction = function(styleFunction) {

src/ol/observable.exports

@@ -1,4 +1,5 @@
 @exportSymbol ol.Observable
+@exportProperty ol.Observable.prototype.dispatchChangeEvent
 @exportProperty ol.Observable.prototype.on
 @exportProperty ol.Observable.prototype.once
 @exportProperty ol.Observable.prototype.un

src/ol/renderer/canvas/canvasvectorlayerrenderer.js

@@ -189,10 +189,11 @@ ol.renderer.canvas.VectorLayer.prototype.prepareFrame =
   var frameStateExtent = frameState.extent;
   var frameStateResolution = frameState.view2DState.resolution;
   var pixelRatio = frameState.pixelRatio;
+  var vectorLayerRevision = vectorLayer.getRevision();
 
   if (!this.dirty_ &&
       this.renderedResolution_ == frameStateResolution &&
-      this.renderedRevision_ == vectorSource.getRevision() &&
+      this.renderedRevision_ == vectorLayerRevision &&
       ol.extent.containsExtent(this.renderedExtent_, frameStateExtent)) {
     return;
   }
@@ -230,7 +231,7 @@ ol.renderer.canvas.VectorLayer.prototype.prepareFrame =
   replayGroup.finish();
 
   this.renderedResolution_ = frameStateResolution;
-  this.renderedRevision_ = vectorSource.getRevision();
+  this.renderedRevision_ = vectorLayerRevision;
   if (!replayGroup.isEmpty()) {
     this.replayGroup_ = replayGroup;
   }