diff --git a/examples/static-image.html b/examples/static-image.html
index 60c1823c13..4e761dc286 100644
--- a/examples/static-image.html
+++ b/examples/static-image.html
@@ -34,8 +34,16 @@
Static image example
Example of a static image layer.
static image, xkcd
diff --git a/examples/static-image.js b/examples/static-image.js
index 6487af2b01..747d70b0b1 100644
--- a/examples/static-image.js
+++ b/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,
-// and are only measured in pixels. So, we create a fake projection that the
-// map can use to properly display the layer.
-var pixelProjection = new ol.proj.Projection({
- code: 'pixel',
+// Map views always need a projection. Here we just want to map image
+// coordinates directly to map coordinates, so we create a projection that uses
+// the image extent in pixels.
+var extent = [0, 0, 1024, 968];
+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: pixelProjection,
- imageExtent: pixelProjection.getExtent()
+ projection: projection,
+ imageExtent: extent
})
})
],
target: 'map',
view: new ol.View({
- projection: pixelProjection,
- center: ol.extent.getCenter(pixelProjection.getExtent()),
+ projection: projection,
+ center: ol.extent.getCenter(extent),
zoom: 2
})
});
diff --git a/externs/olx.js b/externs/olx.js
index 4180b053c7..279396a59a 100644
--- a/externs/olx.js
+++ b/externs/olx.js
@@ -4524,7 +4524,7 @@ olx.source.StamenOptions.prototype.url;
/**
* @typedef {{attributions: (Array.|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;
diff --git a/src/ol/image.js b/src/ol/image.js
index 0b7c3bc63d..46d2f065c8 100644
--- a/src/ol/image.js
+++ b/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.} 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();
diff --git a/src/ol/imagebase.js b/src/ol/imagebase.js
index ff6d2b4c06..881c93dd53 100644
--- a/src/ol/imagebase.js
+++ b/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.} 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
- * @type {number}
+ * @protected
+ * @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;
};
diff --git a/src/ol/source/imagestaticsource.js b/src/ol/source/imagestaticsource.js
index eb8fe9c181..4aea4b4b81 100644
--- a/src/ol/source/imagestaticsource.js
+++ b/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,
- resolutions: [imageResolution]
+ projection: ol.proj.get(options.projection),
+ resolutions: resolutions
});
/**
* @private
* @type {ol.Image}
*/
- this.image_ = new ol.Image(imageExtent, imageResolution, 1, attributions,
- imageUrl, crossOrigin);
+ this.image_ = new ol.Image(imageExtent, resolution, 1, attributions,
+ options.url, crossOrigin);
};
goog.inherits(ol.source.ImageStatic, ol.source.Image);