1 | goog.require('ol.Map');
|
2 | goog.require('ol.View');
|
3 | goog.require('ol.layer.Image');
|
4 | goog.require('ol.source.ImageWMS');
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 | function Progress(el) {
|
13 | this.el = el;
|
14 | this.loading = 0;
|
15 | this.loaded = 0;
|
16 | }
|
17 |
|
18 |
|
19 |
|
20 |
|
21 |
|
22 | Progress.prototype.addLoading = function() {
|
23 | if (this.loading === 0) {
|
24 | this.show();
|
25 | }
|
26 | ++this.loading;
|
27 | this.update();
|
28 | };
|
29 |
|
30 |
|
31 |
|
32 |
|
33 |
|
34 | Progress.prototype.addLoaded = function() {
|
35 | var this_ = this;
|
36 | setTimeout(function() {
|
37 | ++this_.loaded;
|
38 | this_.update();
|
39 | }, 100);
|
40 | };
|
41 |
|
42 |
|
43 |
|
44 |
|
45 |
|
46 | Progress.prototype.update = function() {
|
47 | var width = (this.loaded / this.loading * 100).toFixed(1) + '%';
|
48 | this.el.style.width = width;
|
49 | if (this.loading === this.loaded) {
|
50 | this.loading = 0;
|
51 | this.loaded = 0;
|
52 | var this_ = this;
|
53 | setTimeout(function() {
|
54 | this_.hide();
|
55 | }, 500);
|
56 | }
|
57 | };
|
58 |
|
59 |
|
60 |
|
61 |
|
62 |
|
63 | Progress.prototype.show = function() {
|
64 | this.el.style.visibility = 'visible';
|
65 | };
|
66 |
|
67 |
|
68 |
|
69 |
|
70 |
|
71 | Progress.prototype.hide = function() {
|
72 | if (this.loading === this.loaded) {
|
73 | this.el.style.visibility = 'hidden';
|
74 | this.el.style.width = 0;
|
75 | }
|
76 | };
|
77 |
|
78 | var progress = new Progress(document.getElementById('progress'));
|
79 |
|
80 | var source = new ol.source.ImageWMS({
|
81 | url: 'https://ahocevar.com/geoserver/wms',
|
82 | params: {'LAYERS': 'topp:states'},
|
83 | serverType: 'geoserver'
|
84 | });
|
85 |
|
86 | source.on('imageloadstart', function() {
|
87 | progress.addLoading();
|
88 | });
|
89 |
|
90 | source.on('imageloadend', function() {
|
91 | progress.addLoaded();
|
92 | });
|
93 | source.on('imageloaderror', function() {
|
94 | progress.addLoaded();
|
95 | });
|
96 |
|
97 | var map = new ol.Map({
|
98 | logo: false,
|
99 | layers: [
|
100 | new ol.layer.Image({source: source})
|
101 | ],
|
102 | target: 'map',
|
103 | view: new ol.View({
|
104 | center: [-10997148, 4569099],
|
105 | zoom: 4
|
106 | })
|
107 | });
|