Suite

Chargement des propriétés Json dans une fenêtre contextuelle à l'aide de leafjs


J'ai un fichier geojson (tide_gauges.geojson)

{ "type": "FeatureCollection", "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } }, " features": [ { "type": "Feature", "properties": { "NUMERO": "10569", "MAREGRAFO": "COCALZINHO", "FICHA": null }, "geometry": { "type": "Point", "coordonnées": [ -4, -1 ] } }, { "type": "Caractéristiques", "propriétés": { "NUMERO": "50240", "MAREGRAFO": "PONTA DE PARANAPUA", "FICHA": null }, "geometry": { "type": "Point", "coordinates": [ -4, -2 ] } }…

J'ai récupéré ce fichier Json dans une variable :

var estacoes = new L.geoJson(); estacoes.addTo(carte); $.ajax({ dataType: "json", url: "geojson/tide_gauges.geojson", success: function(data) { $(data.features).each(function(key, data) { estacoes.addData(data) ; }); } }).error(function() {});

J'ai besoin de définir toutes les propriétés des fonctionnalités (NUMERO,MAREGRAFO,FICHE,LATITUDEetLONGITUDE) dans une fenêtre contextuelle qui apparaît après un clic sur l'entité point sur la carte.

J'ai essayé le code ci-dessous, mais ce n'est pas suffisant :

var popupContent =""; for (var k dans feature.properties) { var v = String(feature.properties[k]); popupContent += k + '->' + v ;

Quelqu'un pourrait-il donner des conseils à ce sujet, s'il vous plaît?


Utilisation onEachFeature option dansL.GeoJSONconstructeur pour lier le popup à chaque fonctionnalité de votre GeoJSON. Cette fonction sera appelée pour chaque fonctionnalité et recevra la créationL.Marqueuret la fonction GeoJSON originale. Vous pouvez modifier les options du marqueur, lier la fenêtre contextuelle, etc.

L.geoJson({ onEachFeature: function(feature, layer) { //utiliser feature.properties pour construire popup html var popupContent = 'NUMERO: ' + feature.properties.NUMERO; layer.bindPopup(popupContent); } })

Voici un exemple de travail : http://jsfiddle.net/1Lshjdxq/1/

En plus d'itérer sur lefeature.propertiesvous souhaitez également afficher lefeature.geometry.coordinates(pourIndiquerfonctionnalités, au moins). Voir leonEachFeatureméthode ci-dessous pour plus de détails sur la façon de procéder.

N'oubliez pas non plus : geoJSON utilise un système de coordonnées basé sur une grille et les coordonnées sont un tableau de[x, y]ce qui signifie que la commande est[Longitude, Latidude]. C'est déroutant au début, mais cela a du sens si vous considérez que Latitude est leouil'axe et la longitude est leXaxe. (Beaucoup de gens, au moins aux États-Unis, ont l'habitude de dire "latitude et longitude", d'où la confusion, que je signale car dans votre exemple vous avez dit que vous vouliez voir "LATITUDE: -4 ligne suivante LONGITUDE: -2 " ce qui n'est pas correct compte tenu des coordonnées de votre exemple.)

// données geoJSON var data = { "type": "FeatureCollection", "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3 :CRS84" } }, "features": [{ "type": "Feature", "properties": { "NUMERO": "10569", "MAREGRAFO": "COCALZINHO", "FICHA": null }, " geometry ": { "type": "Point", "coordonnées": [-117, 45] } }, { "type": "Feature", "properties": { "NUMERO": "50240", "MAREGRAFO": "PONTA DE PARANAPUA", "FICHA": null }, "geometry": { "type": "Point", "coordinates": [-118, 44] } }] }; // Crée la carte var map = L.map('map'); // Configurer la couche OSM var osmTiles = L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png">PartagerAméliorer cette réponserépondu 23 sept. 15 à 3:48rien n'est nécessairerien n'est nécessaire3462 insignes d'argent11 insignes de bronze