ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #263 from twpayne/canvas-renderer-optimizations

Browse Source 
Canvas renderer optimizations
This commit is contained in:
Tom Payne
2013-03-04 15:21:38 -08:00
parent 61acce98e3 a937083d10
commit 1bac674eca
12 changed files with 86 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
examples/canvas-tiles.html
View File

@@ -21,10 +21,12 @@
<tr>
<th>DOM</th>
<th>WebGL</th>
<th>Canvas</th>
</tr>
<tr>
<td><div id="domMap" class="map"></div></td>
<td><div id="webglMap" class="map"></div></td>
<td><div id="canvasMap" class="map"></div></td>
</tr>
</table>
<div id="docs">

7
examples/canvas-tiles.js
View File

@@ -41,3 +41,10 @@ var domMap = new ol.Map({
});
domMap.bindTo('layers', webglMap);
domMap.bindTo('view', webglMap);
var canvasMap = new ol.Map({
renderer: ol.RendererHint.DOM,
target: 'canvasMap'
});
canvasMap.bindTo('layers', webglMap);
canvasMap.bindTo('view', webglMap);

1
src/objectliterals.exports
View File

@@ -133,6 +133,7 @@
@exportObjectLiteralProperty ol.source.TiledWMSOptions.crossOrigin null|string|undefined
@exportObjectLiteralProperty ol.source.TiledWMSOptions.extent ol.Extent|undefined
@exportObjectLiteralProperty ol.source.TiledWMSOptions.tileGrid ol.tilegrid.TileGrid|undefined
@exportObjectLiteralProperty ol.source.TiledWMSOptions.transparent boolean|undefined
@exportObjectLiteralProperty ol.source.TiledWMSOptions.maxZoom number|undefined
@exportObjectLiteralProperty ol.source.TiledWMSOptions.projection ol.Projection|undefined
@exportObjectLiteralProperty ol.source.TiledWMSOptions.url string|undefined

63
src/ol/renderer/canvas/canvastilelayerrenderer.js
View File

@@ -1,4 +1,3 @@
// FIXME don't redraw tiles if not needed
// FIXME find correct globalCompositeOperation
// FIXME optimize :-)
@@ -51,6 +50,12 @@ ol.renderer.canvas.TileLayer = function(mapRenderer, tileLayer) {
*/
this.transform_ = goog.vec.Mat4.createNumber();
/**
* @private
* @type {Array.<ol.Tile|undefined>}
*/
this.renderedTiles_ = null;
};
goog.inherits(ol.renderer.canvas.TileLayer, ol.renderer.canvas.Layer);
@@ -96,10 +101,11 @@ ol.renderer.canvas.TileLayer.prototype.renderFrame =
var tileResolution = tileGrid.getResolution(z);
var tileRange = tileGrid.getTileRangeForExtentAndResolution(
frameState.extent, tileResolution);
var tileRangeWidth = tileRange.getWidth();
var tileRangeHeight = tileRange.getHeight();
var canvasSize = new ol.Size(
tileSize.width * tileRange.getWidth(),
tileSize.height * tileRange.getHeight());
tileSize.width * tileRangeWidth, tileSize.height * tileRangeHeight);
var canvas, context;
if (goog.isNull(this.canvas_)) {
@@ -111,6 +117,7 @@ ol.renderer.canvas.TileLayer.prototype.renderFrame =
this.canvas_ = canvas;
this.canvasSize_ = canvasSize;
this.context_ = context;
this.renderedTiles_ = new Array(tileRangeWidth * tileRangeHeight);
} else {
canvas = this.canvas_;
context = this.context_;
@@ -118,11 +125,10 @@ ol.renderer.canvas.TileLayer.prototype.renderFrame =
canvas.width = canvasSize.width;
canvas.height = canvasSize.height;
this.canvasSize_ = canvasSize;
this.renderedTiles_ = new Array(tileRangeWidth * tileRangeHeight);
}
}
context.clearRect(0, 0, canvasSize.width, canvasSize.height);
/**
* @type {Object.<number, Object.<string, ol.Tile>>}
*/
@@ -169,9 +175,12 @@ ol.renderer.canvas.TileLayer.prototype.renderFrame =
/** @type {Array.<number>} */
var zs = goog.array.map(goog.object.getKeys(tilesToDrawByZ), Number);
goog.array.sort(zs);
var opaque = tileSource.getOpaque();
var origin = tileGrid.getTileCoordExtent(
new ol.TileCoord(z, tileRange.minX, tileRange.maxY)).getTopLeft();
var currentZ, i, scale, tileCoordKey, tileExtent, tilesToDraw;
var currentZ, i, index, scale, tileCoordKey, tileExtent, tilesToDraw;
var ix, iy, interimTileExtent, interimTileRange, maxX, maxY, minX, minY;
var height, width;
for (i = 0; i < zs.length; ++i) {
currentZ = zs[i];
tileSize = tileGrid.getTileSize(currentZ);
@@ -179,22 +188,44 @@ ol.renderer.canvas.TileLayer.prototype.renderFrame =
if (currentZ == z) {
for (tileCoordKey in tilesToDraw) {
tile = tilesToDraw[tileCoordKey];
context.drawImage(
tile.getImage(),
tileSize.width * (tile.tileCoord.x - tileRange.minX),
tileSize.height * (tileRange.maxY - tile.tileCoord.y));
tileCoord = tile.tileCoord;
index = (tileCoord.y - tileRange.minY) * tileRangeWidth +
(tileCoord.x - tileRange.minX);
if (this.renderedTiles_[index] != tile) {
x = tileSize.width * (tile.tileCoord.x - tileRange.minX);
y = tileSize.height * (tileRange.maxY - tile.tileCoord.y);
if (!opaque) {
context.clearRect(x, y, tileSize.width, tileSize.height);
}
context.drawImage(tile.getImage(), x, y);
this.renderedTiles_[index] = tile;
}
}
} else {
scale = tileGrid.getResolution(currentZ) / tileResolution;
for (tileCoordKey in tilesToDraw) {
tile = tilesToDraw[tileCoordKey];
tileExtent = tileGrid.getTileCoordExtent(tile.tileCoord);
context.drawImage(
tile.getImage(),
(tileExtent.minX - origin.x) / tileResolution,
(origin.y - tileExtent.maxY) / tileResolution,
scale * tileSize.width,
scale * tileSize.height);
x = (tileExtent.minX - origin.x) / tileResolution;
y = (origin.y - tileExtent.maxY) / tileResolution;
width = scale * tileSize.width;
height = scale * tileSize.height;
if (!opaque) {
context.clearRect(x, y, width, height);
}
context.drawImage(tile.getImage(), x, y, width, height);
interimTileRange =
tileGrid.getTileRangeForExtentAndZ(tileExtent, z);
minX = Math.max(interimTileRange.minX, tileRange.minX);
maxX = Math.min(interimTileRange.maxX, tileRange.maxX);
minY = Math.max(interimTileRange.minY, tileRange.minY);
maxY = Math.min(interimTileRange.maxY, tileRange.maxY);
for (ix = minX; ix <= maxX; ++ix) {
for (iy = minY; iy <= maxY; ++iy) {
this.renderedTiles_[(iy - tileRange.minY) * tileRangeWidth +
(ix - tileRange.minX)] = undefined;
}
}
}
}
}

1
src/ol/source/bingmapssource.js
View File

@@ -23,6 +23,7 @@ goog.require('ol.tilegrid.XYZ');
ol.source.BingMaps = function(bingMapsOptions) {
goog.base(this, {
opaque: true,
projection: ol.projection.getFromCode('EPSG:3857')
});

1
src/ol/source/debugtilesource.js
View File

@@ -90,6 +90,7 @@ ol.source.DebugTileSource = function(options) {
goog.base(this, {
extent: options.extent,
opaque: false,
projection: options.projection,
tileGrid: options.tileGrid
});

2
src/ol/source/imagetilesource.js
View File

@@ -18,6 +18,7 @@ goog.require('ol.tilegrid.TileGrid');
* @typedef {{attributions: (Array.<ol.Attribution>|undefined),
* crossOrigin: (null|string|undefined),
* extent: (ol.Extent|undefined),
* opaque: (boolean|undefined),
* projection: (ol.Projection|undefined),
* tileGrid: (ol.tilegrid.TileGrid|undefined),
* tileUrlFunction: (ol.TileUrlFunctionType|undefined)}}
@@ -36,6 +37,7 @@ ol.source.ImageTileSource = function(options) {
goog.base(this, {
attributions: options.attributions,
extent: options.extent,
opaque: options.opaque,
projection: options.projection,
tileGrid: options.tileGrid
});

2
src/ol/source/mapquestsource.js
View File

@@ -26,6 +26,7 @@ ol.source.MapQuestOSM = function() {
goog.base(this, {
attributions: attributions,
opaque: true,
maxZoom: 28,
url: 'http://otile{1-4}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.jpg'
});
@@ -54,6 +55,7 @@ ol.source.MapQuestOpenAerial = function() {
goog.base(this, {
attributions: attributions,
maxZoom: 18,
opaque: true,
url: 'http://oatile{1-4}.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.jpg'
});

1
src/ol/source/openstreetmapsource.js
View File

@@ -18,6 +18,7 @@ ol.source.OpenStreetMap = function() {
goog.base(this, {
attributions: [attribution],
opaque: true,
maxZoom: 18,
url: 'http://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
});

1
src/ol/source/stamensource.js
View File

@@ -85,6 +85,7 @@ ol.source.Stamen = function(stamenOptions) {
goog.base(this, {
attributions: [attribution],
maxZoom: config.maxZoom,
opaque: false,
url: 'http://{a-d}.tile.stamen.com/' + layer + '/{z}/{x}/{y}.' + config.type
});

6
src/ol/source/tiledwmssource.js
View File

@@ -27,6 +27,9 @@ ol.source.TiledWMS = function(tiledWMSOptions) {
var extent = goog.isDef(tiledWMSOptions.extent) ?
tiledWMSOptions.extent : projectionExtent;
var transparent = goog.isDef(tiledWMSOptions.transparent) ?
tiledWMSOptions.transparent : true;
var version = goog.isDef(tiledWMSOptions.version) ?
tiledWMSOptions.version : '1.3';
@@ -44,7 +47,7 @@ ol.source.TiledWMS = function(tiledWMSOptions) {
'REQUEST': 'GetMap',
'STYLES': '',
'FORMAT': 'image/png',
'TRANSPARENT': true
'TRANSPARENT': transparent
};
baseParams[version >= '1.3' ? 'CRS' : 'SRS'] = projection.getCode();
goog.object.extend(baseParams, tiledWMSOptions.params);
@@ -97,6 +100,7 @@ ol.source.TiledWMS = function(tiledWMSOptions) {
crossOrigin: tiledWMSOptions.crossOrigin,
extent: extent,
tileGrid: tileGrid,
opaque: !transparent,
projection: projection,
tileUrlFunction: ol.TileUrlFunction.withTileCoordTransform(
tileCoordTransform, tileUrlFunction)

16
src/ol/source/tilesource.js
View File

@@ -15,6 +15,7 @@ goog.require('ol.tilegrid.TileGrid');
/**
* @typedef {{attributions: (Array.<ol.Attribution>|undefined),
* extent: (ol.Extent|undefined),
* opaque: (boolean|undefined),
* projection: (ol.Projection|undefined),
* tileGrid: (ol.tilegrid.TileGrid|undefined)}}
*/
@@ -35,6 +36,13 @@ ol.source.TileSource = function(tileSourceOptions) {
projection: tileSourceOptions.projection
});
/**
* @private
* @type {boolean}
*/
this.opaque_ = goog.isDef(tileSourceOptions.opaque) ?
tileSourceOptions.opaque : false;
/**
* @protected
* @type {ol.tilegrid.TileGrid}
@@ -98,6 +106,14 @@ ol.source.TileSource.prototype.findLoadedTiles = function(loadedTilesByZ,
};
/**
* @return {boolean} Opaque.
*/
ol.source.TileSource.prototype.getOpaque = function() {
return this.opaque_;
};
/**
* @inheritDoc
*/