Suite

OpenLayers 3 : Comment vérifier si la source vectorielle est prête ?

OpenLayers 3 : Comment vérifier si la source vectorielle est prête ?


ol.source.getState()ne semble pas fiable. Lorsque je l'appelle sur une source vectorielle, il revient prêt, mais les fonctionnalités ne sont pas encore disponibles. Le code ressemble à ceci :

var vectorSource = new ol.source.Vector({ url : 'world.topo.json', format : new ol.format.TopoJSON() }); //… initialisation de la carte avec vectorSource console.log(vectorSource.getState()); // renvoie "prêt" console.log(vectorSource.getFeatureById("US")); // renvoie null

Un autre moyen de voir si une source vectorielle est prête ?


Vous pouvez fournir votre propre fonction de chargement et définir des écouteurs personnalisés, comme suit :

var source = new ol.source.Vector({ loader: function(){ var url = '… /data/json/world-110m.json'; var format = new ol.format.TopoJSON(); var source = this ; // envoie votre événement personnalisé this.set('loadstart', Math.random()); getJson(url,", function(response){ if(Object.keys(response).length > 0){ var features = format.readFeatures(response, { featureProjection: 'EPSG:3857' }); source.addFeatures(features); //dispatch votre événement personnalisé source.set('loadend', Math.random()); } }); } });

Définissez des écouteurs personnalisés :

//écouteur de source personnalisé source.set('loadstart',"); source.set('loadend',"); source.on('change:loadstart', function(evt){ console.info('loadstart'); }); source.on('change:loadend', function(evt){ console.info('loadend'); });

Et une fonction xhr :

var getJson = function(url, data, callback) { // Doit encoder les données if(data && typeof(data) === 'object') { var y =", e = encodeURIComponent; for (x in data) { y += '&' + e(x) + '=' + e(data[x]); } data = y.slice(1); url += (/?/.test(url) ? '&' : '?') + données; } var xmlHttp = new XMLHttpRequest(); xmlHttp.open("GET", url, true); xmlHttp.setRequestHeader('Accept', 'application/json, text/javascript'); xmlHttp .setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xmlHttp.onreadystatechange = function () { if (xmlHttp.readyState != 4){ return; } if (xmlHttp.status != 200 && xmlHttp.status != 304){ callback("); revenir; } rappel(JSON.parse(xmlHttp.response)); } ; xmlHttp.send(null); } ;

Démonstration de travail.


Vous pouvez attacher un écouteur à votre vectorSource http://openlayers.org/en/v3.7.0/apidoc/ol.source.Vector.html#once

par exemple.

vectorSource.once('change',function(e){ if (vectorSource.getState() === 'ready') { vectorSource.getFeatureById("US"); } });

Je me suis retrouvé avec la fonction suivante, pour exécuter du code lorsque la source vectorielle est prête :

doWhenVectorSourceReady : function(callback) { var map = this; if (map.vectorSource.getFeatureById("US")) { // Est-ce un test fiable ? rappeler(); } else { var listener = map.vectorSource.on('change', function(e) { if (map.vectorSource.getState() == 'ready') { ol.Observable.unByKey(listener); callback(); } }); } }

Je ne suis pas sûr que le test d'une seule fonctionnalité soit fiable, car il se peut que toutes les fonctionnalités ne soient pas disponibles en même temps.


Voir la vidéo: OpenLayers Tutorial 397: Présentation dOpenLayers