Only request tiles within the layer extent
Layer renderers are now responsible for requesting data within a limited extent.
This commit is contained in:
@@ -44,6 +44,7 @@ ol.proj.addCoordinateTransforms('EPSG:4326', projection,
|
|||||||
var extent = [420000, 30000, 900000, 350000];
|
var extent = [420000, 30000, 900000, 350000];
|
||||||
var layers = [
|
var layers = [
|
||||||
new ol.layer.Tile({
|
new ol.layer.Tile({
|
||||||
|
extent: extent,
|
||||||
source: new ol.source.TileWMS({
|
source: new ol.source.TileWMS({
|
||||||
url: 'http://wms.geo.admin.ch/',
|
url: 'http://wms.geo.admin.ch/',
|
||||||
crossOrigin: 'anonymous',
|
crossOrigin: 'anonymous',
|
||||||
@@ -57,11 +58,11 @@ var layers = [
|
|||||||
'LAYERS': 'ch.swisstopo.pixelkarte-farbe-pk1000.noscale',
|
'LAYERS': 'ch.swisstopo.pixelkarte-farbe-pk1000.noscale',
|
||||||
'FORMAT': 'image/jpeg'
|
'FORMAT': 'image/jpeg'
|
||||||
},
|
},
|
||||||
extent: extent,
|
|
||||||
serverType: 'mapserver'
|
serverType: 'mapserver'
|
||||||
})
|
})
|
||||||
}),
|
}),
|
||||||
new ol.layer.Tile({
|
new ol.layer.Tile({
|
||||||
|
extent: extent,
|
||||||
source: new ol.source.TileWMS({
|
source: new ol.source.TileWMS({
|
||||||
url: 'http://wms.geo.admin.ch/',
|
url: 'http://wms.geo.admin.ch/',
|
||||||
crossOrigin: 'anonymous',
|
crossOrigin: 'anonymous',
|
||||||
@@ -72,7 +73,6 @@ var layers = [
|
|||||||
'National parks / geo.admin.ch</a>'
|
'National parks / geo.admin.ch</a>'
|
||||||
})],
|
})],
|
||||||
params: {'LAYERS': 'ch.bafu.schutzgebiete-paerke_nationaler_bedeutung'},
|
params: {'LAYERS': 'ch.bafu.schutzgebiete-paerke_nationaler_bedeutung'},
|
||||||
extent: extent,
|
|
||||||
serverType: 'mapserver'
|
serverType: 'mapserver'
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -24,6 +24,7 @@ projection.setExtent([485869.5728, 76443.1884, 837076.5648, 299941.7864]);
|
|||||||
var extent = [420000, 30000, 900000, 350000];
|
var extent = [420000, 30000, 900000, 350000];
|
||||||
var layers = [
|
var layers = [
|
||||||
new ol.layer.Image({
|
new ol.layer.Image({
|
||||||
|
extent: extent,
|
||||||
source: new ol.source.ImageWMS({
|
source: new ol.source.ImageWMS({
|
||||||
url: 'http://wms.geo.admin.ch/',
|
url: 'http://wms.geo.admin.ch/',
|
||||||
crossOrigin: 'anonymous',
|
crossOrigin: 'anonymous',
|
||||||
@@ -37,11 +38,11 @@ var layers = [
|
|||||||
'LAYERS': 'ch.swisstopo.pixelkarte-farbe-pk1000.noscale',
|
'LAYERS': 'ch.swisstopo.pixelkarte-farbe-pk1000.noscale',
|
||||||
'FORMAT': 'image/jpeg'
|
'FORMAT': 'image/jpeg'
|
||||||
},
|
},
|
||||||
serverType: /** @type {ol.source.wms.ServerType} */ ('mapserver'),
|
serverType: /** @type {ol.source.wms.ServerType} */ ('mapserver')
|
||||||
extent: extent
|
|
||||||
})
|
})
|
||||||
}),
|
}),
|
||||||
new ol.layer.Image({
|
new ol.layer.Image({
|
||||||
|
extent: extent,
|
||||||
source: new ol.source.ImageWMS({
|
source: new ol.source.ImageWMS({
|
||||||
url: 'http://wms.geo.admin.ch/',
|
url: 'http://wms.geo.admin.ch/',
|
||||||
crossOrigin: 'anonymous',
|
crossOrigin: 'anonymous',
|
||||||
@@ -52,8 +53,7 @@ var layers = [
|
|||||||
'National parks / geo.admin.ch</a>'
|
'National parks / geo.admin.ch</a>'
|
||||||
})],
|
})],
|
||||||
params: {'LAYERS': 'ch.bafu.schutzgebiete-paerke_nationaler_bedeutung'},
|
params: {'LAYERS': 'ch.bafu.schutzgebiete-paerke_nationaler_bedeutung'},
|
||||||
serverType: /** @type {ol.source.wms.ServerType} */ ('mapserver'),
|
serverType: /** @type {ol.source.wms.ServerType} */ ('mapserver')
|
||||||
extent: extent
|
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
];
|
];
|
||||||
|
|||||||
@@ -10,10 +10,10 @@ var layers = [
|
|||||||
source: new ol.source.MapQuest({layer: 'sat'})
|
source: new ol.source.MapQuest({layer: 'sat'})
|
||||||
}),
|
}),
|
||||||
new ol.layer.Tile({
|
new ol.layer.Tile({
|
||||||
|
extent: [-13884991, 2870341, -7455066, 6338219],
|
||||||
source: new ol.source.TileWMS(/** @type {olx.source.TileWMSOptions} */ ({
|
source: new ol.source.TileWMS(/** @type {olx.source.TileWMSOptions} */ ({
|
||||||
url: 'http://demo.opengeo.org/geoserver/wms',
|
url: 'http://demo.opengeo.org/geoserver/wms',
|
||||||
params: {'LAYERS': 'topp:states', 'TILED': true},
|
params: {'LAYERS': 'topp:states', 'TILED': true},
|
||||||
extent: [-13884991, 2870341, -7455066, 6338219],
|
|
||||||
serverType: 'geoserver'
|
serverType: 'geoserver'
|
||||||
}))
|
}))
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -9,6 +9,11 @@
|
|||||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
||||||
<title>WMTS HiDPI example</title>
|
<title>WMTS HiDPI example</title>
|
||||||
|
<style>
|
||||||
|
.map {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
|
|||||||
@@ -23,7 +23,6 @@ var urls = [
|
|||||||
var hiDPI = ol.BrowserFeature.DEVICE_PIXEL_RATIO > 1;
|
var hiDPI = ol.BrowserFeature.DEVICE_PIXEL_RATIO > 1;
|
||||||
|
|
||||||
var source = new ol.source.WMTS({
|
var source = new ol.source.WMTS({
|
||||||
extent: [977844.377599999, 5837774.6617, 1915609.8654, 6295560.8122],
|
|
||||||
projection: 'EPSG:3857',
|
projection: 'EPSG:3857',
|
||||||
layer: hiDPI ? 'bmaphidpi' : 'geolandbasemap',
|
layer: hiDPI ? 'bmaphidpi' : 'geolandbasemap',
|
||||||
tilePixelRatio: hiDPI ? 2 : 1,
|
tilePixelRatio: hiDPI ? 2 : 1,
|
||||||
@@ -64,6 +63,7 @@ var source = new ol.source.WMTS({
|
|||||||
var map = new ol.Map({
|
var map = new ol.Map({
|
||||||
layers: [
|
layers: [
|
||||||
new ol.layer.Tile({
|
new ol.layer.Tile({
|
||||||
|
extent: [977844.377599999, 5837774.6617, 1915609.8654, 6295560.8122],
|
||||||
source: source
|
source: source
|
||||||
})
|
})
|
||||||
],
|
],
|
||||||
|
|||||||
@@ -35,6 +35,7 @@ var map = new ol.Map({
|
|||||||
}),
|
}),
|
||||||
new ol.layer.Tile({
|
new ol.layer.Tile({
|
||||||
opacity: 0.7,
|
opacity: 0.7,
|
||||||
|
extent: projectionExtent,
|
||||||
source: new ol.source.WMTS({
|
source: new ol.source.WMTS({
|
||||||
attributions: [attribution],
|
attributions: [attribution],
|
||||||
url: 'http://services.arcgisonline.com/arcgis/rest/' +
|
url: 'http://services.arcgisonline.com/arcgis/rest/' +
|
||||||
@@ -48,7 +49,6 @@ var map = new ol.Map({
|
|||||||
resolutions: resolutions,
|
resolutions: resolutions,
|
||||||
matrixIds: matrixIds
|
matrixIds: matrixIds
|
||||||
}),
|
}),
|
||||||
extent: projectionExtent,
|
|
||||||
style: 'default'
|
style: 'default'
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -193,6 +193,11 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame =
|
|||||||
} else {
|
} else {
|
||||||
extent = frameState.extent;
|
extent = frameState.extent;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (goog.isDef(layerState.extent)) {
|
||||||
|
extent = ol.extent.getIntersection(extent, layerState.extent);
|
||||||
|
}
|
||||||
|
|
||||||
var tileRange = tileGrid.getTileRangeForExtentAndResolution(
|
var tileRange = tileGrid.getTileRangeForExtentAndResolution(
|
||||||
extent, tileResolution);
|
extent, tileResolution);
|
||||||
|
|
||||||
@@ -233,6 +238,11 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame =
|
|||||||
if (z != this.renderedCanvasZ_ ||
|
if (z != this.renderedCanvasZ_ ||
|
||||||
!this.renderedCanvasTileRange_.containsTileRange(tileRange)) {
|
!this.renderedCanvasTileRange_.containsTileRange(tileRange)) {
|
||||||
this.renderedCanvasTileRange_ = null;
|
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);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -109,6 +109,11 @@ ol.renderer.dom.TileLayer.prototype.prepareFrame =
|
|||||||
} else {
|
} else {
|
||||||
extent = frameState.extent;
|
extent = frameState.extent;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (goog.isDef(layerState.extent)) {
|
||||||
|
extent = ol.extent.getIntersection(extent, layerState.extent);
|
||||||
|
}
|
||||||
|
|
||||||
var tileRange = tileGrid.getTileRangeForExtentAndResolution(
|
var tileRange = tileGrid.getTileRangeForExtentAndResolution(
|
||||||
extent, tileResolution);
|
extent, tileResolution);
|
||||||
|
|
||||||
|
|||||||
@@ -207,11 +207,18 @@ ol.renderer.webgl.TileLayer.prototype.prepareFrame =
|
|||||||
var allTilesLoaded = true;
|
var allTilesLoaded = true;
|
||||||
var tmpExtent = ol.extent.createEmpty();
|
var tmpExtent = ol.extent.createEmpty();
|
||||||
var tmpTileRange = new ol.TileRange(0, 0, 0, 0);
|
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 (x = tileRange.minX; x <= tileRange.maxX; ++x) {
|
||||||
for (y = tileRange.minY; y <= tileRange.maxY; ++y) {
|
for (y = tileRange.minY; y <= tileRange.maxY; ++y) {
|
||||||
|
|
||||||
tile = tileSource.getTile(z, x, y, pixelRatio, projection);
|
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();
|
tileState = tile.getState();
|
||||||
if (tileState == ol.TileState.LOADED) {
|
if (tileState == ol.TileState.LOADED) {
|
||||||
if (mapRenderer.isTileTextureLoaded(tile)) {
|
if (mapRenderer.isTileTextureLoaded(tile)) {
|
||||||
@@ -243,7 +250,7 @@ ol.renderer.webgl.TileLayer.prototype.prepareFrame =
|
|||||||
var zs = goog.array.map(goog.object.getKeys(tilesToDrawByZ), Number);
|
var zs = goog.array.map(goog.object.getKeys(tilesToDrawByZ), Number);
|
||||||
goog.array.sort(zs);
|
goog.array.sort(zs);
|
||||||
var u_tileOffset = goog.vec.Vec4.createFloat32();
|
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) {
|
for (i = 0, ii = zs.length; i < ii; ++i) {
|
||||||
tilesToDraw = tilesToDrawByZ[zs[i]];
|
tilesToDraw = tilesToDrawByZ[zs[i]];
|
||||||
for (tileKey in tilesToDraw) {
|
for (tileKey in tilesToDraw) {
|
||||||
|
|||||||
Reference in New Issue
Block a user