web-dev-qa-db-fra.com

Tracez des lignes entre les marqueurs dans la brochure

J'essaie d'insérer des lignes entre les marqueurs (qui sont générés à partir de données JSON) dans la brochure. J'ai vu un exemple, mais cela ne fonctionne pas avec les données JSON. Je peux voir les marqueurs, mais aucune ligne n'apparaît.

var style = {
  color: 'red',
  fillColor: "#ff7800",
  opacity: 1.0,
  fillOpacity: 0.8,
  weight: 2
};

$.getJSON('./server?id_dispositivo=' + id_device + '', function(data) {
  window.geojson = L.geoJson(data, {
    onEachFeature: function (feature, layer) {
      var Icon = L.icon({
        iconUrl: './images/mymarker.png',
        iconSize: [18, 28], // size of the icon
        style: style,
      });
      layer.setIcon(Icon);
      layer.bindPopup(feature.properties.date + '<br />' + feature.properties.id);
    }
  });
});
map.addLayer(geojson);

enter image description here

Mes données JSON:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -70.219841,
          8.6310997
        ]
      },
      "properties": {
        "id": 336,
        "id_user": 1,
        "id_device": 1,
        "timestamp": 1446571154,
        "date": "12:49PM 03-11-2015",
        "Latitude": 8.6310997,
        "Longitude": -70.219841,
        "speedKPH": 0,
        "heading": "",
        "Name": "N\/D",
        "City": "N\/D",
        "estatus": "Stop"
      }
    }
  ]
}
javascriptleafletgeojson
22
user4131013

Il existe de nombreuses façons de le faire en itérant sur le GeoJSON d'origine ou sur le calque L.GeoJson résultant pour produire une géométrie de polyligne. Voici une fonction simple qui transformera un L.geoJson couche de points dans un tableau de coordonnées pouvant être passées à 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 un violon le montrant au travail sur certaines données synthétiques GeoJSON:

http://jsfiddle.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 $.getJSON fonction de succès comme ceci:

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

Si vos données GeoJSON sont plus complexes, vous devrez peut-être ajouter des conditions 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.

12
nathansnider

ÉDITER:

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

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 directement sur vos données GeoJSON.

Par exemple, vous feriez:

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 Leaflet en vecteurs pour les polylignes, polygones, etc., et marqueurs pour les entités ponctuelles. Veuillez vous référer à la brochure tutoriel et référence .

Lorsque vous souhaitez spécifier comment Leaflet doit styliser les vecteurs , vous devez en effet créer un objet qui contient options de chemin (comme votre variable style sur la première ligne), mais vous devez la donner comme style de votre L.geoJson couche, pas à l'intérieur d'une icône.

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

Enfin, lorsque vous souhaitez effectuer une action qui s'applique à la fois aux vecteurs et aux marqueurs, vous utilisez onEachFeature option , par exemple pour lier votre popup.

Vous vous retrouveriez donc 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 indiqué dans les commentaires, chaque fois que vous demandez de l'aide à d'autres personnes, vous faciliteriez leur tâche (d'où une assistance meilleure et plus rapide) si vous prenez le temps d'énoncer correctement votre problème, avec une description/des captures d'écran de ce qui est se tromper et publier du code propre. Une très bonne pratique pour le code côté client est de reproduire le problème sur jsFiddle par exemple.

5
ghybs