diff --git a/src/ol/Tile.js b/src/ol/Tile.js index 46d67c2b35..697e0633d3 100644 --- a/src/ol/Tile.js +++ b/src/ol/Tile.js @@ -41,7 +41,7 @@ ol.Tile = function(url, bounds) { * @private * @type {HTMLImageElement} */ - this.img_ = ol.Tile.createImage(); + this.img_ = this.createImage(); goog.events.listenOnce(this.img_, goog.events.EventType.LOAD, this.handleImageLoad, false, this); goog.events.listenOnce(this.img_, goog.events.EventType.ERROR, @@ -54,6 +54,14 @@ ol.Tile = function(url, bounds) { this.events_ = new ol.event.Events(this); }; +/** + * @protected + * @return {HTMLImageElement} + */ +ol.Tile.prototype.createImage = function() { + // overriden by subclasses +}; + /** * Load the tile. A tile should loaded only once. */ @@ -131,3 +139,32 @@ ol.Tile.createImage = (function() { return img.cloneNode(false); }; })(); + +/** + * Create a tile constructor, for specific width and height values + * for the tiles. + * @param {number} width + * @param {number} height + * @return {function(new:ol.Tile, string, ol.Bounds)} + */ +ol.Tile.createConstructor = function(width, height) { + /** + * @constructor + * @extends {ol.Tile} + */ + var Tile = function(url, bounds) { + goog.base(this, url, bounds); + }; + goog.inherits(Tile, ol.Tile); + /** @inheritDoc */ + Tile.prototype.createImage = (function() { + var img = document.createElement("img"); + img.className = "olTile"; + img.style.width = width + "px"; + img.style.height = height + "px"; + return function() { + return img.cloneNode(false); + }; + })(); + return Tile; +}; diff --git a/src/ol/geom/Collection.js b/src/ol/geom/Collection.js index fd6b82b7bc..becab21427 100644 --- a/src/ol/geom/Collection.js +++ b/src/ol/geom/Collection.js @@ -7,6 +7,7 @@ goog.require('ol.Projection'); /** * Creates ol.geom.Collection objects. * + * @export * @extends {ol.geom.Geometry} * @param {Array.} components An array of components. * diff --git a/src/ol/geom/LineString.js b/src/ol/geom/LineString.js index 54b07295d5..af8a857659 100644 --- a/src/ol/geom/LineString.js +++ b/src/ol/geom/LineString.js @@ -8,6 +8,7 @@ goog.require('ol.Projection'); /** * Creates ol.geom.LineString objects. * + * @export * @extends {ol.geom.Geometry} * @param {Array.} vertices An array of points building the * linestrings vertices. diff --git a/src/ol/geom/MultiPoint.js b/src/ol/geom/MultiPoint.js index cf84c6b923..d271c17740 100644 --- a/src/ol/geom/MultiPoint.js +++ b/src/ol/geom/MultiPoint.js @@ -6,6 +6,7 @@ goog.require('ol.geom.Collection'); /** * Creates ol.geom.MultiPoint objects. * + * @export * @extends {ol.geom.Collection} * @param {Array.} points An array of points. * diff --git a/src/ol/layer/TileLayer.js b/src/ol/layer/TileLayer.js index 075d624d07..3fe27a9c7e 100644 --- a/src/ol/layer/TileLayer.js +++ b/src/ol/layer/TileLayer.js @@ -1,6 +1,7 @@ goog.provide('ol.layer.TileLayer'); goog.require('ol.layer.Layer'); +goog.require('ol.Tile'); goog.require('ol.TileCache'); /** @@ -33,6 +34,12 @@ ol.layer.TileLayer = function() { */ this.tileHeight_ = 256; + /** + * @protected + * @type {function(new:ol.Tile, string, ol.Bounds)} + */ + this.Tile = ol.Tile.createConstructor(this.tileWidth_, this.tileHeight_); + /** * @protected * @type {number|undefined} @@ -170,16 +177,6 @@ ol.layer.TileLayer.prototype.setExtent = function(extent) { this.extent_ = extent; }; -/** - * Set tile width and height. - * @param {number} width - * @param {number} height - */ -ol.layer.TileLayer.prototype.setTileSize = function(width, height) { - this.tileWidth_ = width; - this.tileHeight_ = height; -}; - /** * Set tile origin. * @param {number} tileOriginX @@ -231,7 +228,7 @@ ol.layer.TileLayer.prototype.setResolutions = function(resolutions) { ol.layer.TileLayer.prototype.getTile = function(url, bounds) { var tile = this.cache_.get(url); if (!goog.isDef(tile)) { - tile = new ol.Tile(url, bounds); + tile = new this.Tile(url, bounds); this.cache_.set(tile.getUrl(), tile); } return tile; diff --git a/src/ol/layer/XYZ.js b/src/ol/layer/XYZ.js index 72b604aba8..d1c885f672 100644 --- a/src/ol/layer/XYZ.js +++ b/src/ol/layer/XYZ.js @@ -2,7 +2,6 @@ goog.provide('ol.layer.XYZ'); goog.require('ol.layer.TileLayer'); goog.require('ol.Projection'); -goog.require('ol.Tile'); goog.require('ol.TileSet'); /** @@ -25,17 +24,6 @@ ol.layer.XYZ = function(url) { goog.base(this); this.setMaxResolution(156543.03390625); - - this.setResolutions([ - 156543.03390625, 78271.516953125, 39135.7584765625, - 19567.87923828125, 9783.939619140625, 4891.9698095703125, - 2445.9849047851562, 1222.9924523925781, 611.4962261962891, - 305.74811309814453, 152.87405654907226, 76.43702827453613, - 38.218514137268066, 19.109257068634033, 9.554628534317017, - 4.777314267158508, 2.388657133579254, 1.194328566789627, - 0.5971642833948135, 0.29858214169740677, 0.14929107084870338, - 0.07464553542435169 - ]); }; goog.inherits(ol.layer.XYZ, ol.layer.TileLayer); diff --git a/test/spec/ol/Tile.test.js b/test/spec/ol/Tile.test.js index 09da3cf146..440efdf3a4 100644 --- a/test/spec/ol/Tile.test.js +++ b/test/spec/ol/Tile.test.js @@ -1,9 +1,22 @@ describe("ol.Tile", function() { + describe("create a tile constructor", function() { + it("returns a constructor than can create tiles with expected properties", function() { + var Tile = ol.Tile.createConstructor(100, 100); + expect(typeof Tile).toEqual("function"); + var tile = new Tile('url'); + expect(tile).toBeA(ol.Tile); + expect(tile.getImg().className).toEqual('olTile'); + expect(tile.getImg().style.width).toEqual("100px"); + expect(tile.getImg().style.height).toEqual("100px"); + }); + }); + describe("create a tile", function() { var tile; beforeEach(function() { - tile = new ol.Tile('http://a.url'); + var Tile = ol.Tile.createConstructor(200, 200); + tile = new Tile('http://a.url'); }); it("creates a tile instance", function() { expect(tile).toBeA(ol.Tile); @@ -16,7 +29,8 @@ describe("ol.Tile", function() { describe("handle image load", function() { var tile; beforeEach(function() { - tile = new ol.Tile('http://a.url'); + var Tile = ol.Tile.createConstructor(200, 200); + tile = new Tile('http://a.url'); }); it("fires a load event", function() { var spy = jasmine.createSpy(); @@ -33,7 +47,8 @@ describe("ol.Tile", function() { describe("handle image error", function() { var tile; beforeEach(function() { - tile = new ol.Tile('http://a.url'); + var Tile = ol.Tile.createConstructor(200, 200); + tile = new Tile('http://a.url'); }); it("fires a load event", function() { var spy = jasmine.createSpy(); diff --git a/test/spec/ol/TileCache.test.js b/test/spec/ol/TileCache.test.js index 5211ac22a1..a3a8a3140d 100644 --- a/test/spec/ol/TileCache.test.js +++ b/test/spec/ol/TileCache.test.js @@ -2,17 +2,18 @@ describe('ol.TileCache', function() { describe('exceed the cache capacity', function() { - var tilecache, tile; + var Tile, tilecache, tile; beforeEach(function() { + Tile = ol.Tile.createConstructor(200, 200); tilecache = new ol.TileCache(1); - tile = new ol.Tile('url1'); + tile = new Tile('url1'); tilecache.set('url1', tile); spyOn(tile, 'destroy'); }); it('calls tile.destroy', function() { - tilecache.set('url2', new ol.Tile('url2')); + tilecache.set('url2', new Tile('url2')); expect(tile.destroy).toHaveBeenCalled(); }); });