Asynchronos tile URL calculation

[twpayne]

This PR, developed with @elemoine and @vmx, allows the way that tiles are loaded to be overridden. This allows tile URLs to be generated asynchronously, as requested by @vmx in #792. This functionality is needed to eventually support tiles accessed with JavaScripts File API, or tiles stored in some databases, such as PouchDB.

As a demonstration of its use, here a one second setTimeout is used to simulate asynchronous tile URL lookup:

var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.XYZ({
        tileLoadFunction: function(imageTile, src) {
          window.setTimeout(function() {
            imageTile.getImage().src = src;
          }, 1);
        },
        url: 'http://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
      })
    })
  ]
  // ...
});

[fredj]

This option should be available for all the ol.source.TileImage based classes (not only ol.source.XYZ) but this can be done later.

[fredj]

FYI I've backported my ol2 pointillism hack to ol3: http://fredj.io/ol/pointillism/pointillism.html

[elemoine]

@fredj very nice. I'm interested to know why you need to call removeAttribute('crossorigin') on the image.

[twpayne]

Very cool demo @fredj!

[fredj]

@fredj very nice. I'm interested to know why you need to call removeAttribute('crossorigin') on the image.

Good question: the img is configured with crossOrigin = anonymous (in ol.source.OSM). At first, the src is set to a remote image (pointillism.js line 30) but inside the tileLoadFunction function the src is set again using canvas.toDataURL(): because this second image is not CORS enabled (see https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image) a security error would be raised.