Merge pull request #2796 from tschaub/lazy-size

Determine image size on load.

examples/static-image.html

@@ -34,8 +34,16 @@
           <h4 id="title">Static image example</h4>
           <p id="shortdesc">Example of a static image layer.</p>
           <div id="docs">
-            <p>Source: <a href="http://xkcd.com/256/">xkcd.com/256/</a></p>
+            <p>
-            <p>See the <a href="static-image.js" target="_blank">static-image.js source</a> to see how this is done.</p>
+              This example uses a <a href="http://xkcd.com/256/">static image</a>
+              as a layer source.  The map view is configured with a custom
+              projection that translates image coordinates directly into map
+              coordinates.
+            </p>
+            <p>
+              See the <a href="static-image.js" target="_blank">static-image.js source</a>
+              for details on how this is done.
+            </p>
           </div>
           <div id="tags">static image, xkcd</div>
         </div>

examples/static-image.js

@@ -7,13 +7,14 @@ goog.require('ol.proj.Projection');
 goog.require('ol.source.ImageStatic');
 
 
-// Maps always need a projection, but the static image is not geo-referenced,
+// Map views always need a projection.  Here we just want to map image
-// and are only measured in pixels.  So, we create a fake projection that the
+// coordinates directly to map coordinates, so we create a projection that uses
-// map can use to properly display the layer.
+// the image extent in pixels.
-var pixelProjection = new ol.proj.Projection({
+var extent = [0, 0, 1024, 968];
-  code: 'pixel',
+var projection = new ol.proj.Projection({
+  code: 'xkcd-image',
   units: 'pixels',
-  extent: [0, 0, 1024, 968]
+  extent: extent
 });
 
 var map = new ol.Map({
@@ -26,16 +27,15 @@ var map = new ol.Map({
           })
         ],
         url: 'http://imgs.xkcd.com/comics/online_communities.png',
-        imageSize: [1024, 968],
+        projection: projection,
-        projection: pixelProjection,
+        imageExtent: extent
-        imageExtent: pixelProjection.getExtent()
       })
     })
   ],
   target: 'map',
   view: new ol.View({
-    projection: pixelProjection,
+    projection: projection,
-    center: ol.extent.getCenter(pixelProjection.getExtent()),
+    center: ol.extent.getCenter(extent),
     zoom: 2
   })
 });

externs/olx.js

@@ -4524,7 +4524,7 @@ olx.source.StamenOptions.prototype.url;
 /**
  * @typedef {{attributions: (Array.<ol.Attribution>|undefined),
  *     crossOrigin: (null|string|undefined),
- *     imageExtent: (ol.Extent|undefined),
+ *     imageExtent: (ol.Extent),
  *     imageSize: (ol.Size|undefined),
  *     logo: (string|olx.LogoOptions|undefined),
  *     projection: ol.proj.ProjectionLike,
@@ -4552,7 +4552,7 @@ olx.source.ImageStaticOptions.prototype.crossOrigin;
 
 /**
  * Extent of the image.
- * @type {ol.Extent|undefined}
+ * @type {ol.Extent}
  * @api stable
  */
 olx.source.ImageStaticOptions.prototype.imageExtent;

src/ol/image.js

@@ -7,6 +7,7 @@ goog.require('goog.events.EventType');
 goog.require('goog.object');
 goog.require('ol.ImageBase');
 goog.require('ol.ImageState');
+goog.require('ol.extent');
 
 
 
@@ -14,7 +15,7 @@ goog.require('ol.ImageState');
  * @constructor
  * @extends {ol.ImageBase}
  * @param {ol.Extent} extent Extent.
- * @param {number} resolution Resolution.
+ * @param {number|undefined} resolution Resolution.
  * @param {number} pixelRatio Pixel ratio.
  * @param {Array.<ol.Attribution>} attributions Attributions.
  * @param {string} src Image source URI.
@@ -103,6 +104,9 @@ ol.Image.prototype.handleImageError_ = function() {
  * @private
  */
 ol.Image.prototype.handleImageLoad_ = function() {
+  if (!goog.isDef(this.resolution)) {
+    this.resolution = ol.extent.getHeight(this.extent) / this.image_.height;
+  }
   this.state = ol.ImageState.LOADED;
   this.unlistenImage_();
   this.changed();

src/ol/imagebase.js

@@ -1,6 +1,7 @@
 goog.provide('ol.ImageBase');
 goog.provide('ol.ImageState');
 
+goog.require('goog.asserts');
 goog.require('goog.events.EventTarget');
 goog.require('goog.events.EventType');
 goog.require('ol.Attribution');
@@ -23,7 +24,7 @@ ol.ImageState = {
  * @constructor
  * @extends {goog.events.EventTarget}
  * @param {ol.Extent} extent Extent.
- * @param {number} resolution Resolution.
+ * @param {number|undefined} resolution Resolution.
  * @param {number} pixelRatio Pixel ratio.
  * @param {ol.ImageState} state State.
  * @param {Array.<ol.Attribution>} attributions Attributions.
@@ -39,10 +40,10 @@ ol.ImageBase = function(extent, resolution, pixelRatio, state, attributions) {
   this.attributions_ = attributions;
 
   /**
-   * @private
+   * @protected
    * @type {ol.Extent}
    */
-  this.extent_ = extent;
+  this.extent = extent;
 
   /**
    * @private
@@ -51,10 +52,10 @@ ol.ImageBase = function(extent, resolution, pixelRatio, state, attributions) {
   this.pixelRatio_ = pixelRatio;
 
   /**
-   * @private
+   * @protected
-   * @type {number}
+   * @type {number|undefined}
    */
-  this.resolution_ = resolution;
+  this.resolution = resolution;
 
   /**
    * @protected
@@ -86,7 +87,7 @@ ol.ImageBase.prototype.getAttributions = function() {
  * @return {ol.Extent} Extent.
  */
 ol.ImageBase.prototype.getExtent = function() {
-  return this.extent_;
+  return this.extent;
 };
 
 
@@ -109,7 +110,8 @@ ol.ImageBase.prototype.getPixelRatio = function() {
  * @return {number} Resolution.
  */
 ol.ImageBase.prototype.getResolution = function() {
-  return this.resolution_;
+  goog.asserts.assert(goog.isDef(this.resolution), 'resolution not yet set');
+  return this.resolution;
 };
 
 

src/ol/source/imagestaticsource.js

@@ -1,5 +1,6 @@
 goog.provide('ol.source.ImageStatic');
 
+goog.require('goog.events');
 goog.require('ol.Image');
 goog.require('ol.extent');
 goog.require('ol.proj');
@@ -21,27 +22,31 @@ ol.source.ImageStatic = function(options) {
 
   var attributions = goog.isDef(options.attributions) ?
       options.attributions : null;
+
+  var imageExtent = options.imageExtent;
+
+  var resolution, resolutions;
+  if (goog.isDef(options.imageSize)) {
+    resolution = ol.extent.getHeight(imageExtent) / options.imageSize[1];
+    resolutions = [resolution];
+  }
+
   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: attributions,
     logo: options.logo,
-    projection: projection,
+    projection: ol.proj.get(options.projection),
-    resolutions: [imageResolution]
+    resolutions: resolutions
   });
 
   /**
    * @private
    * @type {ol.Image}
    */
-  this.image_ = new ol.Image(imageExtent, imageResolution, 1, attributions,
+  this.image_ = new ol.Image(imageExtent, resolution, 1, attributions,
-      imageUrl, crossOrigin);
+      options.url, crossOrigin);
 
 };
 goog.inherits(ol.source.ImageStatic, ol.source.Image);