diff --git a/examples/wms-tiled.js b/examples/wms-tiled.js index c6bd093ef7..2bbb6f74f4 100644 --- a/examples/wms-tiled.js +++ b/examples/wms-tiled.js @@ -3,6 +3,7 @@ goog.require('ol.View'); goog.require('ol.layer.Tile'); goog.require('ol.source.OSM'); goog.require('ol.source.TileWMS'); +goog.require('ol.tilegrid'); var layers = [ @@ -14,7 +15,11 @@ var layers = [ source: new ol.source.TileWMS({ url: 'https://ahocevar.com/geoserver/wms', params: {'LAYERS': 'topp:states', 'TILED': true}, - serverType: 'geoserver' + serverType: 'geoserver', + tileGrid: ol.tilegrid.createXYZ({tileSize: [192, 256]}), + tileLoadFunction: function(tile, src) { + tile.getImage().src = src + '&tc=' + tile.getTileCoord().toString(); + } }) }) ]; @@ -23,6 +28,7 @@ var map = new ol.Map({ target: 'map', view: new ol.View({ center: [-10997148, 4569099], - zoom: 4 + zoom: 5, + resolutions: layers[1].getSource().getTileGrid().getResolutions() }) }); diff --git a/src/ol/renderer/canvas/tilelayer.js b/src/ol/renderer/canvas/tilelayer.js index 2e1da77895..160a0f9609 100644 --- a/src/ol/renderer/canvas/tilelayer.js +++ b/src/ol/renderer/canvas/tilelayer.js @@ -180,7 +180,7 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame = function(frameState, layer var tilePixelSize = tileSource.getTilePixelSize(z, pixelRatio, projection); var width = Math.round(tileRange.getWidth() * tilePixelSize[0] / oversampling); - var height = Math.round(tileRange.getHeight() * tilePixelSize[0] / oversampling); + var height = Math.round(tileRange.getHeight() * tilePixelSize[1] / oversampling); var context = this.context; var canvas = context.canvas; var opaque = tileSource.getOpaque(projection); diff --git a/test_rendering/spec/ol/data/tiles/192x256/5/6/9.png b/test_rendering/spec/ol/data/tiles/192x256/5/6/9.png new file mode 100644 index 0000000000..787fbe4fe2 Binary files /dev/null and b/test_rendering/spec/ol/data/tiles/192x256/5/6/9.png differ diff --git a/test_rendering/spec/ol/data/tiles/192x256/5/7/9.png b/test_rendering/spec/ol/data/tiles/192x256/5/7/9.png new file mode 100644 index 0000000000..5a0db7a555 Binary files /dev/null and b/test_rendering/spec/ol/data/tiles/192x256/5/7/9.png differ diff --git a/test_rendering/spec/ol/data/tiles/512x256/5/3/19.png b/test_rendering/spec/ol/data/tiles/512x256/5/3/12.png similarity index 100% rename from test_rendering/spec/ol/data/tiles/512x256/5/3/19.png rename to test_rendering/spec/ol/data/tiles/512x256/5/3/12.png diff --git a/test_rendering/spec/ol/layer/expected/192x256-canvas.png b/test_rendering/spec/ol/layer/expected/192x256-canvas.png new file mode 100644 index 0000000000..3ce0b9d27f Binary files /dev/null and b/test_rendering/spec/ol/layer/expected/192x256-canvas.png differ diff --git a/test_rendering/spec/ol/layer/expected/192x256-webgl.png b/test_rendering/spec/ol/layer/expected/192x256-webgl.png new file mode 100644 index 0000000000..3ce0b9d27f Binary files /dev/null and b/test_rendering/spec/ol/layer/expected/192x256-webgl.png differ diff --git a/test_rendering/spec/ol/layer/tile.test.js b/test_rendering/spec/ol/layer/tile.test.js index bf64f20188..2ab6e129d9 100644 --- a/test_rendering/spec/ol/layer/tile.test.js +++ b/test_rendering/spec/ol/layer/tile.test.js @@ -12,14 +12,14 @@ goog.require('ol.source.XYZ'); goog.require('ol.style.Circle'); goog.require('ol.style.Fill'); goog.require('ol.style.Stroke'); -goog.require('ol.tilegrid.TileGrid'); +goog.require('ol.tilegrid'); describe('ol.rendering.layer.Tile', function() { var target, map; - function createMap(renderer, opt_center, opt_size, opt_pixelRatio) { + function createMap(renderer, opt_center, opt_size, opt_pixelRatio, opt_resolutions) { var size = opt_size !== undefined ? opt_size : [50, 50]; target = createMapDiv(size[0], size[1]); @@ -30,6 +30,7 @@ describe('ol.rendering.layer.Tile', function() { view: new ol.View({ center: opt_center !== undefined ? opt_center : ol.proj.transform( [-122.416667, 37.783333], 'EPSG:4326', 'EPSG:3857'), + resolutions: opt_resolutions, zoom: 5 }) }); @@ -205,30 +206,22 @@ describe('ol.rendering.layer.Tile', function() { }); describe('tile layer with non-square tiles', function() { - var source; - beforeEach(function() { - source = new ol.source.TileImage({ - tileUrlFunction: function(tileCoord, ratio, projection) { - return 'spec/ol/data/tiles/512x256/' + tileCoord[0] + '/' + - tileCoord[1] + '/' + tileCoord[2] + '.png'; - }, - tileGrid: new ol.tilegrid.TileGrid({ - origin: [-20037508.342789244, -20037508.342789244], - resolutions: [ - 156543.03392804097, 78271.51696402048, 39135.75848201024, - 19567.87924100512, 9783.93962050256, 4891.96981025128 - ], - tileSize: [512, 256] + function createSource(tileSize) { + return new ol.source.TileImage({ + url: 'spec/ol/data/tiles/' + tileSize + '/{z}/{x}/{y}.png', + tileGrid: ol.tilegrid.createXYZ({ + tileSize: tileSize.split('x') }) }); - }); + } afterEach(function() { disposeMap(map); }); - it('renders correcly using the canvas renderer', function(done) { + it('512x256 renders correcly using the canvas renderer', function(done) { + var source = createSource('512x256'); map = createMap('canvas', [-10997148, 4569099]); waitForTiles([source], {}, function() { expectResemble(map, 'spec/ol/layer/expected/512x256-canvas.png', @@ -236,8 +229,9 @@ describe('ol.rendering.layer.Tile', function() { }); }); - it('renders correcly using the webgl renderer', function(done) { + it('512x256 renders correcly using the webgl renderer', function(done) { assertWebGL(); + var source = createSource('512x256'); map = createMap('webgl', [-10997148, 4569099]); waitForTiles([source], {}, function() { expectResemble(map, 'spec/ol/layer/expected/512x256-webgl.png', @@ -245,6 +239,26 @@ describe('ol.rendering.layer.Tile', function() { }); }); + it('192x256 renders correcly using the canvas renderer', function(done) { + var source = createSource('192x256'); + map = createMap('canvas', [-11271098, 3747248], [100, 100], undefined, + source.getTileGrid().getResolutions()); + waitForTiles([source], {}, function() { + expectResemble(map, 'spec/ol/layer/expected/192x256-canvas.png', + IMAGE_TOLERANCE, done); + }); + }); + + it('192x256 renders correcly using the webgl renderer', function(done) { + assertWebGL(); + var source = createSource('192x256'); + map = createMap('webgl', [-11271098, 3747248], [100, 100], undefined, + source.getTileGrid().getResolutions()); + waitForTiles([source], {}, function() { + expectResemble(map, 'spec/ol/layer/expected/192x256-webgl.png', + IMAGE_TOLERANCE, done); + }); + }); }); describe('tile layer with render listener', function() {