|
1
|
/* Copyright (c) 2006-2013 by OpenLayers Contributors (see authors.txt for
|
|
2
|
* full list of contributors). Published under the 2-clause BSD license.
|
|
3
|
* See license.txt in the OpenLayers distribution or repository for the
|
|
4
|
* full text of the license. */
|
|
5
|
|
|
6
|
|
|
7
|
/**
|
|
8
|
* @requires OpenLayers/Layer/HTTPRequest.js
|
|
9
|
* @requires OpenLayers/Tile/Image.js
|
|
10
|
*/
|
|
11
|
|
|
12
|
/**
|
|
13
|
* Class: OpenLayers.Layer.Grid
|
|
14
|
* Base class for layers that use a lattice of tiles. Create a new grid
|
|
15
|
* layer with the <OpenLayers.Layer.Grid> constructor.
|
|
16
|
*
|
|
17
|
* Inherits from:
|
|
18
|
* - <OpenLayers.Layer.HTTPRequest>
|
|
19
|
*/
|
|
20
|
OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
|
|
21
|
|
|
22
|
/**
|
|
23
|
* APIProperty: tileSize
|
|
24
|
* {<OpenLayers.Size>}
|
|
25
|
*/
|
|
26
|
tileSize: null,
|
|
27
|
|
|
28
|
/**
|
|
29
|
* Property: tileOriginCorner
|
|
30
|
* {String} If the <tileOrigin> property is not provided, the tile origin
|
|
31
|
* will be derived from the layer's <maxExtent>. The corner of the
|
|
32
|
* <maxExtent> used is determined by this property. Acceptable values
|
|
33
|
* are "tl" (top left), "tr" (top right), "bl" (bottom left), and "br"
|
|
34
|
* (bottom right). Default is "bl".
|
|
35
|
*/
|
|
36
|
tileOriginCorner: "bl",
|
|
37
|
|
|
38
|
/**
|
|
39
|
* APIProperty: tileOrigin
|
|
40
|
* {<OpenLayers.LonLat>} Optional origin for aligning the grid of tiles.
|
|
41
|
* If provided, requests for tiles at all resolutions will be aligned
|
|
42
|
* with this location (no tiles shall overlap this location). If
|
|
43
|
* not provided, the grid of tiles will be aligned with the layer's
|
|
44
|
* <maxExtent>. Default is ``null``.
|
|
45
|
*/
|
|
46
|
tileOrigin: null,
|
|
47
|
|
|
48
|
/** APIProperty: tileOptions
|
|
49
|
* {Object} optional configuration options for <OpenLayers.Tile> instances
|
|
50
|
* created by this Layer, if supported by the tile class.
|
|
51
|
*/
|
|
52
|
tileOptions: null,
|
|
53
|
|
|
54
|
/**
|
|
55
|
* APIProperty: tileClass
|
|
56
|
* {<OpenLayers.Tile>} The tile class to use for this layer.
|
|
57
|
* Defaults is OpenLayers.Tile.Image.
|
|
58
|
*/
|
|
59
|
tileClass: OpenLayers.Tile.Image,
|
|
60
|
|
|
61
|
/**
|
|
62
|
* Property: grid
|
|
63
|
* {Array(Array(<OpenLayers.Tile>))} This is an array of rows, each row is
|
|
64
|
* an array of tiles.
|
|
65
|
*/
|
|
66
|
grid: null,
|
|
67
|
|
|
68
|
/**
|
|
69
|
* APIProperty: singleTile
|
|
70
|
* {Boolean} Moves the layer into single-tile mode, meaning that one tile
|
|
71
|
* will be loaded. The tile's size will be determined by the 'ratio'
|
|
72
|
* property. When the tile is dragged such that it does not cover the
|
|
73
|
* entire viewport, it is reloaded.
|
|
74
|
*/
|
|
75
|
singleTile: false,
|
|
76
|
|
|
77
|
/** APIProperty: ratio
|
|
78
|
* {Float} Used only when in single-tile mode, this specifies the
|
|
79
|
* ratio of the size of the single tile to the size of the map.
|
|
80
|
* Default value is 1.5.
|
|
81
|
*/
|
|
82
|
ratio: 1.5,
|
|
83
|
|
|
84
|
/**
|
|
85
|
* APIProperty: buffer
|
|
86
|
* {Integer} Used only when in gridded mode, this specifies the number of
|
|
87
|
* extra rows and colums of tiles on each side which will
|
|
88
|
* surround the minimum grid tiles to cover the map.
|
|
89
|
* For very slow loading layers, a larger value may increase
|
|
90
|
* performance somewhat when dragging, but will increase bandwidth
|
|
91
|
* use significantly.
|
|
92
|
*/
|
|
93
|
buffer: 0,
|
|
94
|
|
|
95
|
/**
|
|
96
|
* APIProperty: transitionEffect
|
|
97
|
* {String} The transition effect to use when the map is zoomed.
|
|
98
|
* Two posible values:
|
|
99
|
*
|
|
100
|
* "resize" - Existing tiles are resized on zoom to provide a visual
|
|
101
|
* effect of the zoom having taken place immediately. As the
|
|
102
|
* new tiles become available, they are drawn on top of the
|
|
103
|
* resized tiles (this is the default setting).
|
|
104
|
* "map-resize" - Existing tiles are resized on zoom and placed below the
|
|
105
|
* base layer. New tiles for the base layer will cover existing tiles.
|
|
106
|
* This setting is recommended when having an overlay duplicated during
|
|
107
|
* the transition is undesirable (e.g. street labels or big transparent
|
|
108
|
* fills).
|
|
109
|
* null - No transition effect.
|
|
110
|
*
|
|
111
|
* Using "resize" on non-opaque layers can cause undesired visual
|
|
112
|
* effects. Set transitionEffect to null in this case.
|
|
113
|
*/
|
|
114
|
transitionEffect: "resize",
|
|
115
|
|
|
116
|
/**
|
|
117
|
* APIProperty: numLoadingTiles
|
|
118
|
* {Integer} How many tiles are still loading?
|
|
119
|
*/
|
|
120
|
numLoadingTiles: 0,
|
|
121
|
|
|
122
|
/**
|
|
123
|
* Property: serverResolutions
|
|
124
|
* {Array(Number}} This property is documented in subclasses as
|
|
125
|
* an API property.
|
|
126
|
*/
|
|
127
|
serverResolutions: null,
|
|
128
|
|
|
129
|
/**
|
|
130
|
* Property: loading
|
|
131
|
* {Boolean} Indicates if tiles are being loaded.
|
|
132
|
*/
|
|
133
|
loading: false,
|
|
134
|
|
|
135
|
/**
|
|
136
|
* Property: backBuffer
|
|
137
|
* {DOMElement} The back buffer.
|
|
138
|
*/
|
|
139
|
backBuffer: null,
|
|
140
|
|
|
141
|
/**
|
|
142
|
* Property: gridResolution
|
|
143
|
* {Number} The resolution of the current grid. Used for backbuffer and
|
|
144
|
* client zoom. This property is updated every time the grid is
|
|
145
|
* initialized.
|
|
146
|
*/
|
|
147
|
gridResolution: null,
|
|
148
|
|
|
149
|
/**
|
|
150
|
* Property: backBufferResolution
|
|
151
|
* {Number} The resolution of the current back buffer. This property is
|
|
152
|
* updated each time a back buffer is created.
|
|
153
|
*/
|
|
154
|
backBufferResolution: null,
|
|
155
|
|
|
156
|
/**
|
|
157
|
* Property: backBufferLonLat
|
|
158
|
* {Object} The top-left corner of the current back buffer. Includes lon
|
|
159
|
* and lat properties. This object is updated each time a back buffer
|
|
160
|
* is created.
|
|
161
|
*/
|
|
162
|
backBufferLonLat: null,
|
|
163
|
|
|
164
|
/**
|
|
165
|
* Property: backBufferTimerId
|
|
166
|
* {Number} The id of the back buffer timer. This timer is used to
|
|
167
|
* delay the removal of the back buffer, thereby preventing
|
|
168
|
* flash effects caused by tile animation.
|
|
169
|
*/
|
|
170
|
backBufferTimerId: null,
|
|
171
|
|
|
172
|
/**
|
|
173
|
* APIProperty: removeBackBufferDelay
|
|
174
|
* {Number} Delay for removing the backbuffer when all tiles have finished
|
|
175
|
* loading. Can be set to 0 when no css opacity transitions for the
|
|
176
|
* olTileImage class are used. Default is 0 for <singleTile> layers,
|
|
177
|
* 2500 for tiled layers. See <className> for more information on
|
|
178
|
* tile animation.
|
|
179
|
*/
|
|
180
|
removeBackBufferDelay: null,
|
|
181
|
|
|
182
|
/**
|
|
183
|
* APIProperty: className
|
|
184
|
* {String} Name of the class added to the layer div. If not set in the
|
|
185
|
* options passed to the constructor then className defaults to
|
|
186
|
* "olLayerGridSingleTile" for single tile layers (see <singleTile>),
|
|
187
|
* and "olLayerGrid" for non single tile layers.
|
|
188
|
*
|
|
189
|
* Note:
|
|
190
|
*
|
|
191
|
* The displaying of tiles is not animated by default for single tile
|
|
192
|
* layers - OpenLayers' default theme (style.css) includes this:
|
|
193
|
* (code)
|
|
194
|
* .olLayerGrid .olTileImage {
|
|
195
|
* -webkit-transition: opacity 0.2s linear;
|
|
196
|
* -moz-transition: opacity 0.2s linear;
|
|
197
|
* -o-transition: opacity 0.2s linear;
|
|
198
|
* transition: opacity 0.2s linear;
|
|
199
|
* }
|
|
200
|
* (end)
|
|
201
|
* To animate tile displaying for any grid layer the following
|
|
202
|
* CSS rule can be used:
|
|
203
|
* (code)
|
|
204
|
* .olTileImage {
|
|
205
|
* -webkit-transition: opacity 0.2s linear;
|
|
206
|
* -moz-transition: opacity 0.2s linear;
|
|
207
|
* -o-transition: opacity 0.2s linear;
|
|
208
|
* transition: opacity 0.2s linear;
|
|
209
|
* }
|
|
210
|
* (end)
|
|
211
|
* In that case, to avoid flash effects, <removeBackBufferDelay>
|
|
212
|
* should not be zero.
|
|
213
|
*/
|
|
214
|
className: null,
|
|
215
|
|
|
216
|
/**
|
|
217
|
* Register a listener for a particular event with the following syntax:
|
|
218
|
* (code)
|
|
219
|
* layer.events.register(type, obj, listener);
|
|
220
|
* (end)
|
|
221
|
*
|
|
222
|
* Listeners will be called with a reference to an event object. The
|
|
223
|
* properties of this event depends on exactly what happened.
|
|
224
|
*
|
|
225
|
* All event objects have at least the following properties:
|
|
226
|
* object - {Object} A reference to layer.events.object.
|
|
227
|
* element - {DOMElement} A reference to layer.events.element.
|
|
228
|
*
|
|
229
|
* Supported event types:
|
|
230
|
* addtile - Triggered when a tile is added to this layer. Listeners receive
|
|
231
|
* an object as first argument, which has a tile property that
|
|
232
|
* references the tile that has been added.
|
|
233
|
* tileloadstart - Triggered when a tile starts loading. Listeners receive
|
|
234
|
* an object as first argument, which has a tile property that
|
|
235
|
* references the tile that starts loading.
|
|
236
|
* tileloaded - Triggered when each new tile is
|
|
237
|
* loaded, as a means of progress update to listeners.
|
|
238
|
* listeners can access 'numLoadingTiles' if they wish to keep
|
|
239
|
* track of the loading progress. Listeners are called with an object
|
|
240
|
* with a 'tile' property as first argument, making the loaded tile
|
|
241
|
* available to the listener, and an 'aborted' property, which will be
|
|
242
|
* true when loading was aborted and no tile data is available.
|
|
243
|
* tileerror - Triggered before the tileloaded event (i.e. when the tile is
|
|
244
|
* still hidden) if a tile failed to load. Listeners receive an object
|
|
245
|
* as first argument, which has a tile property that references the
|
|
246
|
* tile that could not be loaded.
|
|
247
|
* retile - Triggered when the layer recreates its tile grid.
|
|
248
|
*/
|
|
249
|
|
|
250
|
/**
|
|
251
|
* Property: gridLayout
|
|
252
|
* {Object} Object containing properties tilelon, tilelat, startcol,
|
|
253
|
* startrow
|
|
254
|
*/
|
|
255
|
gridLayout: null,
|
|
256
|
|
|
257
|
/**
|
|
258
|
* Property: rowSign
|
|
259
|
* {Number} 1 for grids starting at the top, -1 for grids starting at the
|
|
260
|
* bottom. This is used for several grid index and offset calculations.
|
|
261
|
*/
|
|
262
|
rowSign: null,
|
|
263
|
|
|
264
|
/**
|
|
265
|
* Property: transitionendEvents
|
|
266
|
* {Array} Event names for transitionend
|
|
267
|
*/
|
|
268
|
transitionendEvents: [
|
|
269
|
'transitionend', 'webkitTransitionEnd', 'otransitionend',
|
|
270
|
'oTransitionEnd'
|
|
271
|
],
|
|
272
|
|
|
273
|
/**
|
|
274
|
* Constructor: OpenLayers.Layer.Grid
|
|
275
|
* Create a new grid layer
|
|
276
|
*
|
|
277
|
* Parameters:
|
|
278
|
* name - {String}
|
|
279
|
* url - {String}
|
|
280
|
* params - {Object}
|
|
281
|
* options - {Object} Hashtable of extra options to tag onto the layer
|
|
282
|
*/
|
|
283
|
initialize: function(name, url, params, options) {
|
|
284
|
OpenLayers.Layer.HTTPRequest.prototype.initialize.apply(this,
|
|
285
|
arguments);
|
|
286
|
this.grid = [];
|
|
287
|
this._removeBackBuffer = OpenLayers.Function.bind(this.removeBackBuffer, this);
|
|
288
|
|
|
289
|
this.initProperties();
|
|
290
|
|
|
291
|
this.rowSign = this.tileOriginCorner.substr(0, 1) === "t" ? 1 : -1;
|
|
292
|
},
|
|
293
|
|
|
294
|
/**
|
|
295
|
* Method: initProperties
|
|
296
|
* Set any properties that depend on the value of singleTile.
|
|
297
|
* Currently sets removeBackBufferDelay and className
|
|
298
|
*/
|
|
299
|
initProperties: function() {
|
|
300
|
if (this.options.removeBackBufferDelay === undefined) {
|
|
301
|
this.removeBackBufferDelay = this.singleTile ? 0 : 2500;
|
|
302
|
}
|
|
303
|
|
|
304
|
if (this.options.className === undefined) {
|
|
305
|
this.className = this.singleTile ? 'olLayerGridSingleTile' :
|
|
306
|
'olLayerGrid';
|
|
307
|
}
|
|
308
|
},
|
|
309
|
|
|
310
|
/**
|
|
311
|
* Method: setMap
|
|
312
|
*
|
|
313
|
* Parameters:
|
|
314
|
* map - {<OpenLayers.Map>} The map.
|
|
315
|
*/
|
|
316
|
setMap: function(map) {
|
|
317
|
OpenLayers.Layer.HTTPRequest.prototype.setMap.call(this, map);
|
|
318
|
OpenLayers.Element.addClass(this.div, this.className);
|
|
319
|
},
|
|
320
|
|
|
321
|
/**
|
|
322
|
* Method: removeMap
|
|
323
|
* Called when the layer is removed from the map.
|
|
324
|
*
|
|
325
|
* Parameters:
|
|
326
|
* map - {<OpenLayers.Map>} The map.
|
|
327
|
*/
|
|
328
|
removeMap: function(map) {
|
|
329
|
this.removeBackBuffer();
|
|
330
|
},
|
|
331
|
|
|
332
|
/**
|
|
333
|
* APIMethod: destroy
|
|
334
|
* Deconstruct the layer and clear the grid.
|
|
335
|
*/
|
|
336
|
destroy: function() {
|
|
337
|
this.removeBackBuffer();
|
|
338
|
this.clearGrid();
|
|
339
|
|
|
340
|
this.grid = null;
|
|
341
|
this.tileSize = null;
|
|
342
|
OpenLayers.Layer.HTTPRequest.prototype.destroy.apply(this, arguments);
|
|
343
|
},
|
|
344
|
|
|
345
|
/**
|
|
346
|
* APIMethod: mergeNewParams
|
|
347
|
* Refetches tiles with new params merged, keeping a backbuffer. Each
|
|
348
|
* loading new tile will have a css class of '.olTileReplacing'. If a
|
|
349
|
* stylesheet applies a 'display: none' style to that class, any fade-in
|
|
350
|
* transition will not apply, and backbuffers for each tile will be removed
|
|
351
|
* as soon as the tile is loaded.
|
|
352
|
*
|
|
353
|
* Parameters:
|
|
354
|
* newParams - {Object}
|
|
355
|
*
|
|
356
|
* Returns:
|
|
357
|
* redrawn: {Boolean} whether the layer was actually redrawn.
|
|
358
|
*/
|
|
359
|
|
|
360
|
/**
|
|
361
|
* Method: clearGrid
|
|
362
|
* Go through and remove all tiles from the grid, calling
|
|
363
|
* destroy() on each of them to kill circular references
|
|
364
|
*/
|
|
365
|
clearGrid:function() {
|
|
366
|
if (this.grid) {
|
|
367
|
for(var iRow=0, len=this.grid.length; iRow<len; iRow++) {
|
|
368
|
var row = this.grid[iRow];
|
|
369
|
for(var iCol=0, clen=row.length; iCol<clen; iCol++) {
|
|
370
|
var tile = row[iCol];
|
|
371
|
this.destroyTile(tile);
|
|
372
|
}
|
|
373
|
}
|
|
374
|
this.grid = [];
|
|
375
|
this.gridResolution = null;
|
|
376
|
this.gridLayout = null;
|
|
377
|
}
|
|
378
|
},
|
|
379
|
|
|
380
|
/**
|
|
381
|
* APIMethod: addOptions
|
|
382
|
*
|
|
383
|
* Parameters:
|
|
384
|
* newOptions - {Object}
|
|
385
|
* reinitialize - {Boolean} If set to true, and if resolution options of the
|
|
386
|
* current baseLayer were changed, the map will be recentered to make
|
|
387
|
* sure that it is displayed with a valid resolution, and a
|
|
388
|
* changebaselayer event will be triggered.
|
|
389
|
*/
|
|
390
|
addOptions: function (newOptions, reinitialize) {
|
|
391
|
var singleTileChanged = newOptions.singleTile !== undefined &&
|
|
392
|
newOptions.singleTile !== this.singleTile;
|
|
393
|
OpenLayers.Layer.HTTPRequest.prototype.addOptions.apply(this, arguments);
|
|
394
|
if (this.map && singleTileChanged) {
|
|
395
|
this.initProperties();
|
|
396
|
this.clearGrid();
|
|
397
|
this.tileSize = this.options.tileSize;
|
|
398
|
this.setTileSize();
|
|
399
|
this.moveTo(null, true);
|
|
400
|
}
|
|
401
|
},
|
|
402
|
|
|
403
|
/**
|
|
404
|
* APIMethod: clone
|
|
405
|
* Create a clone of this layer
|
|
406
|
*
|
|
407
|
* Parameters:
|
|
408
|
* obj - {Object} Is this ever used?
|
|
409
|
*
|
|
410
|
* Returns:
|
|
411
|
* {<OpenLayers.Layer.Grid>} An exact clone of this OpenLayers.Layer.Grid
|
|
412
|
*/
|
|
413
|
clone: function (obj) {
|
|
414
|
|
|
415
|
if (obj == null) {
|
|
416
|
obj = new OpenLayers.Layer.Grid(this.name,
|
|
417
|
this.url,
|
|
418
|
this.params,
|
|
419
|
this.getOptions());
|
|
420
|
}
|
|
421
|
|
|
422
|
//get all additions from superclasses
|
|
423
|
obj = OpenLayers.Layer.HTTPRequest.prototype.clone.apply(this, [obj]);
|
|
424
|
|
|
425
|
// copy/set any non-init, non-simple values here
|
|
426
|
if (this.tileSize != null) {
|
|
427
|
obj.tileSize = this.tileSize.clone();
|
|
428
|
}
|
|
429
|
|
|
430
|
// we do not want to copy reference to grid, so we make a new array
|
|
431
|
obj.grid = [];
|
|
432
|
obj.gridResolution = null;
|
|
433
|
// same for backbuffer
|
|
434
|
obj.backBuffer = null;
|
|
435
|
obj.backBufferTimerId = null;
|
|
436
|
obj.loading = false;
|
|
437
|
obj.numLoadingTiles = 0;
|
|
438
|
|
|
439
|
return obj;
|
|
440
|
},
|
|
441
|
|
|
442
|
/**
|
|
443
|
* Method: moveTo
|
|
444
|
* This function is called whenever the map is moved. All the moving
|
|
445
|
* of actual 'tiles' is done by the map, but moveTo's role is to accept
|
|
446
|
* a bounds and make sure the data that that bounds requires is pre-loaded.
|
|
447
|
*
|
|
448
|
* Parameters:
|
|
449
|
* bounds - {<OpenLayers.Bounds>}
|
|
450
|
* zoomChanged - {Boolean}
|
|
451
|
* dragging - {Boolean}
|
|
452
|
*/
|
|
453
|
moveTo:function(bounds, zoomChanged, dragging) {
|
|
454
|
|
|
455
|
OpenLayers.Layer.HTTPRequest.prototype.moveTo.apply(this, arguments);
|
|
456
|
|
|
457
|
bounds = bounds || this.map.getExtent();
|
|
458
|
|
|
459
|
if (bounds != null) {
|
|
460
|
|
|
461
|
// if grid is empty or zoom has changed, we *must* re-tile
|
|
462
|
var forceReTile = !this.grid.length || zoomChanged;
|
|
463
|
|
|
464
|
// total bounds of the tiles
|
|
465
|
var tilesBounds = this.getTilesBounds();
|
|
466
|
|
|
467
|
// the new map resolution
|
|
468
|
var resolution = this.map.getResolution();
|
|
469
|
|
|
470
|
// the server-supported resolution for the new map resolution
|
|
471
|
var serverResolution = this.getServerResolution(resolution);
|
|
472
|
|
|
473
|
if (this.singleTile) {
|
|
474
|
|
|
475
|
// We want to redraw whenever even the slightest part of the
|
|
476
|
// current bounds is not contained by our tile.
|
|
477
|
// (thus, we do not specify partial -- its default is false)
|
|
478
|
|
|
479
|
if ( forceReTile ||
|
|
480
|
(!dragging && !tilesBounds.containsBounds(bounds))) {
|
|
481
|
|
|
482
|
// In single tile mode with no transition effect, we insert
|
|
483
|
// a non-scaled backbuffer when the layer is moved. But if
|
|
484
|
// a zoom occurs right after a move, i.e. before the new
|
|
485
|
// image is received, we need to remove the backbuffer, or
|
|
486
|
// an ill-positioned image will be visible during the zoom
|
|
487
|
// transition.
|
|
488
|
|
|
489
|
if(zoomChanged && this.transitionEffect !== 'resize') {
|
|
490
|
this.removeBackBuffer();
|
|
491
|
}
|
|
492
|
|
|
493
|
if(!zoomChanged || this.transitionEffect === 'resize') {
|
|
494
|
this.applyBackBuffer(resolution);
|
|
495
|
}
|
|
496
|
|
|
497
|
this.initSingleTile(bounds);
|
|
498
|
}
|
|
499
|
} else {
|
|
500
|
|
|
501
|
// if the bounds have changed such that they are not even
|
|
502
|
// *partially* contained by our tiles (e.g. when user has
|
|
503
|
// programmatically panned to the other side of the earth on
|
|
504
|
// zoom level 18), then moveGriddedTiles could potentially have
|
|
505
|
// to run through thousands of cycles, so we want to reTile
|
|
506
|
// instead (thus, partial true).
|
|
507
|
forceReTile = forceReTile ||
|
|
508
|
!tilesBounds.intersectsBounds(bounds, {
|
|
509
|
worldBounds: this.map.baseLayer.wrapDateLine &&
|
|
510
|
this.map.getMaxExtent()
|
|
511
|
});
|
|
512
|
|
|
513
|
if(forceReTile) {
|
|
514
|
if(zoomChanged && (this.transitionEffect === 'resize' ||
|
|
515
|
this.gridResolution === resolution)) {
|
|
516
|
this.applyBackBuffer(resolution);
|
|
517
|
}
|
|
518
|
this.initGriddedTiles(bounds);
|
|
519
|
} else {
|
|
520
|
this.moveGriddedTiles();
|
|
521
|
}
|
|
522
|
}
|
|
523
|
}
|
|
524
|
},
|
|
525
|
|
|
526
|
/**
|
|
527
|
* Method: getTileData
|
|
528
|
* Given a map location, retrieve a tile and the pixel offset within that
|
|
529
|
* tile corresponding to the location. If there is not an existing
|
|
530
|
* tile in the grid that covers the given location, null will be
|
|
531
|
* returned.
|
|
532
|
*
|
|
533
|
* Parameters:
|
|
534
|
* loc - {<OpenLayers.LonLat>} map location
|
|
535
|
*
|
|
536
|
* Returns:
|
|
537
|
* {Object} Object with the following properties: tile ({<OpenLayers.Tile>}),
|
|
538
|
* i ({Number} x-pixel offset from top left), and j ({Integer} y-pixel
|
|
539
|
* offset from top left).
|
|
540
|
*/
|
|
541
|
getTileData: function(loc) {
|
|
542
|
var data = null,
|
|
543
|
x = loc.lon,
|
|
544
|
y = loc.lat,
|
|
545
|
numRows = this.grid.length;
|
|
546
|
|
|
547
|
if (this.map && numRows) {
|
|
548
|
var res = this.map.getResolution(),
|
|
549
|
tileWidth = this.tileSize.w,
|
|
550
|
tileHeight = this.tileSize.h,
|
|
551
|
bounds = this.grid[0][0].bounds,
|
|
552
|
left = bounds.left,
|
|
553
|
top = bounds.top;
|
|
554
|
|
|
555
|
if (x < left) {
|
|
556
|
// deal with multiple worlds
|
|
557
|
if (this.map.baseLayer.wrapDateLine) {
|
|
558
|
var worldWidth = this.map.getMaxExtent().getWidth();
|
|
559
|
var worldsAway = Math.ceil((left - x) / worldWidth);
|
|
560
|
x += worldWidth * worldsAway;
|
|
561
|
}
|
|
562
|
}
|
|
563
|
// tile distance to location (fractional number of tiles);
|
|
564
|
var dtx = (x - left) / (res * tileWidth);
|
|
565
|
var dty = (top - y) / (res * tileHeight);
|
|
566
|
// index of tile in grid
|
|
567
|
var col = Math.floor(dtx);
|
|
568
|
var row = Math.floor(dty);
|
|
569
|
if (row >= 0 && row < numRows) {
|
|
570
|
var tile = this.grid[row][col];
|
|
571
|
if (tile) {
|
|
572
|
data = {
|
|
573
|
tile: tile,
|
|
574
|
// pixel index within tile
|
|
575
|
i: Math.floor((dtx - col) * tileWidth),
|
|
576
|
j: Math.floor((dty - row) * tileHeight)
|
|
577
|
};
|
|
578
|
}
|
|
579
|
}
|
|
580
|
}
|
|
581
|
return data;
|
|
582
|
},
|
|
583
|
|
|
584
|
/**
|
|
585
|
* Method: destroyTile
|
|
586
|
*
|
|
587
|
* Parameters:
|
|
588
|
* tile - {<OpenLayers.Tile>}
|
|
589
|
*/
|
|
590
|
destroyTile: function(tile) {
|
|
591
|
this.removeTileMonitoringHooks(tile);
|
|
592
|
tile.destroy();
|
|
593
|
},
|
|
594
|
|
|
595
|
/**
|
|
596
|
* Method: getServerResolution
|
|
597
|
* Return the closest server-supported resolution.
|
|
598
|
*
|
|
599
|
* Parameters:
|
|
600
|
* resolution - {Number} The base resolution. If undefined the
|
|
601
|
* map resolution is used.
|
|
602
|
*
|
|
603
|
* Returns:
|
|
604
|
* {Number} The closest server resolution value.
|
|
605
|
*/
|
|
606
|
getServerResolution: function(resolution) {
|
|
607
|
var distance = Number.POSITIVE_INFINITY;
|
|
608
|
resolution = resolution || this.map.getResolution();
|
|
609
|
if(this.serverResolutions &&
|
|
610
|
OpenLayers.Util.indexOf(this.serverResolutions, resolution) === -1) {
|
|
611
|
var i, newDistance, newResolution, serverResolution;
|
|
612
|
for(i=this.serverResolutions.length-1; i>= 0; i--) {
|
|
613
|
newResolution = this.serverResolutions[i];
|
|
614
|
newDistance = Math.abs(newResolution - resolution);
|
|
615
|
if (newDistance > distance) {
|
|
616
|
break;
|
|
617
|
}
|
|
618
|
distance = newDistance;
|
|
619
|
serverResolution = newResolution;
|
|
620
|
}
|
|
621
|
resolution = serverResolution;
|
|
622
|
}
|
|
623
|
return resolution;
|
|
624
|
},
|
|
625
|
|
|
626
|
/**
|
|
627
|
* Method: getServerZoom
|
|
628
|
* Return the zoom value corresponding to the best matching server
|
|
629
|
* resolution, taking into account <serverResolutions> and <zoomOffset>.
|
|
630
|
*
|
|
631
|
* Returns:
|
|
632
|
* {Number} The closest server supported zoom. This is not the map zoom
|
|
633
|
* level, but an index of the server's resolutions array.
|
|
634
|
*/
|
|
635
|
getServerZoom: function() {
|
|
636
|
var resolution = this.getServerResolution();
|
|
637
|
return this.serverResolutions ?
|
|
638
|
OpenLayers.Util.indexOf(this.serverResolutions, resolution) :
|
|
639
|
this.map.getZoomForResolution(resolution) + (this.zoomOffset || 0);
|
|
640
|
},
|
|
641
|
|
|
642
|
/**
|
|
643
|
* Method: applyBackBuffer
|
|
644
|
* Create, insert, scale and position a back buffer for the layer.
|
|
645
|
*
|
|
646
|
* Parameters:
|
|
647
|
* resolution - {Number} The resolution to transition to.
|
|
648
|
*/
|
|
649
|
applyBackBuffer: function(resolution) {
|
|
650
|
if(this.backBufferTimerId !== null) {
|
|
651
|
this.removeBackBuffer();
|
|
652
|
}
|
|
653
|
var backBuffer = this.backBuffer;
|
|
654
|
if(!backBuffer) {
|
|
655
|
backBuffer = this.createBackBuffer();
|
|
656
|
if(!backBuffer) {
|
|
657
|
return;
|
|
658
|
}
|
|
659
|
if (resolution === this.gridResolution) {
|
|
660
|
this.div.insertBefore(backBuffer, this.div.firstChild);
|
|
661
|
} else {
|
|
662
|
this.map.baseLayer.div.parentNode.insertBefore(backBuffer, this.map.baseLayer.div);
|
|
663
|
}
|
|
664
|
this.backBuffer = backBuffer;
|
|
665
|
|
|
666
|
// set some information in the instance for subsequent
|
|
667
|
// calls to applyBackBuffer where the same back buffer
|
|
668
|
// is reused
|
|
669
|
var topLeftTileBounds = this.grid[0][0].bounds;
|
|
670
|
this.backBufferLonLat = {
|
|
671
|
lon: topLeftTileBounds.left,
|
|
672
|
lat: topLeftTileBounds.top
|
|
673
|
};
|
|
674
|
this.backBufferResolution = this.gridResolution;
|
|
675
|
}
|
|
676
|
|
|
677
|
var ratio = this.backBufferResolution / resolution;
|
|
678
|
|
|
679
|
// scale the tiles inside the back buffer
|
|
680
|
var tiles = backBuffer.childNodes, tile;
|
|
681
|
for (var i=tiles.length-1; i>=0; --i) {
|
|
682
|
tile = tiles[i];
|
|
683
|
tile.style.top = ((ratio * tile._i * tile._h) | 0) + 'px';
|
|
684
|
tile.style.left = ((ratio * tile._j * tile._w) | 0) + 'px';
|
|
685
|
tile.style.width = Math.round(ratio * tile._w) + 'px';
|
|
686
|
tile.style.height = Math.round(ratio * tile._h) + 'px';
|
|
687
|
}
|
|
688
|
|
|
689
|
// and position it (based on the grid's top-left corner)
|
|
690
|
var position = this.getViewPortPxFromLonLat(
|
|
691
|
this.backBufferLonLat, resolution);
|
|
692
|
var leftOffset = this.map.layerContainerOriginPx.x;
|
|
693
|
var topOffset = this.map.layerContainerOriginPx.y;
|
|
694
|
backBuffer.style.left = Math.round(position.x - leftOffset) + 'px';
|
|
695
|
backBuffer.style.top = Math.round(position.y - topOffset) + 'px';
|
|
696
|
},
|
|
697
|
|
|
698
|
/**
|
|
699
|
* Method: createBackBuffer
|
|
700
|
* Create a back buffer.
|
|
701
|
*
|
|
702
|
* Returns:
|
|
703
|
* {DOMElement} The DOM element for the back buffer, undefined if the
|
|
704
|
* grid isn't initialized yet.
|
|
705
|
*/
|
|
706
|
createBackBuffer: function() {
|
|
707
|
var backBuffer;
|
|
708
|
if(this.grid.length > 0) {
|
|
709
|
backBuffer = document.createElement('div');
|
|
710
|
backBuffer.id = this.div.id + '_bb';
|
|
711
|
backBuffer.className = 'olBackBuffer';
|
|
712
|
backBuffer.style.position = 'absolute';
|
|
713
|
var map = this.map;
|
|
714
|
backBuffer.style.zIndex = this.transitionEffect === 'resize' ?
|
|
715
|
this.getZIndex() - 1 :
|
|
716
|
// 'map-resize':
|
|
717
|
map.Z_INDEX_BASE.BaseLayer -
|
|
718
|
(map.getNumLayers() - map.getLayerIndex(this));
|
|
719
|
for(var i=0, lenI=this.grid.length; i<lenI; i++) {
|
|
720
|
for(var j=0, lenJ=this.grid[i].length; j<lenJ; j++) {
|
|
721
|
var tile = this.grid[i][j],
|
|
722
|
markup = this.grid[i][j].createBackBuffer();
|
|
723
|
if (markup) {
|
|
724
|
markup._i = i;
|
|
725
|
markup._j = j;
|
|
726
|
markup._w = tile.size.w;
|
|
727
|
markup._h = tile.size.h;
|
|
728
|
markup.id = tile.id + '_bb';
|
|
729
|
backBuffer.appendChild(markup);
|
|
730
|
}
|
|
731
|
}
|
|
732
|
}
|
|
733
|
}
|
|
734
|
return backBuffer;
|
|
735
|
},
|
|
736
|
|
|
737
|
/**
|
|
738
|
* Method: removeBackBuffer
|
|
739
|
* Remove back buffer from DOM.
|
|
740
|
*/
|
|
741
|
removeBackBuffer: function() {
|
|
742
|
if (this._transitionElement) {
|
|
743
|
for (var i=this.transitionendEvents.length-1; i>=0; --i) {
|
|
744
|
OpenLayers.Event.stopObserving(this._transitionElement,
|
|
745
|
this.transitionendEvents[i], this._removeBackBuffer);
|
|
746
|
}
|
|
747
|
delete this._transitionElement;
|
|
748
|
}
|
|
749
|
if(this.backBuffer) {
|
|
750
|
if (this.backBuffer.parentNode) {
|
|
751
|
this.backBuffer.parentNode.removeChild(this.backBuffer);
|
|
752
|
}
|
|
753
|
this.backBuffer = null;
|
|
754
|
this.backBufferResolution = null;
|
|
755
|
if(this.backBufferTimerId !== null) {
|
|
756
|
window.clearTimeout(this.backBufferTimerId);
|
|
757
|
this.backBufferTimerId = null;
|
|
758
|
}
|
|
759
|
}
|
|
760
|
},
|
|
761
|
|
|
762
|
/**
|
|
763
|
* Method: moveByPx
|
|
764
|
* Move the layer based on pixel vector.
|
|
765
|
*
|
|
766
|
* Parameters:
|
|
767
|
* dx - {Number}
|
|
768
|
* dy - {Number}
|
|
769
|
*/
|
|
770
|
moveByPx: function(dx, dy) {
|
|
771
|
if (!this.singleTile) {
|
|
772
|
this.moveGriddedTiles();
|
|
773
|
}
|
|
774
|
},
|
|
775
|
|
|
776
|
/**
|
|
777
|
* APIMethod: setTileSize
|
|
778
|
* Check if we are in singleTile mode and if so, set the size as a ratio
|
|
779
|
* of the map size (as specified by the layer's 'ratio' property).
|
|
780
|
*
|
|
781
|
* Parameters:
|
|
782
|
* size - {<OpenLayers.Size>}
|
|
783
|
*/
|
|
784
|
setTileSize: function(size) {
|
|
785
|
if (this.singleTile) {
|
|
786
|
size = this.map.getSize();
|
|
787
|
size.h = parseInt(size.h * this.ratio, 10);
|
|
788
|
size.w = parseInt(size.w * this.ratio, 10);
|
|
789
|
}
|
|
790
|
OpenLayers.Layer.HTTPRequest.prototype.setTileSize.apply(this, [size]);
|
|
791
|
},
|
|
792
|
|
|
793
|
/**
|
|
794
|
* APIMethod: getTilesBounds
|
|
795
|
* Return the bounds of the tile grid.
|
|
796
|
*
|
|
797
|
* Returns:
|
|
798
|
* {<OpenLayers.Bounds>} A Bounds object representing the bounds of all the
|
|
799
|
* currently loaded tiles (including those partially or not at all seen
|
|
800
|
* onscreen).
|
|
801
|
*/
|
|
802
|
getTilesBounds: function() {
|
|
803
|
var bounds = null;
|
|
804
|
|
|
805
|
var length = this.grid.length;
|
|
806
|
if (length) {
|
|
807
|
var bottomLeftTileBounds = this.grid[length - 1][0].bounds,
|
|
808
|
width = this.grid[0].length * bottomLeftTileBounds.getWidth(),
|
|
809
|
height = this.grid.length * bottomLeftTileBounds.getHeight();
|
|
810
|
|
|
811
|
bounds = new OpenLayers.Bounds(bottomLeftTileBounds.left,
|
|
812
|
bottomLeftTileBounds.bottom,
|
|
813
|
bottomLeftTileBounds.left + width,
|
|
814
|
bottomLeftTileBounds.bottom + height);
|
|
815
|
}
|
|
816
|
return bounds;
|
|
817
|
},
|
|
818
|
|
|
819
|
/**
|
|
820
|
* Method: initSingleTile
|
|
821
|
*
|
|
822
|
* Parameters:
|
|
823
|
* bounds - {<OpenLayers.Bounds>}
|
|
824
|
*/
|
|
825
|
initSingleTile: function(bounds) {
|
|
826
|
this.events.triggerEvent("retile");
|
|
827
|
|
|
828
|
//determine new tile bounds
|
|
829
|
var center = bounds.getCenterLonLat();
|
|
830
|
var tileWidth = bounds.getWidth() * this.ratio;
|
|
831
|
var tileHeight = bounds.getHeight() * this.ratio;
|
|
832
|
|
|
833
|
var tileBounds =
|
|
834
|
new OpenLayers.Bounds(center.lon - (tileWidth/2),
|
|
835
|
center.lat - (tileHeight/2),
|
|
836
|
center.lon + (tileWidth/2),
|
|
837
|
center.lat + (tileHeight/2));
|
|
838
|
|
|
839
|
var px = this.map.getLayerPxFromLonLat({
|
|
840
|
lon: tileBounds.left,
|
|
841
|
lat: tileBounds.top
|
|
842
|
});
|
|
843
|
|
|
844
|
if (!this.grid.length) {
|
|
845
|
this.grid[0] = [];
|
|
846
|
}
|
|
847
|
|
|
848
|
var tile = this.grid[0][0];
|
|
849
|
if (!tile) {
|
|
850
|
tile = this.addTile(tileBounds, px);
|
|
851
|
|
|
852
|
this.addTileMonitoringHooks(tile);
|
|
853
|
tile.draw();
|
|
854
|
this.grid[0][0] = tile;
|
|
855
|
} else {
|
|
856
|
tile.moveTo(tileBounds, px);
|
|
857
|
}
|
|
858
|
|
|
859
|
//remove all but our single tile
|
|
860
|
this.removeExcessTiles(1,1);
|
|
861
|
|
|
862
|
// store the resolution of the grid
|
|
863
|
this.gridResolution = this.getServerResolution();
|
|
864
|
},
|
|
865
|
|
|
866
|
/**
|
|
867
|
* Method: calculateGridLayout
|
|
868
|
* Generate parameters for the grid layout.
|
|
869
|
*
|
|
870
|
* Parameters:
|
|
871
|
* bounds - {<OpenLayers.Bound>|Object} OpenLayers.Bounds or an
|
|
872
|
* object with a 'left' and 'top' properties.
|
|
873
|
* origin - {<OpenLayers.LonLat>|Object} OpenLayers.LonLat or an
|
|
874
|
* object with a 'lon' and 'lat' properties.
|
|
875
|
* resolution - {Number}
|
|
876
|
*
|
|
877
|
* Returns:
|
|
878
|
* {Object} Object containing properties tilelon, tilelat, startcol,
|
|
879
|
* startrow
|
|
880
|
*/
|
|
881
|
calculateGridLayout: function(bounds, origin, resolution) {
|
|
882
|
var tilelon = resolution * this.tileSize.w;
|
|
883
|
var tilelat = resolution * this.tileSize.h;
|
|
884
|
|
|
885
|
var offsetlon = bounds.left - origin.lon;
|
|
886
|
var tilecol = Math.floor(offsetlon/tilelon) - this.buffer;
|
|
887
|
|
|
888
|
var rowSign = this.rowSign;
|
|
889
|
|
|
890
|
var offsetlat = rowSign * (origin.lat - bounds.top + tilelat);
|
|
891
|
var tilerow = Math[~rowSign ? 'floor' : 'ceil'](offsetlat/tilelat) - this.buffer * rowSign;
|
|
892
|
|
|
893
|
return {
|
|
894
|
tilelon: tilelon, tilelat: tilelat,
|
|
895
|
startcol: tilecol, startrow: tilerow
|
|
896
|
};
|
|
897
|
|
|
898
|
},
|
|
899
|
|
|
900
|
/**
|
|
901
|
* Method: getTileOrigin
|
|
902
|
* Determine the origin for aligning the grid of tiles. If a <tileOrigin>
|
|
903
|
* property is supplied, that will be returned. Otherwise, the origin
|
|
904
|
* will be derived from the layer's <maxExtent> property. In this case,
|
|
905
|
* the tile origin will be the corner of the <maxExtent> given by the
|
|
906
|
* <tileOriginCorner> property.
|
|
907
|
*
|
|
908
|
* Returns:
|
|
909
|
* {<OpenLayers.LonLat>} The tile origin.
|
|
910
|
*/
|
|
911
|
getTileOrigin: function() {
|
|
912
|
var origin = this.tileOrigin;
|
|
913
|
if (!origin) {
|
|
914
|
var extent = this.getMaxExtent();
|
|
915
|
var edges = ({
|
|
916
|
"tl": ["left", "top"],
|
|
917
|
"tr": ["right", "top"],
|
|
918
|
"bl": ["left", "bottom"],
|
|
919
|
"br": ["right", "bottom"]
|
|
920
|
})[this.tileOriginCorner];
|
|
921
|
origin = new OpenLayers.LonLat(extent[edges[0]], extent[edges[1]]);
|
|
922
|
}
|
|
923
|
return origin;
|
|
924
|
},
|
|
925
|
|
|
926
|
/**
|
|
927
|
* Method: getTileBoundsForGridIndex
|
|
928
|
*
|
|
929
|
* Parameters:
|
|
930
|
* row - {Number} The row of the grid
|
|
931
|
* col - {Number} The column of the grid
|
|
932
|
*
|
|
933
|
* Returns:
|
|
934
|
* {<OpenLayers.Bounds>} The bounds for the tile at (row, col)
|
|
935
|
*/
|
|
936
|
getTileBoundsForGridIndex: function(row, col) {
|
|
937
|
var origin = this.getTileOrigin();
|
|
938
|
var tileLayout = this.gridLayout;
|
|
939
|
var tilelon = tileLayout.tilelon;
|
|
940
|
var tilelat = tileLayout.tilelat;
|
|
941
|
var startcol = tileLayout.startcol;
|
|
942
|
var startrow = tileLayout.startrow;
|
|
943
|
var rowSign = this.rowSign;
|
|
944
|
return new OpenLayers.Bounds(
|
|
945
|
origin.lon + (startcol + col) * tilelon,
|
|
946
|
origin.lat - (startrow + row * rowSign) * tilelat * rowSign,
|
|
947
|
origin.lon + (startcol + col + 1) * tilelon,
|
|
948
|
origin.lat - (startrow + (row - 1) * rowSign) * tilelat * rowSign
|
|
949
|
);
|
|
950
|
},
|
|
951
|
|
|
952
|
/**
|
|
953
|
* Method: initGriddedTiles
|
|
954
|
*
|
|
955
|
* Parameters:
|
|
956
|
* bounds - {<OpenLayers.Bounds>}
|
|
957
|
*/
|
|
958
|
initGriddedTiles:function(bounds) {
|
|
959
|
this.events.triggerEvent("retile");
|
|
960
|
|
|
961
|
// work out mininum number of rows and columns; this is the number of
|
|
962
|
// tiles required to cover the viewport plus at least one for panning
|
|
963
|
|
|
964
|
var viewSize = this.map.getSize();
|
|
965
|
|
|
966
|
var origin = this.getTileOrigin();
|
|
967
|
var resolution = this.map.getResolution(),
|
|
968
|
serverResolution = this.getServerResolution(),
|
|
969
|
ratio = resolution / serverResolution,
|
|
970
|
tileSize = {
|
|
971
|
w: this.tileSize.w / ratio,
|
|
972
|
h: this.tileSize.h / ratio
|
|
973
|
};
|
|
974
|
|
|
975
|
var minRows = Math.ceil(viewSize.h/tileSize.h) +
|
|
976
|
2 * this.buffer + 1;
|
|
977
|
var minCols = Math.ceil(viewSize.w/tileSize.w) +
|
|
978
|
2 * this.buffer + 1;
|
|
979
|
|
|
980
|
var tileLayout = this.calculateGridLayout(bounds, origin, serverResolution);
|
|
981
|
this.gridLayout = tileLayout;
|
|
982
|
|
|
983
|
var tilelon = tileLayout.tilelon;
|
|
984
|
var tilelat = tileLayout.tilelat;
|
|
985
|
|
|
986
|
var layerContainerDivLeft = this.map.layerContainerOriginPx.x;
|
|
987
|
var layerContainerDivTop = this.map.layerContainerOriginPx.y;
|
|
988
|
|
|
989
|
var tileBounds = this.getTileBoundsForGridIndex(0, 0);
|
|
990
|
var startPx = this.map.getViewPortPxFromLonLat(
|
|
991
|
new OpenLayers.LonLat(tileBounds.left, tileBounds.top)
|
|
992
|
);
|
|
993
|
startPx.x = Math.round(startPx.x) - layerContainerDivLeft;
|
|
994
|
startPx.y = Math.round(startPx.y) - layerContainerDivTop;
|
|
995
|
|
|
996
|
var tileData = [], center = this.map.getCenter();
|
|
997
|
|
|
998
|
var rowidx = 0;
|
|
999
|
do {
|
|
1000
|
var row = this.grid[rowidx];
|
|
1001
|
if (!row) {
|
|
1002
|
row = [];
|
|
1003
|
this.grid.push(row);
|
|
1004
|
}
|
|
1005
|
|
|
1006
|
var colidx = 0;
|
|
1007
|
do {
|
|
1008
|
tileBounds = this.getTileBoundsForGridIndex(rowidx, colidx);
|
|
1009
|
var px = startPx.clone();
|
|
1010
|
px.x = px.x + colidx * Math.round(tileSize.w);
|
|
1011
|
px.y = px.y + rowidx * Math.round(tileSize.h);
|
|
1012
|
var tile = row[colidx];
|
|
1013
|
if (!tile) {
|
|
1014
|
tile = this.addTile(tileBounds, px);
|
|
1015
|
this.addTileMonitoringHooks(tile);
|
|
1016
|
row.push(tile);
|
|
1017
|
} else {
|
|
1018
|
tile.moveTo(tileBounds, px, false);
|
|
1019
|
}
|
|
1020
|
var tileCenter = tileBounds.getCenterLonLat();
|
|
1021
|
tileData.push({
|
|
1022
|
tile: tile,
|
|
1023
|
distance: Math.pow(tileCenter.lon - center.lon, 2) +
|
|
1024
|
Math.pow(tileCenter.lat - center.lat, 2)
|
|
1025
|
});
|
|
1026
|
|
|
1027
|
colidx += 1;
|
|
1028
|
} while ((tileBounds.right <= bounds.right + tilelon * this.buffer)
|
|
1029
|
|| colidx < minCols);
|
|
1030
|
|
|
1031
|
rowidx += 1;
|
|
1032
|
} while((tileBounds.bottom >= bounds.bottom - tilelat * this.buffer)
|
|
1033
|
|| rowidx < minRows);
|
|
1034
|
|
|
1035
|
//shave off exceess rows and colums
|
|
1036
|
this.removeExcessTiles(rowidx, colidx);
|
|
1037
|
|
|
1038
|
var resolution = this.getServerResolution();
|
|
1039
|
// store the resolution of the grid
|
|
1040
|
this.gridResolution = resolution;
|
|
1041
|
|
|
1042
|
//now actually draw the tiles
|
|
1043
|
tileData.sort(function(a, b) {
|
|
1044
|
return a.distance - b.distance;
|
|
1045
|
});
|
|
1046
|
for (var i=0, ii=tileData.length; i<ii; ++i) {
|
|
1047
|
tileData[i].tile.draw();
|
|
1048
|
}
|
|
1049
|
},
|
|
1050
|
|
|
1051
|
/**
|
|
1052
|
* Method: getMaxExtent
|
|
1053
|
* Get this layer's maximum extent. (Implemented as a getter for
|
|
1054
|
* potential specific implementations in sub-classes.)
|
|
1055
|
*
|
|
1056
|
* Returns:
|
|
1057
|
* {<OpenLayers.Bounds>}
|
|
1058
|
*/
|
|
1059
|
getMaxExtent: function() {
|
|
1060
|
return this.maxExtent;
|
|
1061
|
},
|
|
1062
|
|
|
1063
|
/**
|
|
1064
|
* APIMethod: addTile
|
|
1065
|
* Create a tile, initialize it, and add it to the layer div.
|
|
1066
|
*
|
|
1067
|
* Parameters
|
|
1068
|
* bounds - {<OpenLayers.Bounds>}
|
|
1069
|
* position - {<OpenLayers.Pixel>}
|
|
1070
|
*
|
|
1071
|
* Returns:
|
|
1072
|
* {<OpenLayers.Tile>} The added OpenLayers.Tile
|
|
1073
|
*/
|
|
1074
|
addTile: function(bounds, position) {
|
|
1075
|
var tile = new this.tileClass(
|
|
1076
|
this, position, bounds, null, this.tileSize, this.tileOptions
|
|
1077
|
);
|
|
1078
|
this.events.triggerEvent("addtile", {tile: tile});
|
|
1079
|
return tile;
|
|
1080
|
},
|
|
1081
|
|
|
1082
|
/**
|
|
1083
|
* Method: addTileMonitoringHooks
|
|
1084
|
* This function takes a tile as input and adds the appropriate hooks to
|
|
1085
|
* the tile so that the layer can keep track of the loading tiles.
|
|
1086
|
*
|
|
1087
|
* Parameters:
|
|
1088
|
* tile - {<OpenLayers.Tile>}
|
|
1089
|
*/
|
|
1090
|
addTileMonitoringHooks: function(tile) {
|
|
1091
|
|
|
1092
|
var replacingCls = 'olTileReplacing';
|
|
1093
|
|
|
1094
|
tile.onLoadStart = function() {
|
|
1095
|
//if that was first tile then trigger a 'loadstart' on the layer
|
|
1096
|
if (this.loading === false) {
|
|
1097
|
this.loading = true;
|
|
1098
|
this.events.triggerEvent("loadstart");
|
|
1099
|
}
|
|
1100
|
this.events.triggerEvent("tileloadstart", {tile: tile});
|
|
1101
|
this.numLoadingTiles++;
|
|
1102
|
if (!this.singleTile && this.backBuffer && this.gridResolution === this.backBufferResolution) {
|
|
1103
|
OpenLayers.Element.addClass(tile.getTile(), replacingCls);
|
|
1104
|
}
|
|
1105
|
};
|
|
1106
|
|
|
1107
|
tile.onLoadEnd = function(evt) {
|
|
1108
|
this.numLoadingTiles--;
|
|
1109
|
var aborted = evt.type === 'unload';
|
|
1110
|
this.events.triggerEvent("tileloaded", {
|
|
1111
|
tile: tile,
|
|
1112
|
aborted: aborted
|
|
1113
|
});
|
|
1114
|
if (!this.singleTile && !aborted && this.backBuffer && this.gridResolution === this.backBufferResolution) {
|
|
1115
|
var tileDiv = tile.getTile();
|
|
1116
|
if (OpenLayers.Element.getStyle(tileDiv, 'display') === 'none') {
|
|
1117
|
var bufferTile = document.getElementById(tile.id + '_bb');
|
|
1118
|
if (bufferTile) {
|
|
1119
|
bufferTile.parentNode.removeChild(bufferTile);
|
|
1120
|
}
|
|
1121
|
}
|
|
1122
|
OpenLayers.Element.removeClass(tileDiv, replacingCls);
|
|
1123
|
}
|
|
1124
|
//if that was the last tile, then trigger a 'loadend' on the layer
|
|
1125
|
if (this.numLoadingTiles === 0) {
|
|
1126
|
if (this.backBuffer) {
|
|
1127
|
if (this.backBuffer.childNodes.length === 0) {
|
|
1128
|
// no tiles transitioning, remove immediately
|
|
1129
|
this.removeBackBuffer();
|
|
1130
|
} else {
|
|
1131
|
// wait until transition has ended or delay has passed
|
|
1132
|
this._transitionElement = aborted ?
|
|
1133
|
this.div.lastChild : tile.imgDiv;
|
|
1134
|
var transitionendEvents = this.transitionendEvents;
|
|
1135
|
for (var i=transitionendEvents.length-1; i>=0; --i) {
|
|
1136
|
OpenLayers.Event.observe(this._transitionElement,
|
|
1137
|
transitionendEvents[i],
|
|
1138
|
this._removeBackBuffer);
|
|
1139
|
}
|
|
1140
|
// the removal of the back buffer is delayed to prevent
|
|
1141
|
// flash effects due to the animation of tile displaying
|
|
1142
|
this.backBufferTimerId = window.setTimeout(
|
|
1143
|
this._removeBackBuffer, this.removeBackBufferDelay
|
|
1144
|
);
|
|
1145
|
}
|
|
1146
|
}
|
|
1147
|
this.loading = false;
|
|
1148
|
this.events.triggerEvent("loadend");
|
|
1149
|
}
|
|
1150
|
};
|
|
1151
|
|
|
1152
|
tile.onLoadError = function() {
|
|
1153
|
this.events.triggerEvent("tileerror", {tile: tile});
|
|
1154
|
};
|
|
1155
|
|
|
1156
|
tile.events.on({
|
|
1157
|
"loadstart": tile.onLoadStart,
|
|
1158
|
"loadend": tile.onLoadEnd,
|
|
1159
|
"unload": tile.onLoadEnd,
|
|
1160
|
"loaderror": tile.onLoadError,
|
|
1161
|
scope: this
|
|
1162
|
});
|
|
1163
|
},
|
|
1164
|
|
|
1165
|
/**
|
|
1166
|
* Method: removeTileMonitoringHooks
|
|
1167
|
* This function takes a tile as input and removes the tile hooks
|
|
1168
|
* that were added in addTileMonitoringHooks()
|
|
1169
|
*
|
|
1170
|
* Parameters:
|
|
1171
|
* tile - {<OpenLayers.Tile>}
|
|
1172
|
*/
|
|
1173
|
removeTileMonitoringHooks: function(tile) {
|
|
1174
|
tile.unload();
|
|
1175
|
tile.events.un({
|
|
1176
|
"loadstart": tile.onLoadStart,
|
|
1177
|
"loadend": tile.onLoadEnd,
|
|
1178
|
"unload": tile.onLoadEnd,
|
|
1179
|
"loaderror": tile.onLoadError,
|
|
1180
|
scope: this
|
|
1181
|
});
|
|
1182
|
},
|
|
1183
|
|
|
1184
|
/**
|
|
1185
|
* Method: moveGriddedTiles
|
|
1186
|
*/
|
|
1187
|
moveGriddedTiles: function() {
|
|
1188
|
var buffer = this.buffer + 1;
|
|
1189
|
while(true) {
|
|
1190
|
var tlTile = this.grid[0][0];
|
|
1191
|
var tlViewPort = {
|
|
1192
|
x: tlTile.position.x +
|
|
1193
|
this.map.layerContainerOriginPx.x,
|
|
1194
|
y: tlTile.position.y +
|
|
1195
|
this.map.layerContainerOriginPx.y
|
|
1196
|
};
|
|
1197
|
var ratio = this.getServerResolution() / this.map.getResolution();
|
|
1198
|
var tileSize = {
|
|
1199
|
w: Math.round(this.tileSize.w * ratio),
|
|
1200
|
h: Math.round(this.tileSize.h * ratio)
|
|
1201
|
};
|
|
1202
|
if (tlViewPort.x > -tileSize.w * (buffer - 1)) {
|
|
1203
|
this.shiftColumn(true, tileSize);
|
|
1204
|
} else if (tlViewPort.x < -tileSize.w * buffer) {
|
|
1205
|
this.shiftColumn(false, tileSize);
|
|
1206
|
} else if (tlViewPort.y > -tileSize.h * (buffer - 1)) {
|
|
1207
|
this.shiftRow(true, tileSize);
|
|
1208
|
} else if (tlViewPort.y < -tileSize.h * buffer) {
|
|
1209
|
this.shiftRow(false, tileSize);
|
|
1210
|
} else {
|
|
1211
|
break;
|
|
1212
|
}
|
|
1213
|
}
|
|
1214
|
},
|
|
1215
|
|
|
1216
|
/**
|
|
1217
|
* Method: shiftRow
|
|
1218
|
* Shifty grid work
|
|
1219
|
*
|
|
1220
|
* Parameters:
|
|
1221
|
* prepend - {Boolean} if true, prepend to beginning.
|
|
1222
|
* if false, then append to end
|
|
1223
|
* tileSize - {Object} rendered tile size; object with w and h properties
|
|
1224
|
*/
|
|
1225
|
shiftRow: function(prepend, tileSize) {
|
|
1226
|
var grid = this.grid;
|
|
1227
|
var rowIndex = prepend ? 0 : (grid.length - 1);
|
|
1228
|
var sign = prepend ? -1 : 1;
|
|
1229
|
var rowSign = this.rowSign;
|
|
1230
|
var tileLayout = this.gridLayout;
|
|
1231
|
tileLayout.startrow += sign * rowSign;
|
|
1232
|
|
|
1233
|
var modelRow = grid[rowIndex];
|
|
1234
|
var row = grid[prepend ? 'pop' : 'shift']();
|
|
1235
|
for (var i=0, len=row.length; i<len; i++) {
|
|
1236
|
var tile = row[i];
|
|
1237
|
var position = modelRow[i].position.clone();
|
|
1238
|
position.y += tileSize.h * sign;
|
|
1239
|
tile.moveTo(this.getTileBoundsForGridIndex(rowIndex, i), position);
|
|
1240
|
}
|
|
1241
|
grid[prepend ? 'unshift' : 'push'](row);
|
|
1242
|
},
|
|
1243
|
|
|
1244
|
/**
|
|
1245
|
* Method: shiftColumn
|
|
1246
|
* Shift grid work in the other dimension
|
|
1247
|
*
|
|
1248
|
* Parameters:
|
|
1249
|
* prepend - {Boolean} if true, prepend to beginning.
|
|
1250
|
* if false, then append to end
|
|
1251
|
* tileSize - {Object} rendered tile size; object with w and h properties
|
|
1252
|
*/
|
|
1253
|
shiftColumn: function(prepend, tileSize) {
|
|
1254
|
var grid = this.grid;
|
|
1255
|
var colIndex = prepend ? 0 : (grid[0].length - 1);
|
|
1256
|
var sign = prepend ? -1 : 1;
|
|
1257
|
var tileLayout = this.gridLayout;
|
|
1258
|
tileLayout.startcol += sign;
|
|
1259
|
|
|
1260
|
for (var i=0, len=grid.length; i<len; i++) {
|
|
1261
|
var row = grid[i];
|
|
1262
|
var position = row[colIndex].position.clone();
|
|
1263
|
var tile = row[prepend ? 'pop' : 'shift']();
|
|
1264
|
position.x += tileSize.w * sign;
|
|
1265
|
tile.moveTo(this.getTileBoundsForGridIndex(i, colIndex), position);
|
|
1266
|
row[prepend ? 'unshift' : 'push'](tile);
|
|
1267
|
}
|
|
1268
|
},
|
|
1269
|
|
|
1270
|
/**
|
|
1271
|
* Method: removeExcessTiles
|
|
1272
|
* When the size of the map or the buffer changes, we may need to
|
|
1273
|
* remove some excess rows and columns.
|
|
1274
|
*
|
|
1275
|
* Parameters:
|
|
1276
|
* rows - {Integer} Maximum number of rows we want our grid to have.
|
|
1277
|
* columns - {Integer} Maximum number of columns we want our grid to have.
|
|
1278
|
*/
|
|
1279
|
removeExcessTiles: function(rows, columns) {
|
|
1280
|
var i, l;
|
|
1281
|
|
|
1282
|
// remove extra rows
|
|
1283
|
while (this.grid.length > rows) {
|
|
1284
|
var row = this.grid.pop();
|
|
1285
|
for (i=0, l=row.length; i<l; i++) {
|
|
1286
|
var tile = row[i];
|
|
1287
|
this.destroyTile(tile);
|
|
1288
|
}
|
|
1289
|
}
|
|
1290
|
|
|
1291
|
// remove extra columns
|
|
1292
|
for (i=0, l=this.grid.length; i<l; i++) {
|
|
1293
|
while (this.grid[i].length > columns) {
|
|
1294
|
var row = this.grid[i];
|
|
1295
|
var tile = row.pop();
|
|
1296
|
this.destroyTile(tile);
|
|
1297
|
}
|
|
1298
|
}
|
|
1299
|
},
|
|
1300
|
|
|
1301
|
/**
|
|
1302
|
* Method: onMapResize
|
|
1303
|
* For singleTile layers, this will set a new tile size according to the
|
|
1304
|
* dimensions of the map pane.
|
|
1305
|
*/
|
|
1306
|
onMapResize: function() {
|
|
1307
|
if (this.singleTile) {
|
|
1308
|
this.clearGrid();
|
|
1309
|
this.setTileSize();
|
|
1310
|
}
|
|
1311
|
},
|
|
1312
|
|
|
1313
|
/**
|
|
1314
|
* APIMethod: getTileBounds
|
|
1315
|
* Returns The tile bounds for a layer given a pixel location.
|
|
1316
|
*
|
|
1317
|
* Parameters:
|
|
1318
|
* viewPortPx - {<OpenLayers.Pixel>} The location in the viewport.
|
|
1319
|
*
|
|
1320
|
* Returns:
|
|
1321
|
* {<OpenLayers.Bounds>} Bounds of the tile at the given pixel location.
|
|
1322
|
*/
|
|
1323
|
getTileBounds: function(viewPortPx) {
|
|
1324
|
var maxExtent = this.maxExtent;
|
|
1325
|
var resolution = this.getResolution();
|
|
1326
|
var tileMapWidth = resolution * this.tileSize.w;
|
|
1327
|
var tileMapHeight = resolution * this.tileSize.h;
|
|
1328
|
var mapPoint = this.getLonLatFromViewPortPx(viewPortPx);
|
|
1329
|
var tileLeft = maxExtent.left + (tileMapWidth *
|
|
1330
|
Math.floor((mapPoint.lon -
|
|
1331
|
maxExtent.left) /
|
|
1332
|
tileMapWidth));
|
|
1333
|
var tileBottom = maxExtent.bottom + (tileMapHeight *
|
|
1334
|
Math.floor((mapPoint.lat -
|
|
1335
|
maxExtent.bottom) /
|
|
1336
|
tileMapHeight));
|
|
1337
|
return new OpenLayers.Bounds(tileLeft, tileBottom,
|
|
1338
|
tileLeft + tileMapWidth,
|
|
1339
|
tileBottom + tileMapHeight);
|
|
1340
|
},
|
|
1341
|
|
|
1342
|
CLASS_NAME: "OpenLayers.Layer.Grid"
|
|
1343
|
});
|