ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add tile loading events to image tile sources

Browse Source
This commit is contained in:
Tim Schaub
2015-02-16 16:43:58 -07:00
parent bf35b40b11
commit 5cbae8c8f5
5 changed files with 184 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
examples/tile-load-events.html Normal file
View File

@@ -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>

35
examples/tile-load-events.js Normal file
View File

@@ -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
})
});

11
externs/oli.js
View File

@@ -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

30
src/ol/source/tileimagesource.js
View File

@@ -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

57
src/ol/source/tilesource.js
View File

@@ -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'
};