diff --git a/src/ol/Tile.js b/src/ol/Tile.js index e0a393854c..f49c97e616 100644 --- a/src/ol/Tile.js +++ b/src/ol/Tile.js @@ -144,6 +144,12 @@ class Tile extends EventTarget { this.dispatchEvent(EventType.CHANGE); } + /** + * Called by the tile cache when the tile is removed from the cache due to expiry + */ + release() { + } + /** * @return {string} Key. */ diff --git a/src/ol/TileCache.js b/src/ol/TileCache.js index d1527388f4..37f6113df7 100644 --- a/src/ol/TileCache.js +++ b/src/ol/TileCache.js @@ -15,7 +15,7 @@ class TileCache extends LRUCache { if (tile.getKey() in usedTiles) { break; } else { - this.pop(); + this.pop().release(); } } } @@ -33,6 +33,7 @@ class TileCache extends LRUCache { this.forEach(function(tile) { if (tile.tileCoord[0] !== z) { this.remove(getKey(tile.tileCoord)); + tile.release(); } }.bind(this)); } diff --git a/src/ol/VectorRenderTile.js b/src/ol/VectorRenderTile.js index 1b05c5659b..372fc8a3a0 100644 --- a/src/ol/VectorRenderTile.js +++ b/src/ol/VectorRenderTile.js @@ -18,6 +18,10 @@ import {createCanvasContext2D} from './dom.js'; * @property {number} renderedTileZ */ +/** + * @type {Array} + */ +const canvasPool = []; class VectorRenderTile extends Tile { @@ -107,7 +111,7 @@ class VectorRenderTile extends Tile { getContext(layer) { const key = getUid(layer); if (!(key in this.context_)) { - this.context_[key] = createCanvasContext2D(); + this.context_[key] = createCanvasContext2D(1, 1, canvasPool); } return this.context_[key]; } @@ -156,6 +160,16 @@ class VectorRenderTile extends Tile { load() { this.getSourceTiles(); } + + /** + * @inheritDoc + */ + release() { + for (const key in this.context_) { + canvasPool.push(this.context_[key].canvas); + } + super.release(); + } } diff --git a/src/ol/dom.js b/src/ol/dom.js index 900fa6d559..ad10c14671 100644 --- a/src/ol/dom.js +++ b/src/ol/dom.js @@ -7,10 +7,12 @@ * Create an html canvas element and returns its 2d context. * @param {number=} opt_width Canvas width. * @param {number=} opt_height Canvas height. + * @param {Array=} opt_canvasPool Canvas pool to take existing canvas from. * @return {CanvasRenderingContext2D} The context. */ -export function createCanvasContext2D(opt_width, opt_height) { - const canvas = document.createElement('canvas'); +export function createCanvasContext2D(opt_width, opt_height, opt_canvasPool) { + const canvas = opt_canvasPool && opt_canvasPool.length ? + opt_canvasPool.shift() : document.createElement('canvas'); if (opt_width) { canvas.width = opt_width; }