-
-
Notifications
You must be signed in to change notification settings - Fork 3k
/
Tile.js
319 lines (289 loc) · 8.75 KB
/
Tile.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
/**
* @module ol/Tile
*/
import EventTarget from './events/Target.js';
import EventType from './events/EventType.js';
import TileState from './TileState.js';
import {abstract} from './util.js';
import {easeIn} from './easing.js';
/**
* A function that takes an {@link module:ol/Tile~Tile} for the tile and a
* `{string}` for the url as arguments. The default is
* ```js
* source.setTileLoadFunction(function(tile, src) {
* tile.getImage().src = src;
* });
* ```
* For more fine grained control, the load function can use fetch or XMLHttpRequest and involve
* error handling:
*
* ```js
* import TileState from 'ol/TileState.js';
*
* source.setTileLoadFunction(function(tile, src) {
* const xhr = new XMLHttpRequest();
* xhr.responseType = 'blob';
* xhr.addEventListener('loadend', function (evt) {
* const data = this.response;
* if (data !== undefined) {
* tile.getImage().src = URL.createObjectURL(data);
* } else {
* tile.setState(TileState.ERROR);
* }
* });
* xhr.addEventListener('error', function () {
* tile.setState(TileState.ERROR);
* });
* xhr.open('GET', src);
* xhr.send();
* });
* ```
*
* @typedef {function(Tile, string): void} LoadFunction
* @api
*/
/**
* {@link module:ol/source/Tile~TileSource} sources use a function of this type to get
* the url that provides a tile for a given tile coordinate.
*
* This function takes an {@link module:ol/tilecoord~TileCoord} for the tile
* coordinate, a `{number}` representing the pixel ratio and a
* {@link module:ol/proj/Projection~Projection} for the projection as arguments
* and returns a `{string}` representing the tile URL, or undefined if no tile
* should be requested for the passed tile coordinate.
*
* @typedef {function(import("./tilecoord.js").TileCoord, number,
* import("./proj/Projection.js").default): (string|undefined)} UrlFunction
* @api
*/
/**
* @typedef {Object} Options
* @property {number} [transition=250] A duration for tile opacity
* transitions in milliseconds. A duration of 0 disables the opacity transition.
* @property {boolean} [interpolate=false] Use interpolated values when resampling. By default,
* the nearest neighbor is used when resampling.
* @api
*/
/**
* @classdesc
* Base class for tiles.
*
* @abstract
*/
class Tile extends EventTarget {
/**
* @param {import("./tilecoord.js").TileCoord} tileCoord Tile coordinate.
* @param {import("./TileState.js").default} state State.
* @param {Options} [options] Tile options.
*/
constructor(tileCoord, state, options) {
super();
options = options ? options : {};
/**
* @type {import("./tilecoord.js").TileCoord}
*/
this.tileCoord = tileCoord;
/**
* @protected
* @type {import("./TileState.js").default}
*/
this.state = state;
/**
* An "interim" tile for this tile. The interim tile may be used while this
* one is loading, for "smooth" transitions when changing params/dimensions
* on the source.
* @type {Tile|null}
*/
this.interimTile = null;
/**
* A key assigned to the tile. This is used by the tile source to determine
* if this tile can effectively be used, or if a new tile should be created
* and this one be used as an interim tile for this new tile.
* @type {string}
*/
this.key = '';
/**
* The duration for the opacity transition.
* @type {number}
*/
this.transition_ =
options.transition === undefined ? 250 : options.transition;
/**
* Lookup of start times for rendering transitions. If the start time is
* equal to -1, the transition is complete.
* @type {Object<string, number>}
*/
this.transitionStarts_ = {};
/**
* @type {boolean}
*/
this.interpolate = !!options.interpolate;
}
/**
* @protected
*/
changed() {
this.dispatchEvent(EventType.CHANGE);
}
/**
* Called by the tile cache when the tile is removed from the cache due to expiry
*/
release() {
if (this.state === TileState.ERROR) {
// to remove the `change` listener on this tile in `ol/TileQueue#handleTileChange`
this.setState(TileState.EMPTY);
}
}
/**
* @return {string} Key.
*/
getKey() {
return this.key + '/' + this.tileCoord;
}
/**
* Get the interim tile most suitable for rendering using the chain of interim
* tiles. This corresponds to the most recent tile that has been loaded, if no
* such tile exists, the original tile is returned.
* @return {!Tile} Best tile for rendering.
*/
getInterimTile() {
let tile = this.interimTile;
if (!tile) {
//empty chain
return this;
}
// find the first loaded tile and return it. Since the chain is sorted in
// decreasing order of creation time, there is no need to search the remainder
// of the list (all those tiles correspond to older requests and will be
// cleaned up by refreshInterimChain)
do {
if (tile.getState() == TileState.LOADED) {
// Show tile immediately instead of fading it in after loading, because
// the interim tile is in place already
this.transition_ = 0;
return tile;
}
tile = tile.interimTile;
} while (tile);
// we can not find a better tile
return this;
}
/**
* Goes through the chain of interim tiles and discards sections of the chain
* that are no longer relevant.
*/
refreshInterimChain() {
let tile = this.interimTile;
if (!tile) {
return;
}
/** @type {Tile} */
let prev = this;
do {
if (tile.getState() == TileState.LOADED) {
//we have a loaded tile, we can discard the rest of the list
//we would could abort any LOADING tile request
//older than this tile (i.e. any LOADING tile following this entry in the chain)
tile.interimTile = null;
break;
}
if (tile.getState() == TileState.LOADING) {
//keep this LOADING tile any loaded tiles later in the chain are
//older than this tile, so we're still interested in the request
prev = tile;
} else if (tile.getState() == TileState.IDLE) {
//the head of the list is the most current tile, we don't need
//to start any other requests for this chain
prev.interimTile = tile.interimTile;
} else {
prev = tile;
}
tile = prev.interimTile;
} while (tile);
}
/**
* Get the tile coordinate for this tile.
* @return {import("./tilecoord.js").TileCoord} The tile coordinate.
* @api
*/
getTileCoord() {
return this.tileCoord;
}
/**
* @return {import("./TileState.js").default} State.
*/
getState() {
return this.state;
}
/**
* Sets the state of this tile. If you write your own {@link module:ol/Tile~LoadFunction tileLoadFunction} ,
* it is important to set the state correctly to {@link module:ol/TileState~ERROR}
* when the tile cannot be loaded. Otherwise the tile cannot be removed from
* the tile queue and will block other requests.
* @param {import("./TileState.js").default} state State.
* @api
*/
setState(state) {
if (this.state !== TileState.ERROR && this.state > state) {
throw new Error('Tile load sequence violation');
}
this.state = state;
this.changed();
}
/**
* Load the image or retry if loading previously failed.
* Loading is taken care of by the tile queue, and calling this method is
* only needed for preloading or for reloading in case of an error.
* @abstract
* @api
*/
load() {
abstract();
}
/**
* Get the alpha value for rendering.
* @param {string} id An id for the renderer.
* @param {number} time The render frame time.
* @return {number} A number between 0 and 1.
*/
getAlpha(id, time) {
if (!this.transition_) {
return 1;
}
let start = this.transitionStarts_[id];
if (!start) {
start = time;
this.transitionStarts_[id] = start;
} else if (start === -1) {
return 1;
}
const delta = time - start + 1000 / 60; // avoid rendering at 0
if (delta >= this.transition_) {
return 1;
}
return easeIn(delta / this.transition_);
}
/**
* Determine if a tile is in an alpha transition. A tile is considered in
* transition if tile.getAlpha() has not yet been called or has been called
* and returned 1.
* @param {string} id An id for the renderer.
* @return {boolean} The tile is in transition.
*/
inTransition(id) {
if (!this.transition_) {
return false;
}
return this.transitionStarts_[id] !== -1;
}
/**
* Mark a transition as complete.
* @param {string} id An id for the renderer.
*/
endTransition(id) {
if (this.transition_) {
this.transitionStarts_[id] = -1;
}
}
}
export default Tile;