Sur internet, les temps de chargement des couches SIG varient principalement en fonction de la volumétrie et du type de données spatiales (rasters, vecteurs), du protocole (tuilage, WMS, WFS, etc), de la mise en mémoire (cache) et des caractéristiques d’affichages selon les résolutions spatiales sans parler bien entendu des débits réseaux et des technologies utilisées. Les optimisations de la mise à disposition des données spatiales sont configurées majoritairement « côté serveur » et feront l’objet d’un prochain article.
Ici, on développe un script qui indique à l’utilisateur de l’interface web l’état et le temps de chargement de la donnée raster et/ou vecteur. En clair, la couche SIG est-elle en cours de chargement, chargée ou une erreur s’est-elle produite. L’API d’OpenLayers (v4) comprend des évènements spécifiques pour les données tuilées puis on s’intéresse aux couches vectorielles comme le format de donnée GeoJSON.
Pour suivre ce tutoriel, on suppose que l’affichage des données SIG via des protocoles HTTP (WM(T)S par exemple) et de format GeoJSON avec OpenLayers est maîtrisé.
1. État de chargement des données spatiales tuilées
Les évènements de chargement d’OpenLayers sont tileloadstart, tileloaderror et tileloadend valables pour les sources des couches tuilées (ol.layer.Tile). Ces sources de données sont citées de manière exhaustive ci-après : BingMaps, CartoDB, OSM Stamen, TileArcGISRest, TileImage, TileJSON, TileWMS, UrlTile, VectorTile, WMTS, XYZ, Zoomify. Ainsi, pour une méthode donnée, on peut considérer l’état de chargement de la source. Par exemple, pour le début du chargement, on a :
var sourceOSM = ol.source.OSM();
var coucheOSM = ol.layer.Tile({
source: sourceOSM,
...
});
sourceOSM.on('tileloadstart', function() {
...
});Sur le site d’OpenLayers, un exemple de barre de progression permet d’observer l’évolution du chargement de la donnée. Ici, on initialise un objet qui prend en compte la variable temps t. L’instant t0 est pris en compte lors du début du chargement de la donnée, l’instant t1 à la fin, et la différence t1-t0 permet de visualiser le temps complet.
var sourceOSM = ol.source.OSM();
var coucheOSM = ol.layer.Tile({
source: sourceOSM,
...
});
var t={};
sourceOSM.on('tileloadstart', function() {
t.t0=performance.now();
});
sourceOSM.on('tileloadend', function() {
t.t1=performance.now();
var difference=t.t1-t.t0;
});Enfin, on procède de la même manière avec tileloaderror -sans la variable temporelle- si une erreur a lieu. L’état du chargement est pris en compte pour les données SIG tuilées mais qu’en est-il pour les autres sources de données comme les données vectorielles de type GeoJSON, GPX, KML ou les données chargées en WFS?
