Dessiner des lignes entre les marqueurs dans un dépliant

Il existe plusieurs façons de faire cela en itérant sur l'original GeoJSON ou la couche L.GeoJson résultante pour produire une géométrie de polyligne. Voici une fonction simple qui transformera une couche de points L.geoJson en un tableau de coordonnées pouvant être transmis à L.polyline :

 function connectTheDots(data){ var c = []; for(i in data._layers) { var x = data._layers[i]._latlng.lat; var y = data._layers[i]._latlng.lng; c.push([x, y]); } return c; } 

Et voici une violon qui le montre au travail sur certaines données synthétiques GeoJSON:

http://fiddle.jshell.net/nathansnider/36twhxux/

En supposant que vos données GeoJSON contiennent uniquement une géométrie ponctuelle, vous devriez pouvoir l'utiliser après avoir défini window.geojson dans votre fonction $.getJSON comme $.getJSON :

 pathCoords = connectTheDots(window.geojson); var pathLine = L.polyline(pathCoords).addTo(map) 

Si vos données GeoJSON sont plus complexes, vous devrez peut-être ajouter certains conditionnels pour vérifier le type de géométrie, etc., mais cela devrait au moins vous donner une idée générale de la façon de procéder.

MODIFIER:

L'idée de Nathan est correcte dans le sens que vous devrez construire une polyligne (les lignes entre vos marqueurs) vous-même.

Pour être rigoureux, vous devez utiliser vos données lorsque la liste des points est toujours un tableau (et en supposant que l'ordre du tableau est l'ordre des connexions de ligne que vous souhaitez obtenir). Ce qui signifie que vous devez travailler sur vos données GeoJSON directement.

Par exemple, vous ferez:

 function connectDots(data) { var features = data.features, feature, c = [], i; for (i = 0; i < features.length; i += 1) { feature = features[i]; // Make sure this feature is a point. if (feature.geometry === "Point") { c.push(feature.geometry.coordinates); } } return c; } L.polyline(connectDots(data)).addTo(map); 

Les données GeoJSON seront converties par une brochure en vecteurs pour les polylignes, les polygones, etc., et les marqueurs pour les points. Veuillez vous reporter au tutoriel et à la référence de la brochure.

Lorsque vous souhaitez spécifier comment Leaflet doit façonner les vecteurs , vous devez constituer un objet qui détient les options de chemin d'accès (comme votre variable de style sur la première ligne), mais vous devriez le donner comme option de style de votre couche L.geoJson , et non Dans une icône.

Lorsque vous souhaitez spécifier comment la brochure doit définir les marqueurs , vous pouvez en effet définir une icône spécifique, qui ne s'appliquera qu'aux fonctions ponctuelles. Vous devriez mieux utiliser l' option pointToLayer , car le code sera vraiment appliqué uniquement sur les points, au lieu d'essayer de l'appliquer aux vecteurs (qui n'ont pas une méthode setIcon par exemple).

Enfin, lorsque vous souhaitez effectuer une action qui s'applique aux vecteurs et aux marqueurs, vous utilisez l' option onEachFeature , par exemple pour lier votre fenêtre contextuelle.

Donc, vous vous retrouverez avec quelque chose comme:

 var myIcon = L.icon({ iconUrl: './images/mymarker.png', iconSize: [18, 28] }); var geojson = L.geoJson(data, { style: style, // only applies to vectors. // only applies to point features pointToLayer: function(feature, latlng) { return L.marker(latlng, {icon: myIcon}); }, // will be run for each feature (vectors and points) onEachFeature: function(feature, layer) { layer.bindPopup(feature.properties.date + '<br />' + feature.properties.id); } }); 

Comme cela a été souligné dans les commentaires, chaque fois que vous cherchez de l'aide d'autres personnes, vous faciliterez votre tâche (d'où vous obtiendrez un soutien meilleur et plus rapide) si vous prenez le temps d'indiquer correctement votre problème, avec la description / les captures d'écran de ce qui est Va mal et publie un code propre. Une très bonne pratique pour le code côté client est de reproduire le problème sur jsFiddle par exemple.