diff --git a/examples/wms-custom-proj.js b/examples/wms-custom-proj.js index e3b5f2920b..1a34e76ed1 100644 --- a/examples/wms-custom-proj.js +++ b/examples/wms-custom-proj.js @@ -44,6 +44,7 @@ ol.proj.addCoordinateTransforms('EPSG:4326', projection, var extent = [420000, 30000, 900000, 350000]; var layers = [ new ol.layer.Tile({ + extent: extent, source: new ol.source.TileWMS({ url: 'http://wms.geo.admin.ch/', crossOrigin: 'anonymous', @@ -57,11 +58,11 @@ var layers = [ 'LAYERS': 'ch.swisstopo.pixelkarte-farbe-pk1000.noscale', 'FORMAT': 'image/jpeg' }, - extent: extent, serverType: 'mapserver' }) }), new ol.layer.Tile({ + extent: extent, source: new ol.source.TileWMS({ url: 'http://wms.geo.admin.ch/', crossOrigin: 'anonymous', @@ -72,7 +73,6 @@ var layers = [ 'National parks / geo.admin.ch' })], params: {'LAYERS': 'ch.bafu.schutzgebiete-paerke_nationaler_bedeutung'}, - extent: extent, serverType: 'mapserver' }) }) diff --git a/examples/wms-image-custom-proj.js b/examples/wms-image-custom-proj.js index b12037033d..f48c9c256a 100644 --- a/examples/wms-image-custom-proj.js +++ b/examples/wms-image-custom-proj.js @@ -24,6 +24,7 @@ projection.setExtent([485869.5728, 76443.1884, 837076.5648, 299941.7864]); var extent = [420000, 30000, 900000, 350000]; var layers = [ new ol.layer.Image({ + extent: extent, source: new ol.source.ImageWMS({ url: 'http://wms.geo.admin.ch/', crossOrigin: 'anonymous', @@ -37,11 +38,11 @@ var layers = [ 'LAYERS': 'ch.swisstopo.pixelkarte-farbe-pk1000.noscale', 'FORMAT': 'image/jpeg' }, - serverType: /** @type {ol.source.wms.ServerType} */ ('mapserver'), - extent: extent + serverType: /** @type {ol.source.wms.ServerType} */ ('mapserver') }) }), new ol.layer.Image({ + extent: extent, source: new ol.source.ImageWMS({ url: 'http://wms.geo.admin.ch/', crossOrigin: 'anonymous', @@ -52,8 +53,7 @@ var layers = [ 'National parks / geo.admin.ch' })], params: {'LAYERS': 'ch.bafu.schutzgebiete-paerke_nationaler_bedeutung'}, - serverType: /** @type {ol.source.wms.ServerType} */ ('mapserver'), - extent: extent + serverType: /** @type {ol.source.wms.ServerType} */ ('mapserver') }) }) ]; diff --git a/examples/wms-tiled.js b/examples/wms-tiled.js index 86f5503f62..9815eb8d17 100644 --- a/examples/wms-tiled.js +++ b/examples/wms-tiled.js @@ -10,10 +10,10 @@ var layers = [ source: new ol.source.MapQuest({layer: 'sat'}) }), new ol.layer.Tile({ + extent: [-13884991, 2870341, -7455066, 6338219], source: new ol.source.TileWMS(/** @type {olx.source.TileWMSOptions} */ ({ url: 'http://demo.opengeo.org/geoserver/wms', params: {'LAYERS': 'topp:states', 'TILED': true}, - extent: [-13884991, 2870341, -7455066, 6338219], serverType: 'geoserver' })) }) diff --git a/examples/wmts-hidpi.html b/examples/wmts-hidpi.html index 71f31e5648..e6f4e3d824 100644 --- a/examples/wmts-hidpi.html +++ b/examples/wmts-hidpi.html @@ -9,6 +9,11 @@ WMTS HiDPI example + diff --git a/examples/wmts-hidpi.js b/examples/wmts-hidpi.js index c0633601e1..e84d2ec529 100644 --- a/examples/wmts-hidpi.js +++ b/examples/wmts-hidpi.js @@ -23,7 +23,6 @@ var urls = [ var hiDPI = ol.BrowserFeature.DEVICE_PIXEL_RATIO > 1; var source = new ol.source.WMTS({ - extent: [977844.377599999, 5837774.6617, 1915609.8654, 6295560.8122], projection: 'EPSG:3857', layer: hiDPI ? 'bmaphidpi' : 'geolandbasemap', tilePixelRatio: hiDPI ? 2 : 1, @@ -64,6 +63,7 @@ var source = new ol.source.WMTS({ var map = new ol.Map({ layers: [ new ol.layer.Tile({ + extent: [977844.377599999, 5837774.6617, 1915609.8654, 6295560.8122], source: source }) ], diff --git a/examples/wmts.js b/examples/wmts.js index 6c64105f18..b8daeb176a 100644 --- a/examples/wmts.js +++ b/examples/wmts.js @@ -35,6 +35,7 @@ var map = new ol.Map({ }), new ol.layer.Tile({ opacity: 0.7, + extent: projectionExtent, source: new ol.source.WMTS({ attributions: [attribution], url: 'http://services.arcgisonline.com/arcgis/rest/' + @@ -48,7 +49,6 @@ var map = new ol.Map({ resolutions: resolutions, matrixIds: matrixIds }), - extent: projectionExtent, style: 'default' }) }) diff --git a/src/ol/renderer/canvas/canvastilelayerrenderer.js b/src/ol/renderer/canvas/canvastilelayerrenderer.js index fce4840011..6fd8025e35 100644 --- a/src/ol/renderer/canvas/canvastilelayerrenderer.js +++ b/src/ol/renderer/canvas/canvastilelayerrenderer.js @@ -193,6 +193,11 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame = } else { extent = frameState.extent; } + + if (goog.isDef(layerState.extent)) { + extent = ol.extent.getIntersection(extent, layerState.extent); + } + var tileRange = tileGrid.getTileRangeForExtentAndResolution( extent, tileResolution); @@ -233,6 +238,11 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame = if (z != this.renderedCanvasZ_ || !this.renderedCanvasTileRange_.containsTileRange(tileRange)) { this.renderedCanvasTileRange_ = null; + // Due to limited layer extent, we may be rendering tiles on a small + // portion of the canvas. + if (z < this.renderedCanvasZ_) { + this.context_.clearRect(0, 0, canvasWidth, canvasHeight); + } } } } diff --git a/src/ol/renderer/dom/domtilelayerrenderer.js b/src/ol/renderer/dom/domtilelayerrenderer.js index a41ac5837a..cb6c14dda9 100644 --- a/src/ol/renderer/dom/domtilelayerrenderer.js +++ b/src/ol/renderer/dom/domtilelayerrenderer.js @@ -109,6 +109,11 @@ ol.renderer.dom.TileLayer.prototype.prepareFrame = } else { extent = frameState.extent; } + + if (goog.isDef(layerState.extent)) { + extent = ol.extent.getIntersection(extent, layerState.extent); + } + var tileRange = tileGrid.getTileRangeForExtentAndResolution( extent, tileResolution); diff --git a/src/ol/renderer/webgl/webgltilelayerrenderer.js b/src/ol/renderer/webgl/webgltilelayerrenderer.js index e6269184a0..bfbae29cf8 100644 --- a/src/ol/renderer/webgl/webgltilelayerrenderer.js +++ b/src/ol/renderer/webgl/webgltilelayerrenderer.js @@ -207,11 +207,18 @@ ol.renderer.webgl.TileLayer.prototype.prepareFrame = var allTilesLoaded = true; var tmpExtent = ol.extent.createEmpty(); var tmpTileRange = new ol.TileRange(0, 0, 0, 0); - var childTileRange, fullyLoaded, tile, tileState, x, y; + var childTileRange, fullyLoaded, tile, tileState, x, y, tileExtent; for (x = tileRange.minX; x <= tileRange.maxX; ++x) { for (y = tileRange.minY; y <= tileRange.maxY; ++y) { tile = tileSource.getTile(z, x, y, pixelRatio, projection); + if (goog.isDef(layerState.extent)) { + // ignore tiles outside layer extent + tileExtent = tileGrid.getTileCoordExtent(tile.tileCoord, tmpExtent); + if (!ol.extent.intersects(tileExtent, layerState.extent)) { + continue; + } + } tileState = tile.getState(); if (tileState == ol.TileState.LOADED) { if (mapRenderer.isTileTextureLoaded(tile)) { @@ -243,7 +250,7 @@ ol.renderer.webgl.TileLayer.prototype.prepareFrame = var zs = goog.array.map(goog.object.getKeys(tilesToDrawByZ), Number); goog.array.sort(zs); var u_tileOffset = goog.vec.Vec4.createFloat32(); - var i, ii, sx, sy, tileExtent, tileKey, tilesToDraw, tx, ty; + var i, ii, sx, sy, tileKey, tilesToDraw, tx, ty; for (i = 0, ii = zs.length; i < ii; ++i) { tilesToDraw = tilesToDrawByZ[zs[i]]; for (tileKey in tilesToDraw) {