Merge pull request #1497 from elemoine/vector-api-d3

[vector-api] d3 integration and vector image

src/ol/canvasfunction.js

@@ -0,0 +1,8 @@
+goog.provide('ol.CanvasFunctionType');
+
+
+/**
+ * @typedef {function(this:ol.source.ImageCanvas, ol.Extent, number,
+ *     number, ol.Size, ol.proj.Projection): HTMLCanvasElement}
+ */
+ol.CanvasFunctionType;

src/ol/image.js

@@ -1,54 +1,30 @@
 goog.provide('ol.Image');
-goog.provide('ol.ImageState');
 
 goog.require('goog.array');
 goog.require('goog.asserts');
 goog.require('goog.events');
-goog.require('goog.events.EventTarget');
 goog.require('goog.events.EventType');
 goog.require('goog.object');
-goog.require('ol.Attribution');
-goog.require('ol.Extent');
-
-
-/**
- * @enum {number}
- */
-ol.ImageState = {
-  IDLE: 0,
-  LOADING: 1,
-  LOADED: 2,
-  ERROR: 3
-};
+goog.require('ol.ImageBase');
+goog.require('ol.ImageState');
 
 
 
 /**
  * @constructor
- * @extends {goog.events.EventTarget}
+ * @extends {ol.ImageBase}
  * @param {ol.Extent} extent Extent.
  * @param {number} resolution Resolution.
  * @param {number} pixelRatio Pixel ratio.
+ * @param {Array.<ol.Attribution>} attributions Attributions.
  * @param {string} src Image source URI.
  * @param {?string} crossOrigin Cross origin.
- * @param {Array.<ol.Attribution>} attributions Attributions.
  */
 ol.Image =
-    function(extent, resolution, pixelRatio, src, crossOrigin, attributions) {
+    function(extent, resolution, pixelRatio, attributions, src, crossOrigin) {
 
-  goog.base(this);
-
-  /**
-   * @private
-   * @type {Array.<ol.Attribution>}
-   */
-  this.attributions_ = attributions;
-
-  /**
-   * @private
-   * @type {ol.Extent}
-   */
-  this.extent_ = extent;
+  goog.base(this, extent, resolution, pixelRatio, ol.ImageState.IDLE,
+      attributions);
 
   /**
    * @private
@@ -56,18 +32,6 @@ ol.Image =
    */
   this.src_ = src;
 
-  /**
-   * @private
-   * @type {number}
-   */
-  this.pixelRatio_ = pixelRatio;
-
-  /**
-   * @private
-   * @type {number}
-   */
-  this.resolution_ = resolution;
-
   /**
    * @private
    * @type {Image}
@@ -95,31 +59,7 @@ ol.Image =
    */
   this.state = ol.ImageState.IDLE;
 };
-goog.inherits(ol.Image, goog.events.EventTarget);
-
-
-/**
- * @protected
- */
-ol.Image.prototype.dispatchChangeEvent = function() {
-  this.dispatchEvent(goog.events.EventType.CHANGE);
-};
-
-
-/**
- * @return {Array.<ol.Attribution>} Attributions.
- */
-ol.Image.prototype.getAttributions = function() {
-  return this.attributions_;
-};
-
-
-/**
- * @return {ol.Extent} Extent.
- */
-ol.Image.prototype.getExtent = function() {
-  return this.extent_;
-};
+goog.inherits(ol.Image, ol.ImageBase);
 
 
 /**
@@ -145,30 +85,6 @@ ol.Image.prototype.getImageElement = function(opt_context) {
 };
 
 
-/**
- * @return {number} PixelRatio.
- */
-ol.Image.prototype.getPixelRatio = function() {
-  return this.pixelRatio_;
-};
-
-
-/**
- * @return {number} Resolution.
- */
-ol.Image.prototype.getResolution = function() {
-  return this.resolution_;
-};
-
-
-/**
- * @return {ol.ImageState} State.
- */
-ol.Image.prototype.getState = function() {
-  return this.state;
-};
-
-
 /**
  * Tracks loading or read errors.
  *

src/ol/imagebase.js

@@ -0,0 +1,127 @@
+goog.provide('ol.ImageBase');
+goog.provide('ol.ImageState');
+
+goog.require('goog.events.EventTarget');
+goog.require('goog.events.EventType');
+goog.require('ol.Attribution');
+goog.require('ol.Extent');
+
+
+/**
+ * @enum {number}
+ */
+ol.ImageState = {
+  IDLE: 0,
+  LOADING: 1,
+  LOADED: 2,
+  ERROR: 3
+};
+
+
+
+/**
+ * @constructor
+ * @extends {goog.events.EventTarget}
+ * @param {ol.Extent} extent Extent.
+ * @param {number} resolution Resolution.
+ * @param {number} pixelRatio Pixel ratio.
+ * @param {ol.ImageState} state State.
+ * @param {Array.<ol.Attribution>} attributions Attributions.
+ */
+ol.ImageBase = function(extent, resolution, pixelRatio, state, attributions) {
+
+  goog.base(this);
+
+  /**
+   * @private
+   * @type {Array.<ol.Attribution>}
+   */
+  this.attributions_ = attributions;
+
+  /**
+   * @private
+   * @type {ol.Extent}
+   */
+  this.extent_ = extent;
+
+  /**
+   * @private
+   * @type {number}
+   */
+  this.pixelRatio_ = pixelRatio;
+
+  /**
+   * @private
+   * @type {number}
+   */
+  this.resolution_ = resolution;
+
+  /**
+   * @protected
+   * @type {ol.ImageState}
+   */
+  this.state = state;
+
+};
+goog.inherits(ol.ImageBase, goog.events.EventTarget);
+
+
+/**
+ * @protected
+ */
+ol.ImageBase.prototype.dispatchChangeEvent = function() {
+  this.dispatchEvent(goog.events.EventType.CHANGE);
+};
+
+
+/**
+ * @return {Array.<ol.Attribution>} Attributions.
+ */
+ol.ImageBase.prototype.getAttributions = function() {
+  return this.attributions_;
+};
+
+
+/**
+ * @return {ol.Extent} Extent.
+ */
+ol.ImageBase.prototype.getExtent = function() {
+  return this.extent_;
+};
+
+
+/**
+ * @param {Object=} opt_context Object.
+ * @return {HTMLCanvasElement|Image|HTMLVideoElement} Image.
+ */
+ol.ImageBase.prototype.getImageElement = goog.abstractMethod;
+
+
+/**
+ * @return {number} PixelRatio.
+ */
+ol.ImageBase.prototype.getPixelRatio = function() {
+  return this.pixelRatio_;
+};
+
+
+/**
+ * @return {number} Resolution.
+ */
+ol.ImageBase.prototype.getResolution = function() {
+  return this.resolution_;
+};
+
+
+/**
+ * @return {ol.ImageState} State.
+ */
+ol.ImageBase.prototype.getState = function() {
+  return this.state;
+};
+
+
+/**
+ * Load not yet loaded URI.
+ */
+ol.ImageBase.prototype.load = goog.abstractMethod;

src/ol/imagecanvas.js

@@ -0,0 +1,38 @@
+goog.provide('ol.ImageCanvas');
+
+goog.require('ol.ImageBase');
+goog.require('ol.ImageState');
+
+
+
+/**
+ * @constructor
+ * @extends {ol.ImageBase}
+ * @param {ol.Extent} extent Extent.
+ * @param {number} resolution Resolution.
+ * @param {number} pixelRatio Pixel ratio.
+ * @param {Array.<ol.Attribution>} attributions Attributions.
+ * @param {HTMLCanvasElement} canvas Canvas.
+ */
+ol.ImageCanvas = function(extent, resolution, pixelRatio, attributions,
+    canvas) {
+
+  goog.base(this, extent, resolution, pixelRatio, ol.ImageState.LOADED,
+      attributions);
+
+  /**
+   * @private
+   * @type {HTMLCanvasElement}
+   */
+  this.canvas_ = canvas;
+
+};
+goog.inherits(ol.ImageCanvas, ol.ImageBase);
+
+
+/**
+ * @inheritDoc
+ */
+ol.ImageCanvas.prototype.getImageElement = function(opt_context) {
+  return this.canvas_;
+};

src/ol/renderer/canvas/canvasimagelayerrenderer.js

@@ -4,7 +4,7 @@ goog.require('goog.asserts');
 goog.require('goog.events');
 goog.require('goog.events.EventType');
 goog.require('goog.vec.Mat4');
-goog.require('ol.Image');
+goog.require('ol.ImageBase');
 goog.require('ol.ImageState');
 goog.require('ol.ViewHint');
 goog.require('ol.layer.Image');
@@ -27,7 +27,7 @@ ol.renderer.canvas.ImageLayer = function(mapRenderer, imageLayer) {
 
   /**
    * @private
-   * @type {?ol.Image}
+   * @type {?ol.ImageBase}
    */
   this.image_ = null;
 

src/ol/renderer/dom/domimagelayerrenderer.js

@@ -6,7 +6,7 @@ goog.require('goog.dom.TagName');
 goog.require('goog.events');
 goog.require('goog.events.EventType');
 goog.require('goog.vec.Mat4');
-goog.require('ol.Image');
+goog.require('ol.ImageBase');
 goog.require('ol.ImageState');
 goog.require('ol.ViewHint');
 goog.require('ol.dom');
@@ -32,7 +32,7 @@ ol.renderer.dom.ImageLayer = function(mapRenderer, imageLayer) {
   /**
    * The last rendered image.
    * @private
-   * @type {?ol.Image}
+   * @type {?ol.ImageBase}
    */
   this.image_ = null;
 

src/ol/renderer/webgl/webglimagelayerrenderer.js

@@ -7,7 +7,7 @@ goog.require('goog.vec.Mat4');
 goog.require('goog.webgl');
 goog.require('ol.Coordinate');
 goog.require('ol.Extent');
-goog.require('ol.Image');
+goog.require('ol.ImageBase');
 goog.require('ol.ImageState');
 goog.require('ol.ViewHint');
 goog.require('ol.layer.Image');
@@ -29,7 +29,7 @@ ol.renderer.webgl.ImageLayer = function(mapRenderer, imageLayer) {
   /**
    * The last rendered image.
    * @private
-   * @type {?ol.Image}
+   * @type {?ol.ImageBase}
    */
   this.image_ = null;
 
@@ -38,7 +38,7 @@ goog.inherits(ol.renderer.webgl.ImageLayer, ol.renderer.webgl.Layer);
 
 
 /**
- * @param {ol.Image} image Image.
+ * @param {ol.ImageBase} image Image.
  * @private
  * @return {WebGLTexture} Texture.
  */

src/ol/source/imagecanvassource.exports

@@ -0,0 +1 @@
+@exportSymbol ol.source.ImageCanvas

src/ol/source/imagecanvassource.js

@@ -0,0 +1,79 @@
+goog.provide('ol.source.ImageCanvas');
+
+goog.require('ol.CanvasFunctionType');
+goog.require('ol.ImageCanvas');
+goog.require('ol.extent');
+goog.require('ol.source.Image');
+
+
+
+/**
+ * @constructor
+ * @extends {ol.source.Image}
+ * @param {olx.source.ImageCanvasOptions} options
+ */
+ol.source.ImageCanvas = function(options) {
+
+  goog.base(this, {
+    attributions: options.attributions,
+    extent: options.extent,
+    logo: options.logo,
+    projection: options.projection,
+    resolutions: options.resolutions,
+    state: options.state
+  });
+
+  /**
+   * @private
+   * @type {ol.CanvasFunctionType}
+   */
+  this.canvasFunction_ = options.canvasFunction;
+
+  /**
+   * @private
+   * @type {ol.ImageCanvas}
+   */
+  this.canvas_ = null;
+
+  /**
+   * @private
+   * @type {number}
+   */
+  this.ratio_ = goog.isDef(options.ratio) ?
+      options.ratio : 1.5;
+
+};
+goog.inherits(ol.source.ImageCanvas, ol.source.Image);
+
+
+/**
+ * @inheritDoc
+ */
+ol.source.ImageCanvas.prototype.getImage =
+    function(extent, resolution, pixelRatio, projection) {
+  resolution = this.findNearestResolution(resolution);
+
+  var canvas = this.canvas_;
+  if (!goog.isNull(canvas) &&
+      canvas.getResolution() == resolution &&
+      canvas.getPixelRatio() == pixelRatio &&
+      ol.extent.containsExtent(canvas.getExtent(), extent)) {
+    return canvas;
+  }
+
+  extent = extent.slice();
+  ol.extent.scaleFromCenter(extent, this.ratio_);
+  var width = (extent[2] - extent[0]) / resolution;
+  var height = (extent[3] - extent[1]) / resolution;
+  var size = [width * pixelRatio, height * pixelRatio];
+
+  var canvasElement = this.canvasFunction_(
+      extent, resolution, pixelRatio, size, projection);
+  if (!goog.isNull(canvasElement)) {
+    canvas = new ol.ImageCanvas(extent, resolution, pixelRatio,
+        this.getAttributions(), canvasElement);
+  }
+  this.canvas_ = canvas;
+
+  return canvas;
+};

src/ol/source/imagesource.js

@@ -5,23 +5,17 @@ goog.require('goog.asserts');
 goog.require('ol.Attribution');
 goog.require('ol.Extent');
 goog.require('ol.Image');
-goog.require('ol.ImageUrlFunction');
-goog.require('ol.ImageUrlFunctionType');
-goog.require('ol.Size');
 goog.require('ol.array');
 goog.require('ol.source.Source');
 
 
 /**
  * @typedef {{attributions: (Array.<ol.Attribution>|undefined),
- *            crossOrigin: (null|string|undefined),
  *            extent: (null|ol.Extent|undefined),
  *            logo: (string|undefined),
  *            projection: ol.proj.ProjectionLike,
  *            resolutions: (Array.<number>|undefined),
- *            imageUrlFunction: (ol.ImageUrlFunctionType|
- *                undefined)}}
- * @todo stability experimental
+ *            state: (ol.source.State|undefined)}}
  */
 ol.source.ImageOptions;
 
@@ -39,25 +33,10 @@ ol.source.Image = function(options) {
     attributions: options.attributions,
     extent: options.extent,
     logo: options.logo,
-    projection: options.projection
+    projection: options.projection,
+    state: options.state
   });
 
-  /**
-   * @protected
-   * @type {ol.ImageUrlFunctionType}
-   */
-  this.imageUrlFunction =
-      goog.isDef(options.imageUrlFunction) ?
-          options.imageUrlFunction :
-          ol.ImageUrlFunction.nullImageUrlFunction;
-
-  /**
-   * @protected
-   * @type {?string}
-   */
-  this.crossOrigin =
-      goog.isDef(options.crossOrigin) ? options.crossOrigin : null;
-
   /**
    * @private
    * @type {Array.<number>}
@@ -75,24 +54,10 @@ goog.inherits(ol.source.Image, ol.source.Source);
 
 
 /**
- * @protected
- * @param {ol.Extent} extent Extent.
- * @param {number} resolution Resolution.
- * @param {number} pixelRatio Pixel ratio.
- * @param {ol.Size} size Size.
- * @param {ol.proj.Projection} projection Projection.
- * @return {ol.Image} Single image.
+ * @return {Array.<number>} Resolutions.
  */
-ol.source.Image.prototype.createImage =
-    function(extent, resolution, pixelRatio, size, projection) {
-  var image = null;
-  var imageUrl = this.imageUrlFunction(extent, size, projection);
-  if (goog.isDef(imageUrl)) {
-    image = new ol.Image(
-        extent, resolution, pixelRatio, imageUrl, this.crossOrigin,
-        this.getAttributions());
-  }
-  return image;
+ol.source.Image.prototype.getResolutions = function() {
+  return this.resolutions_;
 };
 
 
@@ -116,6 +81,6 @@ ol.source.Image.prototype.findNearestResolution =
  * @param {number} resolution Resolution.
  * @param {number} pixelRatio Pixel ratio.
  * @param {ol.proj.Projection} projection Projection.
- * @return {ol.Image} Single image.
+ * @return {ol.ImageBase} Single image.
  */
 ol.source.Image.prototype.getImage = goog.abstractMethod;

src/ol/source/imagestaticsource.js

@@ -1,7 +1,6 @@
 goog.provide('ol.source.ImageStatic');
 
 goog.require('ol.Image');
-goog.require('ol.ImageUrlFunctionType');
 goog.require('ol.extent');
 goog.require('ol.proj');
 goog.require('ol.source.Image');
@@ -16,20 +15,21 @@ goog.require('ol.source.Image');
  */
 ol.source.ImageStatic = function(options) {
 
-  var imageFunction = ol.source.ImageStatic.createImageFunction(
-      options.url);
-
+  var attributions = goog.isDef(options.attributions) ?
+      options.attributions : null;
+  var crossOrigin = goog.isDef(options.crossOrigin) ?
+      options.crossOrigin : null;
   var imageExtent = options.imageExtent;
   var imageSize = options.imageSize;
   var imageResolution = (imageExtent[3] - imageExtent[1]) / imageSize[1];
+  var imageUrl = options.url;
   var projection = ol.proj.get(options.projection);
 
   goog.base(this, {
-    attributions: options.attributions,
-    crossOrigin: options.crossOrigin,
+    attributions: attributions,
     extent: options.extent,
-    projection: options.projection,
-    imageUrlFunction: imageFunction,
+    logo: options.logo,
+    projection: projection,
     resolutions: [imageResolution]
   });
 
@@ -37,8 +37,8 @@ ol.source.ImageStatic = function(options) {
    * @private
    * @type {ol.Image}
    */
-  this.image_ = this.createImage(
-      imageExtent, imageResolution, 1, imageSize, projection);
+  this.image_ = new ol.Image(imageExtent, imageResolution, 1, attributions,
+      imageUrl, crossOrigin);
 
 };
 goog.inherits(ol.source.ImageStatic, ol.source.Image);
@@ -54,21 +54,3 @@ ol.source.ImageStatic.prototype.getImage =
   }
   return null;
 };
-
-
-/**
- * @param {string|undefined} url URL.
- * @return {ol.ImageUrlFunctionType} Function.
- */
-ol.source.ImageStatic.createImageFunction = function(url) {
-  return (
-      /**
-       * @param {ol.Extent} extent Extent.
-       * @param {ol.Size} size Size.
-       * @param {ol.proj.Projection} projection Projection.
-       * @return {string|undefined} URL.
-       */
-      function(extent, size, projection) {
-        return url;
-      });
-};

src/ol/source/imagevectorsource.exports

@@ -0,0 +1 @@
+@exportSymbol ol.source.ImageVector

src/ol/source/imagevectorsource.js

@@ -0,0 +1,213 @@
+goog.provide('ol.source.ImageVector');
+
+goog.require('goog.asserts');
+goog.require('goog.dom');
+goog.require('goog.dom.TagName');
+goog.require('goog.events');
+goog.require('goog.events.EventType');
+goog.require('goog.vec.Mat4');
+goog.require('ol.extent');
+goog.require('ol.render.canvas.ReplayGroup');
+goog.require('ol.renderer.vector');
+goog.require('ol.source.ImageCanvas');
+goog.require('ol.source.Vector');
+goog.require('ol.style.ImageState');
+goog.require('ol.vec.Mat4');
+
+
+
+/**
+ * @constructor
+ * @extends {ol.source.ImageCanvas}
+ * @param {olx.source.ImageVectorOptions} options Options.
+ */
+ol.source.ImageVector = function(options) {
+
+  /**
+   * @private
+   * @type {ol.source.Vector}
+   */
+  this.source_ = options.source;
+
+  /**
+   * @private
+   * @type {ol.feature.StyleFunction}
+   */
+  this.styleFunction_ = options.styleFunction;
+
+  /**
+   * @private
+   * @type {!goog.vec.Mat4.Number}
+   */
+  this.transform_ = goog.vec.Mat4.createNumber();
+
+  /**
+   * @private
+   * @type {HTMLCanvasElement}
+   */
+  this.canvasElement_ = /** @type {HTMLCanvasElement} */
+      (goog.dom.createElement(goog.dom.TagName.CANVAS));
+
+  /**
+   * @private
+   * @type {CanvasRenderingContext2D}
+   */
+  this.canvasContext_ = /** @type {CanvasRenderingContext2D} */
+      (this.canvasElement_.getContext('2d'));
+
+  /**
+   * @private
+   * @type {ol.Size}
+   */
+  this.canvasSize_ = [0, 0];
+
+  goog.base(this, {
+    attributions: options.attributions,
+    canvasFunction: goog.bind(this.canvasFunctionInternal_, this),
+    extent: options.extent,
+    logo: options.logo,
+    projection: options.projection,
+    ratio: options.ratio,
+    resolutions: options.resolutions,
+    state: this.source_.getState()
+  });
+
+  goog.events.listen(this.source_, goog.events.EventType.CHANGE,
+      this.handleSourceChange_, undefined, this);
+
+};
+goog.inherits(ol.source.ImageVector, ol.source.ImageCanvas);
+
+
+/**
+ * @param {ol.Extent} extent Extent.
+ * @param {number} resolution Resolution.
+ * @param {number} pixelRatio Pixel ratio.
+ * @param {ol.Size} size Size.
+ * @param {ol.proj.Projection} projection Projection;
+ * @return {HTMLCanvasElement} Canvas element.
+ * @private
+ */
+ol.source.ImageVector.prototype.canvasFunctionInternal_ =
+    function(extent, resolution, pixelRatio, size, projection) {
+
+  var tolerance = resolution / (2 * pixelRatio);
+  var replayGroup = new ol.render.canvas.ReplayGroup(
+      pixelRatio, tolerance);
+
+  var loading = false;
+  this.source_.forEachFeatureInExtent(extent,
+      /**
+       * @param {ol.Feature} feature Feature.
+       */
+      function(feature) {
+        loading = loading ||
+            this.renderFeature_(feature, resolution, pixelRatio, replayGroup);
+      }, this);
+  replayGroup.finish();
+
+  if (loading) {
+    return null;
+  }
+
+  if (this.canvasSize_[0] != size[0] || this.canvasSize_[1] != size[1]) {
+    this.canvasElement_.width = size[0];
+    this.canvasElement_.height = size[1];
+    this.canvasSize_[0] = size[0];
+    this.canvasSize_[1] = size[1];
+  } else {
+    this.canvasContext_.clearRect(0, 0, size[0], size[1]);
+  }
+
+  var transform = this.getTransform_(ol.extent.getCenter(extent),
+      resolution, pixelRatio, size);
+  replayGroup.replay(this.canvasContext_, extent, transform,
+      goog.functions.TRUE);
+
+  return this.canvasElement_;
+};
+
+
+/**
+ * @param {ol.Coordinate} center Center.
+ * @param {number} resolution Resolution.
+ * @param {number} pixelRatio Pixel ratio.
+ * @param {ol.Size} size Size.
+ * @return {!goog.vec.Mat4.Number} Transform.
+ * @private
+ */
+ol.source.ImageVector.prototype.getTransform_ =
+    function(center, resolution, pixelRatio, size) {
+  return ol.vec.Mat4.makeTransform2D(this.transform_,
+      size[0] / 2, size[1] / 2,
+      pixelRatio / resolution, -pixelRatio / resolution,
+      0,
+      -center[0], -center[1]);
+};
+
+
+/**
+ * Handle changes in image style state.
+ * @param {goog.events.Event} event Image style change event.
+ * @private
+ */
+ol.source.ImageVector.prototype.handleImageStyleChange_ =
+    function(event) {
+  var imageStyle = /** @type {ol.style.Image} */ (event.target);
+  if (imageStyle.getImageState() == ol.style.ImageState.LOADED) {
+    this.dispatchChangeEvent();
+  }
+};
+
+
+/**
+ * @private
+ */
+ol.source.ImageVector.prototype.handleSourceChange_ = function() {
+  // setState will trigger a CHANGE event, so we always rely
+  // change events by calling setState.
+  this.setState(this.source_.getState());
+};
+
+
+/**
+ * @param {ol.Feature} feature Feature.
+ * @param {number} resolution Resolution.
+ * @param {number} pixelRatio Pixel ratio.
+ * @param {ol.render.canvas.ReplayGroup} replayGroup Replay group.
+ * @return {boolean} `true` if an image is loading.
+ * @private
+ */
+ol.source.ImageVector.prototype.renderFeature_ =
+    function(feature, resolution, pixelRatio, replayGroup) {
+  var loading = false;
+  var styles = this.styleFunction_(feature, resolution);
+  if (!goog.isDefAndNotNull(styles)) {
+    return false;
+  }
+  // simplify to a tolerance of half a device pixel
+  var squaredTolerance =
+      resolution * resolution / (4 * pixelRatio * pixelRatio);
+  var i, ii, style, imageStyle, imageState;
+  for (i = 0, ii = styles.length; i < ii; ++i) {
+    style = styles[i];
+    imageStyle = style.getImage();
+    if (!goog.isNull(imageStyle)) {
+      if (imageStyle.getImageState() == ol.style.ImageState.IDLE) {
+        goog.events.listenOnce(imageStyle, goog.events.EventType.CHANGE,
+            this.handleImageStyleChange_, false, this);
+        imageStyle.load();
+      } else if (imageStyle.getImageState() == ol.style.ImageState.LOADED) {
+        ol.renderer.vector.renderFeature(
+            replayGroup, feature, style, squaredTolerance, feature);
+      }
+      goog.asserts.assert(
+          imageStyle.getImageState() != ol.style.ImageState.IDLE);
+      loading = imageStyle.getImageState() == ol.style.ImageState.LOADING;
+    } else {
+      ol.renderer.vector.renderFeature(
+          replayGroup, feature, style, squaredTolerance, feature);
+    }
+  }
+  return loading;
+};

src/ol/source/imagewmssource.js

@@ -24,12 +24,19 @@ ol.source.ImageWMS = function(opt_options) {
 
   goog.base(this, {
     attributions: options.attributions,
-    crossOrigin: options.crossOrigin,
     extent: options.extent,
+    logo: options.logo,
     projection: options.projection,
     resolutions: options.resolutions
   });
 
+  /**
+   * @private
+   * @type {?string}
+   */
+  this.crossOrigin_ =
+      goog.isDef(options.crossOrigin) ? options.crossOrigin : null;
+
   /**
    * @private
    * @type {string|undefined}
@@ -181,8 +188,8 @@ ol.source.ImageWMS.prototype.getImage =
 
   var url = goog.uri.utils.appendParamsFromMap(this.url_, params);
 
-  this.image_ = new ol.Image(extent, resolution, pixelRatio, url,
-      this.crossOrigin, this.getAttributions());
+  this.image_ = new ol.Image(extent, resolution, pixelRatio,
+      this.getAttributions(), url, this.crossOrigin_);
   return this.image_;
 
 };

src/ol/source/mapguidesource.js

@@ -2,6 +2,7 @@ goog.provide('ol.source.MapGuide');
 
 goog.require('goog.object');
 goog.require('goog.uri.utils');
+goog.require('ol.Image');
 goog.require('ol.ImageUrlFunction');
 goog.require('ol.extent');
 goog.require('ol.source.Image');
@@ -15,6 +16,26 @@ goog.require('ol.source.Image');
  */
 ol.source.MapGuide = function(options) {
 
+  goog.base(this, {
+    extent: options.extent,
+    projection: options.projection,
+    resolutions: options.resolutions
+  });
+
+  /**
+   * @private
+   * @type {?string}
+   */
+  this.crossOrigin_ =
+      goog.isDef(options.crossOrigin) ? options.crossOrigin : null;
+
+  /**
+   * @private
+   * @type {number}
+   */
+  this.displayDpi_ = goog.isDef(options.displayDpi) ?
+      options.displayDpi : 96;
+
   var imageUrlFunction;
   if (goog.isDef(options.url)) {
     var params = goog.isDef(options.params) ? options.params : {};
@@ -24,12 +45,11 @@ ol.source.MapGuide = function(options) {
     imageUrlFunction = ol.ImageUrlFunction.nullImageUrlFunction;
   }
 
-  goog.base(this, {
-    extent: options.extent,
-    projection: options.projection,
-    resolutions: options.resolutions,
-    imageUrlFunction: imageUrlFunction
-  });
+  /**
+   * @private
+   * @type {ol.ImageUrlFunctionType}
+   */
+  this.imageUrlFunction_ = imageUrlFunction;
 
   /**
    * @private
@@ -37,13 +57,6 @@ ol.source.MapGuide = function(options) {
    */
   this.hidpi_ = goog.isDef(options.hidpi) ? options.hidpi : true;
 
-  /**
-   * @private
-   * @type {number}
-   */
-  this.displayDpi_ = goog.isDef(options.displayDpi) ?
-      options.displayDpi : 96;
-
   /**
    * @private
    * @type {number}
@@ -98,9 +111,16 @@ ol.source.MapGuide.prototype.getImage =
   var height = (extent[3] - extent[1]) / resolution;
   var size = [width * pixelRatio, height * pixelRatio];
 
-  this.image_ = this.createImage(
-      extent, resolution, pixelRatio, size, projection);
-  return this.image_;
+  var imageUrl = this.imageUrlFunction_(extent, size, projection);
+  if (goog.isDef(imageUrl)) {
+    image = new ol.Image(extent, resolution, pixelRatio,
+        this.getAttributions(), imageUrl, this.crossOrigin_);
+  } else {
+    image = null;
+  }
+  this.image_ = image;
+
+  return image;
 };