Avoid creating unnecessary images in tile layers

[tschaub]

When rendering tiled layers, we call source.getTile() many times while looking for loaded images at alternate zoom levels. For image tile layers, calls to getTile create Image elements. When we only need to check if a tile is loaded, it is unnecessary to create a new tile with an unused Image.

Since all of the ol.source.Tile types create a tile cache in the same way and have the same implementation of canExpireCache and expireCache, we can move the repeated code to the ol.source.Tile base class (see 2cf1fe5).

Then, since an image cannot already have the loaded state if it is not in the cache, the check for loaded images can avoid calling getTile and instead check the cache (see e5432f7). The DOM and Canvas tile layer renderers can share the same implementation of createLoadedTileFinder function. The WebGL renderer needs a custom implementation since it also checks with the map renderer to see if the tile texture is loaded.

Without these changes, the first rendering of the full screen example (not in full screen mode) fills the cache with 80 images though only 12 are used (on my current screen width). And these extra cached images are not used as you zoom out. By the time I zoom out to level one, about 1350 Image elements have been created. On this branch, the same sequence (zooming one step at a time to level 1) creates 350 Image elements.

[ahocevar]

This is a huge performance improvement and greatly improves code readability. I'm very impressed and +1 on merging this!

[elemoine]

Very nice!

Shouldn't the createGetTileIfLoadedFunction function be removed?

[tschaub]

Shouldn't the createGetTileIfLoadedFunction function be removed?

Yes, thanks. That was an oversight (see #3273).