Add tile loading events to image tile sources

2015-02-16 16:43:58 -07:00
parent bf35b40b11
commit 5cbae8c8f5
5 changed files with 184 additions and 0 deletions
@@ -0,0 +1,51 @@
 <!doctype html>
 <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="../css/ol.css" type="text/css">
    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.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">
    <title>Tile load events example</title>
  </head>
  <body>
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
        </div>
      </div>
    </div>
    <div class="container-fluid">
      <div class="row-fluid">
        <div class="span12">
          <div id="map" class="map"></div>
        </div>
      </div>
      <div class="row-fluid">
        <div class="span12">
          <h4 id="title">Tile load events example</h4>
          <p id="shortdesc">Example using tile load events.</p>
          <div id="docs">
            <p>See the <a href="tile-load-events.js" target="_blank">tile-load-events.js source</a> to see how this is done.</p>
          </div>
          <div id="tags">tile, events, loading</div>
        </div>
      </div>
    </div>
    <script src="../resources/jquery.min.js" type="text/javascript"></script>
    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
    <script src="loader.js?id=tile-load-events" type="text/javascript"></script>
  </body>
 </html>
@@ -0,0 +1,35 @@
 goog.require('ol.Map');
 goog.require('ol.View');
 goog.require('ol.control');
 goog.require('ol.layer.Tile');
 goog.require('ol.source.OSM');
 var source = new ol.source.OSM();
 source.on('tileloadstart', function(event) {
  console.log('start', event.tile.getImage().src);
 });
 source.on('tileloadend', function(event) {
  console.log('end', event.tile.getImage().src);
 });
 source.on('tileloaderror', function(event) {
  console.log('error', event.tile.getImage().src);
 });
 var map = new ol.Map({
  layers: [
    new ol.layer.Tile({source: source})
  ],
  controls: ol.control.defaults({
    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
      collapsible: false
    })
  }),
  renderer: exampleNS.getRendererFromQueryString(),
  target: 'map',
  view: new ol.View({
    center: [0, 0],
    zoom: 2
  })
 });
@@ -210,6 +210,17 @@ oli.render.Event.prototype.vectorContext;
 oli.source;
 /**
 * @interface
 */
 oli.source.TileEvent = function() {};
 /**
 * @type {ol.Tile}
 */
 oli.source.TileEvent.prototype.tile;
 /**
 * @interface
@@ -1,6 +1,8 @@
 goog.provide('ol.source.TileImage');
 goog.require('goog.asserts');
 goog.require('goog.events');
 goog.require('goog.events.EventType');
 goog.require('ol.ImageTile');
 goog.require('ol.TileCache');
 goog.require('ol.TileCoord');
@@ -17,6 +19,7 @@ goog.require('ol.source.Tile');
 * Base class for sources providing images divided into a tile grid.
 *
 * @constructor
 * @fires ol.source.TileEvent
 * @extends {ol.source.Tile}
 * @param {olx.source.TileImageOptions} options Image tile options.
 * @api
@@ -118,6 +121,9 @@ ol.source.TileImage.prototype.getTile =
        goog.isDef(tileUrl) ? tileUrl : '',
        this.crossOrigin,
        this.tileLoadFunction);
    goog.events.listen(tile, goog.events.EventType.CHANGE,
        this.handleTileChange_, false, this);
    this.tileCache.set(tileCoordKey, tile);
    return tile;
  }
@@ -142,6 +148,30 @@ ol.source.TileImage.prototype.getTileUrlFunction = function() {
 };
 /**
 * Handle tile change events.
 * @param {goog.events.Event} event Event.
 * @private
 */
 ol.source.TileImage.prototype.handleTileChange_ = function(event) {
  var tile = /** @type {ol.Tile} */ (event.target);
  switch (tile.getState()) {
    case ol.TileState.LOADING:
      this.dispatchEvent(
          new ol.source.TileEvent(ol.source.TileEventType.TILELOADSTART, tile));
      break;
    case ol.TileState.LOADED:
      this.dispatchEvent(
          new ol.source.TileEvent(ol.source.TileEventType.TILELOADEND, tile));
      break;
    case ol.TileState.ERROR:
      this.dispatchEvent(
          new ol.source.TileEvent(ol.source.TileEventType.TILELOADERROR, tile));
      break;
  }
 };
 /**
 * @param {ol.TileLoadFunctionType} tileLoadFunction Tile load function.
 * @api
@@ -1,6 +1,7 @@
 goog.provide('ol.source.Tile');
 goog.provide('ol.source.TileOptions');
 goog.require('goog.events.Event');
 goog.require('goog.functions');
 goog.require('ol.Attribution');
 goog.require('ol.Extent');
@@ -206,3 +207,59 @@ ol.source.Tile.prototype.getTilePixelSize =
 * @param {number} y Tile coordinate y.
 */
 ol.source.Tile.prototype.useTile = goog.nullFunction;
 /**
 * @classdesc
 * Events emitted by {@link ol.source.Tile} instances are instances of this
 * type.
 *
 * @constructor
 * @extends {goog.events.Event}
 * @implements {oli.source.TileEvent}
 * @param {string} type Type.
 * @param {ol.Tile} tile The tile.
 */
 ol.source.TileEvent = function(type, tile) {
  goog.base(this, type);
  /**
   * The tile related to the event.
   * @type {ol.Tile}
   * @api
   */
  this.tile = tile;
 };
 goog.inherits(ol.source.TileEvent, goog.events.Event);
 /**
 * @enum {string}
 */
 ol.source.TileEventType = {
  /**
   * Triggered when a tile starts loading.
   * @event ol.source.TileEvent#tileloadstart
   * @api
   */
  TILELOADSTART: 'tileloadstart',
  /**
   * Triggered when a tile finishes loading.
   * @event ol.source.TileEvent#tileloadend
   * @api
   */
  TILELOADEND: 'tileloadend',
  /**
   * Triggered if tile loading results in an error.
   * @event ol.source.TileEvent#tileloaderror
   * @api
   */
  TILELOADERROR: 'tileloaderror'
 };