Progress bar for tile loading
This commit is contained in:
Tim Schaub
@@ -9,6 +9,20 @@
|
|||||||
<link rel="stylesheet" href="../resources/layout.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">
|
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
||||||
<title>Tile load events example</title>
|
<title>Tile load events example</title>
|
||||||
|
<style>
|
||||||
|
.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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
@@ -23,8 +37,9 @@
|
|||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
|
|
||||||
<div class="row-fluid">
|
<div class="row-fluid">
|
||||||
<div class="span12">
|
<div class="span12 wrapper">
|
||||||
<div id="map" class="map"></div>
|
<div id="map" class="map"></div>
|
||||||
|
<div id="progress"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -1,31 +1,96 @@
|
|||||||
goog.require('ol.Map');
|
goog.require('ol.Map');
|
||||||
goog.require('ol.View');
|
goog.require('ol.View');
|
||||||
goog.require('ol.control');
|
|
||||||
goog.require('ol.layer.Tile');
|
goog.require('ol.layer.Tile');
|
||||||
goog.require('ol.source.OSM');
|
goog.require('ol.source.OSM');
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 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.OSM();
|
var source = new ol.source.OSM();
|
||||||
|
|
||||||
source.on('tileloadstart', function(event) {
|
source.on('tileloadstart', function(event) {
|
||||||
console.log('start', event.tile.getImage().src);
|
progress.addLoading();
|
||||||
});
|
|
||||||
source.on('tileloadend', function(event) {
|
|
||||||
console.log('end', event.tile.getImage().src);
|
|
||||||
});
|
|
||||||
source.on('tileloaderror', function(event) {
|
|
||||||
console.log('error', event.tile.getImage().src);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
source.on('tileloadend', function(event) {
|
||||||
|
progress.addLoaded();
|
||||||
|
});
|
||||||
|
source.on('tileloaderror', function(event) {
|
||||||
|
progress.addLoaded();
|
||||||
|
});
|
||||||
|
|
||||||
var map = new ol.Map({
|
var map = new ol.Map({
|
||||||
layers: [
|
layers: [
|
||||||
new ol.layer.Tile({source: source})
|
new ol.layer.Tile({source: source})
|
||||||
],
|
],
|
||||||
controls: ol.control.defaults({
|
|
||||||
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
|
|
||||||
collapsible: false
|
|
||||||
})
|
|
||||||
}),
|
|
||||||
renderer: exampleNS.getRendererFromQueryString(),
|
renderer: exampleNS.getRendererFromQueryString(),
|
||||||
target: 'map',
|
target: 'map',
|
||||||
view: new ol.View({
|
view: new ol.View({
|
||||||
|
|||||||
Reference in New Issue
Block a user