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.

-

Source: xkcd.com/256/

-

See the static-image.js source to see how this is done.

+

+ This example uses a static image + as a layer source. The map view is configured with a custom + projection that translates image coordinates directly into map + coordinates. +

+

+ See the static-image.js source + for details on how this is done. +

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