Annonce
#1 Wed 26 October 2016 19:43
- kartogravele
- Juste Inscrit !
- Date d'inscription: 13 Oct 2016
- Messages: 6
Openlayers / getFeatures() ne donne rien
Bonjour,
A partir d'un fichier gpx, j'affiche une carte avec Openlayers.
Les waypoints s'affichent parfaitement avec les propriétés que j'ai indiquées.
Code:
<!DOCTYPE html>
<html>
<head>
<title>GPX Data</title>
<link rel="stylesheet" href="http://openlayers.org/en/v3.18.2/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.18.2/build/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<div id="info"> </div>
<script>
var raster = new ol.layer.Tile({
source: new ol.source.OSM({
imagerySet: 'osmfr',
key: ''
})
});
var vector = new ol.layer.Vector({
source: new ol.source.Vector({
url: 'fichier.gpx',
format: new ol.format.GPX()
}),
style: function(feature) {
var properties = feature.getProperties();
var name = properties['name'];
style = {
'Point': new ol.style.Style({
text: new ol.style.Text ({ text:name,font:'10px Palace Script',textAlign:'center', offsetX:0
,fill: new ol.style.Fill({color: 'red'}),
}),
image: new ol.style.Circle({
fill: null,
radius: 7,
stroke: new ol.style.Stroke({
color: 'red',
width: 1
})
})
})
};
return style[feature.getGeometry().getType()]
}
});
var map = new ol.Map({
layers: [raster, vector],
target: document.getElementById('map'),
view: new ol.View({})
});
var state = vector.getSource().getState();
document.write ("state = "+state+"<BR>");
var features = vector.getSource().getFeatures ();
document.write ("features = "+features+"<BR>");
nbfeatures=features.length;
document.write ("nbfeatures = "+nbfeatures+"<BR>");
map.getView().setCenter(ol.proj.transform([4.85, 45.75], 'EPSG:4326', 'EPSG:3857'));
map.getView().setZoom(15);
</script>
</body>
</html>Voici le fichier GPX.
Code:
<gpx xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.topografix.com/GPX/1/1 http://www.topografix.com/GPX/1/1/gpx.xsd" version="1.1" creator="togpx"> <wpt lat="45.74751" lon="4.855258"><name>1</name><desc>name=1</desc></wpt> <wpt lat="45.746875" lon="4.854685"><name>2</name><desc>name=2</desc></wpt> <wpt lat="45.7455847300985" lon="4.85279176712036"><name>3</name><desc>name=3</desc></wpt> <wpt lat="45.746661" lon="4.857562"><name>4</name><desc>name=4</desc></wpt> <wpt lat="45.746455" lon="4.853352999999996"><name>5</name><desc>name=5</desc></wpt> <wpt lat="45.745704" lon="4.854172"><name>6</name><desc>name=6</desc></wpt> <wpt lat="45.746455" lon="4.853353"><name>7</name><desc>name=7</desc> </wpt><wpt lat="45.748799" lon="7.368677000000001"><name>8</name><desc>name=8</desc> </wpt><wpt lat="45.74642" lon="4.852106"><name>9</name><desc>name=9</desc></wpt> <wpt lat="45.746633" lon="4.856315"><name>G</name><desc>G</desc></wpt> <wpt lat="45.746612" lon="4.850096"><name>B</name><desc>B</desc></wpt> </gpx>
Je souhaite faire des calculs sur les features (centre, dimensions...).
Et du coup, j'ai besoin de manipuler l'ensemble des features.
Je vérifie que la source est "ready'. C'est bien le cas.
J'ai utilisé getFeatures (). Mais le résultat est vide.
L'affichage...
Code:
var state = vector.getSource().getState();
document.write ("state = "+state+"<BR>");
var features = vector.getSource().getFeatures ();
document.write ("features = "+features+"<BR>");
nbfeatures=features.length;
document.write ("nbfeatures = "+nbfeatures+"<BR>");... donne ceci
Code:
state = ready features = nbfeatures = 0
Quel est le problème ?
Dernière modification par kartogravele (Thu 27 October 2016 14:11)
Hors ligne
#2 Thu 17 November 2016 10:52
- Jean-Marie64
- Participant actif
- Lieu: Pau
- Date d'inscription: 6 Nov 2007
- Messages: 131
Re: Openlayers / getFeatures() ne donne rien
Bonjour
la requête récupérant les features doit être asynchrone puisqu'au moment de l'affichage des résultats (state, length etc.)
les features ne sont pas encore ajoutés dans le layer
une solution est de passer par une requête ajax pour être sûr d'afficher les résultats après que les features soient ajoutés au layer
le mieux est de faire la requête en mode asynchrone (avec $.ajax -> voir doc jquery)
...
var vector = new ol.layer.Vector({
source: new ol.source.Vector({
format: new ol.format.GPX()
}),
...
....
$.ajax({
url: "fichier.gpx",
success: function(data) {
var features = geoGPXFormat.readFeatures(data, {featureProjection: map.getView().getProjection()});
vector.getSource().addFeatures(features);
var state = vector.getSource().getState();
var features = vector.getSource().getFeatures ();
nbfeatures=features.length;
document.getElementById("info").innerHTML="state = "+state+"<BR>"+"features = "+features+"<BR>"+"<BR>"+"nbfeatures = "+nbfeatures+"<BR>"
},
error: function(e) {
document.getElementById("info").innerHTML("error retrieving url");
}
});
Hors ligne
