Revision 1f696d8b
Added by Andreas Kohlbecker almost 8 years ago
modules/cdm_dataportal/js/map/openlayers_map.js | ||
---|---|---|
136 | 136 |
var baseLayers = []; |
137 | 137 |
var defaultBaseLayer = null; |
138 | 138 |
|
139 |
var zoomToBounds = null; |
|
140 |
var zoomToClosestLevel = true; |
|
141 |
|
|
142 |
var LAYER_DATA_CNT = 0; |
|
143 |
|
|
139 | 144 |
/* this is usually the <div id="openlayers"> element */ |
140 | 145 |
var mapContainerElement = mapElement.parent(); |
141 | 146 |
|
... | ... | |
176 | 181 |
adjustLegendAsElementPosition(); |
177 | 182 |
}); |
178 | 183 |
|
179 |
|
|
180 |
|
|
181 |
createLayers(opts.baseLayerNames, opts.defaultBaseLayerName, opts.customWMSBaseLayerData); |
|
184 |
createBaseLayers(opts.baseLayerNames, opts.defaultBaseLayerName, opts.customWMSBaseLayerData); |
|
182 | 185 |
|
183 | 186 |
initMap(); |
184 | 187 |
|
... | ... | |
200 | 203 |
|
201 | 204 |
mapServiceRequest = mapserverBaseUrl + mapServicePath + '/' + mapserverVersion + '/rest_gen.php?' + distributionQuery; |
202 | 205 |
|
206 |
LAYER_DATA_CNT++; |
|
203 | 207 |
jQuery.ajax({ |
204 | 208 |
url: mapServiceRequest, |
205 | 209 |
dataType: "jsonp", |
206 | 210 |
success: function(data){ |
207 |
addDataLayer(data, "AREA"); |
|
211 |
var layers = createDataLayer(data, "AREA"); |
|
212 |
addLayers(layers); |
|
213 |
layerDataLoaded(); |
|
208 | 214 |
} |
209 | 215 |
}); |
210 | 216 |
} |
... | ... | |
226 | 232 |
|
227 | 233 |
mapServiceRequest = mapserverBaseUrl + mapServicePath + '/' + mapserverVersion + '/rest_gen.php?' + occurrenceQuery; |
228 | 234 |
|
235 |
LAYER_DATA_CNT++; |
|
229 | 236 |
jQuery.ajax({ |
230 | 237 |
url: mapServiceRequest, |
231 | 238 |
dataType: "jsonp", |
232 | 239 |
success: function(data){ |
233 |
addDataLayer(data, "POINT"); |
|
240 |
var layers = createDataLayer(data, "POINT"); |
|
241 |
addLayers(layers); |
|
242 |
layerDataLoaded(); |
|
234 | 243 |
} |
235 | 244 |
}); |
236 | 245 |
} |
246 |
|
|
247 |
}; |
|
248 |
|
|
249 |
var layerDataLoaded = function() { |
|
250 |
LAYER_DATA_CNT--; |
|
251 |
if(LAYER_DATA_CNT == 0){ |
|
252 |
initPostDataLoaded(); |
|
253 |
} |
|
254 |
}; |
|
255 |
|
|
256 |
var initPostDataLoaded = function () { |
|
257 |
// all layers prepared, make the visible |
|
258 |
map.layers.forEach(function(layer){ |
|
259 |
|
|
260 |
// hack for cuba |
|
261 |
if(layer.name == "flora_cuba_2016_regions"){ |
|
262 |
map.setLayerZIndex(layer, 5); |
|
263 |
} |
|
264 |
if(layer.name == "flora_cuba_2016_provinces"){ |
|
265 |
map.setLayerZIndex(layer, 6); |
|
266 |
} |
|
267 |
if(layer.name == "flora_cuba_2016_world"){ |
|
268 |
map.setLayerZIndex(layer, 4); |
|
269 |
} |
|
270 |
|
|
271 |
layer.setVisibility(true); |
|
272 |
}); |
|
273 |
|
|
274 |
// zoom to the zoomToBounds |
|
275 |
log(" > starting zoomToExtend " + zoomToBounds, true); |
|
276 |
map.zoomToExtent(zoomToBounds, zoomToClosestLevel); |
|
277 |
|
|
278 |
if(map.getZoom() > opts.maxZoom){ |
|
279 |
map.zoomTo(opts.maxZoom); |
|
280 |
} else if(map.getZoom() < opts.minZoom){ |
|
281 |
map.zoomTo(opts.minZoom); |
|
282 |
} |
|
283 |
|
|
284 |
log(" > zoomToExtend done", true); |
|
237 | 285 |
}; |
238 | 286 |
|
239 | 287 |
var getHeight = function(){ |
... | ... | |
362 | 410 |
); |
363 | 411 |
|
364 | 412 |
//add the base layers |
365 |
map.addLayers(baseLayers); |
|
413 |
|
|
414 |
addLayers(baseLayers); |
|
366 | 415 |
map.setBaseLayer(defaultBaseLayer); |
367 | 416 |
|
368 | 417 |
// calculate the bounds to zoom to |
369 | 418 |
zoomToBounds = zoomToBoundsFor(opts.boundingBox, defaultBaseLayer); |
370 | 419 |
zoomToBounds = cropBoundsToAspectRatio(zoomToBounds, map.getSize().w / map.getSize().h); |
371 |
console.log("zoomToBounds: " + zoomToBounds); |
|
420 |
console.log("baselayer zoomToBounds: " + zoomToBounds);
|
|
372 | 421 |
|
373 |
// zoom to the extent of the bbox |
|
374 |
map.zoomToExtent(zoomToBounds, true); |
|
422 |
}; |
|
375 | 423 |
|
376 |
// readjust if the zoom level is out side of the min max |
|
377 |
// if(map.getZoom() > opts.maxZoom){ |
|
378 |
// map.zoomTo(opts.maxZoom); |
|
379 |
// } else if(map.getZoom() < opts.minZoom){ |
|
380 |
// map.zoomTo(opts.minZoom); |
|
381 |
// } |
|
424 |
var addLayers = function(layers){ |
|
382 | 425 |
|
426 |
layers.forEach(function(layer){ |
|
427 |
// layer.setVisibility(false); |
|
428 |
}); |
|
383 | 429 |
|
430 |
map.addLayers(layers); |
|
384 | 431 |
}; |
385 | 432 |
|
386 | 433 |
/** |
... | ... | |
391 | 438 |
* @param dataType |
392 | 439 |
* either "AREA" or "POINT" |
393 | 440 |
*/ |
394 |
var addDataLayer = function(mapResponseObj, dataType){
|
|
441 |
var createDataLayer = function(mapResponseObj, dataType){
|
|
395 | 442 |
|
396 | 443 |
console.log("creating data layer of type " + dataType); |
397 | 444 |
|
... | ... | |
402 | 449 |
displayOutsideMaxExtent: true |
403 | 450 |
}; |
404 | 451 |
|
405 |
var layer; |
|
452 |
var layers = [];
|
|
406 | 453 |
// add additional layers, get them from the mapResponseObj |
407 | 454 |
if(mapResponseObj !== undefined){ |
408 | 455 |
if(dataType == "POINT" && mapResponseObj.points_sld !== undefined){ |
409 |
|
|
410 |
// it is a response for an point map |
|
411 |
var geoserverUri; |
|
412 |
if(mapResponseObj.geoserver) { |
|
413 |
geoserverUri = mapResponseObj.geoserver; |
|
414 |
} else { |
|
415 |
// it is an old servive which is not providing the corresponding geoserver URI, so we guess it |
|
416 |
geoserverUri = mapserverBaseUrl + "/geoserver/wms"; |
|
417 |
} |
|
418 |
|
|
419 |
//TODO points_sld should be renamed to sld in response + fill path to sld should be given |
|
420 |
layer = new OpenLayers.Layer.WMS( |
|
421 |
'points', |
|
422 |
geoserverUri, |
|
423 |
{ |
|
424 |
layers: 'topp:rest_points', |
|
425 |
transparent:"true", |
|
426 |
format:"image/png" |
|
427 |
}, |
|
428 |
dataLayerOptions |
|
429 |
); |
|
430 |
|
|
431 |
var sld = mapResponseObj.points_sld; |
|
432 |
if(sld.indexOf("http://") !== 0){ |
|
433 |
// it is an old servive which is not providing the full sdl URI, so we guess it |
|
434 |
// http://edit.africamuseum.be/synthesys/www/v1/sld/ |
|
435 |
// http://edit.br.fgov.be/synthesys/www/v1/sld/ |
|
436 |
sld = mapserverBaseUrl + "/synthesys/www/v1/sld/" + sld; |
|
437 |
|
|
438 |
} |
|
439 |
|
|
440 |
layer.params.SLD = sld; |
|
441 |
map.addLayers([layer]); |
|
442 |
|
|
456 |
var pointLayer; |
|
457 |
// it is a response for an point map |
|
458 |
var geoserverUri; |
|
459 |
if(mapResponseObj.geoserver) { |
|
460 |
geoserverUri = mapResponseObj.geoserver; |
|
461 |
} else { |
|
462 |
// it is an old service which is not providing the corresponding geoserver URI, so we guess it |
|
463 |
geoserverUri = mapserverBaseUrl + "/geoserver/wms"; |
|
464 |
} |
|
465 |
|
|
466 |
//TODO points_sld should be renamed to sld in response + fill path to sld should be given |
|
467 |
pointLayer = new OpenLayers.Layer.WMS( |
|
468 |
'points', |
|
469 |
geoserverUri, |
|
470 |
{ |
|
471 |
layers: 'topp:rest_points', |
|
472 |
transparent:"true", |
|
473 |
format:"image/png" |
|
474 |
}, |
|
475 |
dataLayerOptions |
|
476 |
); |
|
477 |
|
|
478 |
var sld = mapResponseObj.points_sld; |
|
479 |
if(sld.indexOf("http://") !== 0){ |
|
480 |
// it is an old servive which is not providing the full sdl URI, so we guess it |
|
481 |
// http://edit.africamuseum.be/synthesys/www/v1/sld/ |
|
482 |
// http://edit.br.fgov.be/synthesys/www/v1/sld/ |
|
483 |
sld = mapserverBaseUrl + "/synthesys/www/v1/sld/" + sld; |
|
484 |
} |
|
485 |
pointLayer.params.SLD = sld; |
|
486 |
|
|
487 |
layers.push(pointLayer); |
|
443 | 488 |
} else { |
444 | 489 |
// it is a response from for a distribution map |
445 | 490 |
console.log("start with adding distribution layers :"); |
... | ... | |
447 | 492 |
var layerData = mapResponseObj.layers[i]; |
448 | 493 |
|
449 | 494 |
console.log(" " + i +" -> " + layerData.tdwg); |
450 |
layer = new OpenLayers.Layer.WMS( |
|
495 |
var layer = new OpenLayers.Layer.WMS(
|
|
451 | 496 |
layerData.tdwg, |
452 | 497 |
mapResponseObj.geoserver + "/wms", |
453 | 498 |
{ |
... | ... | |
459 | 504 |
); |
460 | 505 |
layer.params.SLD = layerData.sld; |
461 | 506 |
layer.setOpacity(opts.distributionOpacity); |
462 |
map.addLayers([layer]); |
|
463 |
// hack for cuba |
|
464 |
if(layerData.tdwg == "flora_cuba_2016_regions"){ |
|
465 |
map.setLayerZIndex(layer, 5); |
|
466 |
} |
|
467 |
if(layerData.tdwg == "flora_cuba_2016_provinces"){ |
|
468 |
map.setLayerZIndex(layer, 6); |
|
469 |
} |
|
470 |
if(layerData.tdwg == "flora_cuba_2016_world"){ |
|
471 |
map.setLayerZIndex(layer, 4); |
|
472 |
} |
|
473 | 507 |
|
508 |
layers.push(layer); |
|
474 | 509 |
} |
475 |
|
|
476 | 510 |
} |
477 | 511 |
|
478 |
// zoom to the required area |
|
479 |
if(mapResponseObj.bbox !== undefined){ |
|
512 |
if(layers.length > 0) { |
|
513 |
// calculate zoomBounds for the using the first layer |
|
514 |
if(mapResponseObj.bbox !== undefined){ |
|
480 | 515 |
var newBounds = OpenLayers.Bounds.fromString( mapResponseObj.bbox ); |
481 |
newBounds.transform(layer.projection, map.getProjectionObject()); |
|
516 |
newBounds.transform(layers[0].projection, map.getProjectionObject());
|
|
482 | 517 |
if(dataBounds !== null){ |
483 |
dataBounds.extend(newBounds);
|
|
518 |
dataBounds.extend(newBounds); |
|
484 | 519 |
} else if(newBounds !== undefined){ |
485 |
dataBounds = newBounds;
|
|
520 |
dataBounds = newBounds; |
|
486 | 521 |
} |
487 |
map.zoomToExtent(dataBounds, false); |
|
488 | 522 |
|
489 |
if(map.getZoom() > opts.maxZoom){ |
|
490 |
map.zoomTo(opts.maxZoom); |
|
491 |
} else if(map.getZoom() < opts.minZoom){ |
|
492 |
map.zoomTo(opts.minZoom); |
|
493 |
} |
|
523 |
zoomToBounds = dataBounds; |
|
524 |
console.log("data layer zoomToBounds: " + zoomToBounds); |
|
525 |
zoomToClosestLevel = false; |
|
526 |
} |
|
494 | 527 |
} |
495 | 528 |
|
496 | 529 |
|
530 |
|
|
497 | 531 |
if(legendImgSrc != null && opts.legendPosition !== undefined && mapResponseObj.legend !== undefined){ |
498 | 532 |
var legendSrcUrl = mapResponseObj.geoserver + legendImgSrc + mapResponseObj.legend; |
499 | 533 |
addLegendAsElement(legendSrcUrl); |
500 | 534 |
//addLegendAsLayer(legendSrcUrl, map); |
501 | 535 |
} |
536 |
|
|
537 |
return layers; |
|
502 | 538 |
} |
503 | 539 |
|
504 | 540 |
}; |
... | ... | |
586 | 622 |
/** |
587 | 623 |
* |
588 | 624 |
*/ |
589 |
var createLayers = function( baseLayerNames, defaultBaseLayerName, customWMSBaseLayerData){ |
|
625 |
var createBaseLayers = function( baseLayerNames, defaultBaseLayerName, customWMSBaseLayerData){
|
|
590 | 626 |
|
591 | 627 |
for(var i = 0; i < baseLayerNames.length; i++) { |
592 | 628 |
// create the layer |
... | ... | |
612 | 648 |
}; |
613 | 649 |
|
614 | 650 |
/** |
615 |
* returns the intersction of the bounds b1 and b2. |
|
651 |
* returns the intersection of the bounds b1 and b2.
|
|
616 | 652 |
* The b1 and b2 do not intersect b1 will be returned. |
617 | 653 |
* |
618 | 654 |
* @param OpenLayers.Bounds b1 |
... | ... | |
716 | 752 |
} |
717 | 753 |
}; |
718 | 754 |
|
755 |
var log = function(message, addTimeStamp){ |
|
756 |
var timestamp = ''; |
|
757 |
if(addTimeStamp == true){ |
|
758 |
var time = new Date(); |
|
759 |
timestamp = time.getSeconds() + '.' + time.getMilliseconds() + 's'; |
|
760 |
} |
|
761 |
console.log(timestamp + message); |
|
762 |
}; |
|
763 |
|
|
719 | 764 |
/** |
720 | 765 |
* Creates a WMS Base layer |
721 | 766 |
* @param String name |
... | ... | |
787 | 832 |
this.div.style.lineHeight = this.map.size.h + "px"; |
788 | 833 |
}, |
789 | 834 |
|
790 |
counterIncrease: function () { |
|
791 |
this.LAYERS_LOADING++; |
|
792 |
this.updateState(); |
|
835 |
counterIncrease: function (layer) { |
|
836 |
this.control.LAYERS_LOADING++; |
|
837 |
log(' > loading start : ' + this.layer.name + ' ' + this.control.LAYERS_LOADING, true); |
|
838 |
this.control.updateState(); |
|
793 | 839 |
}, |
794 | 840 |
|
795 |
counterDecrease: function () { |
|
796 |
this.LAYERS_LOADING--; |
|
797 |
this.updateState(); |
|
841 |
counterDecrease: function (layer) { |
|
842 |
this.control.LAYERS_LOADING--; |
|
843 |
log(' > loading end : ' + this.layer.name + ' ' + this.control.LAYERS_LOADING, true); |
|
844 |
this.control.updateState(); |
|
798 | 845 |
}, |
799 | 846 |
|
800 | 847 |
draw: function () { |
... | ... | |
827 | 874 |
registerEvents: function() { |
828 | 875 |
|
829 | 876 |
this.map.events.register('preaddlayer', this, function(e){ |
830 |
e.layer.events.register('loadstart', this, this.counterIncrease); |
|
831 |
e.layer.events.register('loadend', this, this.counterDecrease); |
|
877 |
console.log(" > preaddlayer " + e.layer.name); |
|
878 |
e.layer.events.register('loadstart', {control: this, layer: e.layer}, this.counterIncrease); |
|
879 |
e.layer.events.register('loadend', {control: this, layer: e.layer}, this.counterDecrease); |
|
832 | 880 |
}); |
833 | 881 |
} |
834 | 882 |
|
Also available in: Unified diff
#5683 layer loading and ui response improved