Merge pull request #3248 from tschaub/tile-events

Add tile loading events to image tile sources.
2015-02-18 16:16:24 -07:00
parent eb1a46cf7d 56c5cef3f8
commit b8e3deb756
7 changed files with 302 additions and 4 deletions
--- a/examples/tile-load-events.html
+++ b/examples/tile-load-events.html
@@ -0,0 +1,79 @@
+<!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>
+    <style>
+      .map {
+        background: #E0ECED;
+      }
+      .wrapper {
+        position: relative;
+      }
+      #progress {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        height: 2px;
+        background: rgba(0, 60, 136, 0.4);
+        width: 0;
+        transition: width 250ms;
+      }
+    </style>
+  </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 wrapper">
+          <div id="map" class="map"></div>
+          <div id="progress"></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>
+              Image tile sources fire events related to tile loading.  You can
+              listen for <code>tileloadstart</code>, <code>tileloadend</code>,
+              and <code>tileloaderror</code> type events to monitor tile loading
+              progress.  This example registers listeners for these events and
+              renders a tile loading progress bar at the bottom of the map.
+            </p>
+            <p>
+              See the <a href="tile-load-events.js" target="_blank">tile-load-events.js source</a>
+              for more detail on 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>
--- a/examples/tile-load-events.js
+++ b/examples/tile-load-events.js
@@ -0,0 +1,104 @@
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.TileJSON');
+
+
+
+/**
+ * Renders a progress bar.
+ * @param {Element} el The target element.
+ * @constructor
+ */
+function Progress(el) {
+  this.el = el;
+  this.loading = 0;
+  this.loaded = 0;
+}
+
+
+/**
+ * Increment the count of loading tiles.
+ */
+Progress.prototype.addLoading = function() {
+  if (this.loading === 0) {
+    this.show();
+  }
+  ++this.loading;
+  this.update();
+};
+
+
+/**
+ * Increment the count of loaded tiles.
+ */
+Progress.prototype.addLoaded = function() {
+  setTimeout(function() {
+    ++this.loaded;
+    this.update();
+  }.bind(this), 100);
+};
+
+
+/**
+ * Update the progress bar.
+ */
+Progress.prototype.update = function() {
+  var width = (this.loaded / this.loading * 100).toFixed(1) + '%';
+  this.el.style.width = width;
+  if (this.loading === this.loaded) {
+    this.loading = 0;
+    this.loaded = 0;
+    setTimeout(this.hide.bind(this), 500);
+  }
+};
+
+
+/**
+ * Show the progress bar.
+ */
+Progress.prototype.show = function() {
+  this.el.style.visibility = 'visible';
+};
+
+
+/**
+ * Hide the progress bar.
+ */
+Progress.prototype.hide = function() {
+  if (this.loading === this.loaded) {
+    this.el.style.visibility = 'hidden';
+    this.el.style.width = 0;
+  }
+};
+
+var progress = new Progress(document.getElementById('progress'));
+
+var source = new ol.source.TileJSON({
+  url: 'http://api.tiles.mapbox.com/v3/mapbox.world-bright.jsonp',
+  crossOrigin: 'anonymous'
+});
+
+source.on('tileloadstart', function(event) {
+  progress.addLoading();
+});
+
+source.on('tileloadend', function(event) {
+  progress.addLoaded();
+});
+source.on('tileloaderror', function(event) {
+  progress.addLoaded();
+});
+
+var map = new ol.Map({
+  logo: false,
+  layers: [
+    new ol.layer.Tile({source: source})
+  ],
+  renderer: exampleNS.getRendererFromQueryString(),
+  target: 'map',
+  view: new ol.View({
+    center: [0, 0],
+    zoom: 2
+  })
+});
--- a/externs/oli.js
+++ b/externs/oli.js
@@ -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
--- a/src/ol/imagetile.js
+++ b/src/ol/imagetile.js
@@ -64,6 +64,15 @@ ol.ImageTile = function(tileCoord, state, src, crossOrigin, tileLoadFunction) {
 goog.inherits(ol.ImageTile, ol.Tile);


+/**
+ * @inheritDoc
+ */
+ol.ImageTile.prototype.disposeInternal = function() {
+  this.unlistenImage_();
+  goog.base(this, 'disposeInternal');
+};
+
+
 /**
 * @inheritDoc
 * @api
@@ -136,6 +145,7 @@ ol.ImageTile.prototype.handleImageLoad_ = function() {
 ol.ImageTile.prototype.load = function() {
  if (this.state == ol.TileState.IDLE) {
    this.state = ol.TileState.LOADING;
+    this.changed();
    goog.asserts.assert(goog.isNull(this.imageListenerKeys_));
    this.imageListenerKeys_ = [
      goog.events.listenOnce(this.image_, goog.events.EventType.ERROR,
--- a/src/ol/source/tileimagesource.js
+++ b/src/ol/source/tileimagesource.js
@@ -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
--- a/src/ol/source/tilesource.js
+++ b/src/ol/source/tilesource.js
@@ -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'
+
+};
--- a/src/ol/tilequeue.js
+++ b/src/ol/tilequeue.js
@@ -4,6 +4,7 @@ goog.provide('ol.TileQueue');
 goog.require('goog.events');
 goog.require('goog.events.EventType');
 goog.require('ol.Coordinate');
+goog.require('ol.TileState');
 goog.require('ol.structs.PriorityQueue');


@@ -67,11 +68,17 @@ ol.TileQueue.prototype.getTilesLoading = function() {


 /**
+ * @param {goog.events.Event} event Event.
 * @protected
 */
-ol.TileQueue.prototype.handleTileChange = function() {
-  --this.tilesLoading_;
-  this.tileChangeCallback_();
+ol.TileQueue.prototype.handleTileChange = function(event) {
+  var tile = /** @type {ol.Tile} */ (event.target);
+  var state = tile.getState();
+  if (state === ol.TileState.LOADED || state === ol.TileState.ERROR ||
+      state === ol.TileState.EMPTY) {
+    --this.tilesLoading_;
+    this.tileChangeCallback_();
+  }
 };


@@ -85,7 +92,7 @@ ol.TileQueue.prototype.loadMoreTiles = function(maxTotalLoading, maxNewLoads) {
  var i, tile;
  for (i = 0; i < newLoads; ++i) {
    tile = /** @type {ol.Tile} */ (this.dequeue()[0]);
-    goog.events.listenOnce(tile, goog.events.EventType.CHANGE,
+    goog.events.listen(tile, goog.events.EventType.CHANGE,
        this.handleTileChange, false, this);
    tile.load();
  }