ad62739a6e
In addition to using const and let, this also upgrades our linter config and removes lint (mostly whitespace).
107 lines
1.9 KiB
JavaScript
107 lines
1.9 KiB
JavaScript
import Map from '../src/ol/Map.js';
|
|
import View from '../src/ol/View.js';
|
|
import ImageLayer from '../src/ol/layer/Image.js';
|
|
import ImageWMS from '../src/ol/source/ImageWMS.js';
|
|
|
|
|
|
/**
|
|
* 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() {
|
|
const this_ = this;
|
|
setTimeout(function() {
|
|
++this_.loaded;
|
|
this_.update();
|
|
}, 100);
|
|
};
|
|
|
|
|
|
/**
|
|
* Update the progress bar.
|
|
*/
|
|
Progress.prototype.update = function() {
|
|
const width = (this.loaded / this.loading * 100).toFixed(1) + '%';
|
|
this.el.style.width = width;
|
|
if (this.loading === this.loaded) {
|
|
this.loading = 0;
|
|
this.loaded = 0;
|
|
const this_ = this;
|
|
setTimeout(function() {
|
|
this_.hide();
|
|
}, 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;
|
|
}
|
|
};
|
|
|
|
const progress = new Progress(document.getElementById('progress'));
|
|
|
|
const source = new ImageWMS({
|
|
url: 'https://ahocevar.com/geoserver/wms',
|
|
params: {'LAYERS': 'topp:states'},
|
|
serverType: 'geoserver'
|
|
});
|
|
|
|
source.on('imageloadstart', function() {
|
|
progress.addLoading();
|
|
});
|
|
|
|
source.on('imageloadend', function() {
|
|
progress.addLoaded();
|
|
});
|
|
source.on('imageloaderror', function() {
|
|
progress.addLoaded();
|
|
});
|
|
|
|
const map = new Map({
|
|
layers: [
|
|
new ImageLayer({source: source})
|
|
],
|
|
target: 'map',
|
|
view: new View({
|
|
center: [-10997148, 4569099],
|
|
zoom: 4
|
|
})
|
|
});
|