Rysowanie linii między znacznikami w ulotce

Question

Próbuję wstawiać linie między znacznikami (generowanymi na podstawie danych JSON) w ulotce. Widziałem przykład, ale nie działa z danymi JSON. Widzę znaczniki, ale nie pojawiają się żadne linie.

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); 

Moje dane 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" 
     } 
    } 
    ] 
} 

Answer 1

Istnieje wiele sposobów, aby to zrobić, wykonując iterację na oryginalnym GeoJSON lub wynikowej warstwie L.GeoJson w celu wygenerowania geometrii polilinii.Oto jedna prosta funkcja, która okaże się L.geoJson warstwę punktów do tablicy współrzędnych, które mogą być przekazywane do 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; 
} 

i tutaj jest skrzypce pokazując go w pracy na jakiejś syntetycznej danych GeoJSON:

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

Zakładając, że dane GeoJSON zawiera tylko punktową geometrię, powinieneś być w stanie go używać po zdefiniowaniu window.geojson wewnątrz swojej funkcji $.getJSON sukcesu tak:

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

Jeśli dane GeoJSON są bardziej złożone, może być konieczne dodanie niektórych warunkowych w celu sprawdzenia typu geometrii itp., Ale powinno to przynajmniej dać ogólny pogląd, jak postępować.

Answer 2

EDIT:

pomysł Nathana jest poprawna w tym sensie, że trzeba będzie zbudować łamaną (granice między swoimi markerów) siebie.

Aby być rygorystycznym, musisz użyć danych, gdy lista punktów jest nadal tablicą (i przy założeniu, że kolejność jest kolejnością połączeń liniowych, które chcesz uzyskać). Co oznacza, że ​​musisz bezpośrednio pracować nad danymi GeoJSON.

Na przykład, byś zrobił: dane

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); 

---

GeoJSON zostaną przeliczone przez Broszurka do wektorów dla polilinii, wielokątów, etc., i markerów dla cech punktowych. Proszę zapoznać się z ulotką tutorial i reference.

Gdy chcesz określić Ulotka powinna stylu do wektory, należy rzeczywiście tworzą obiekt, który posiada path options (jak twój style zmiennej w pierwszej linii), ale należy ją podać jako style option swojej warstwie L.geoJson , nie wewnątrz ikony.

Jeśli chcesz określić, w jaki sposób ulotka powinna stylizować znaczniki , możesz ustawić konkretną ikonę, która będzie miała zastosowanie tylko do funkcji punktowych. Powinieneś lepiej użyć parametru pointToLayer option, ponieważ kod będzie rzeczywiście stosowany tylko w punktach, zamiast próbować zastosować go do wektorów (które na przykład nie mają metody setIcon).

Na koniec, jeśli chcesz wykonać jakąś czynność, która dotyczy zarówno wektorów, jak i znaczników, użyjesz onEachFeature option, na przykład do powiązania twojego popup'a.

Więc byś skończyć z czymś takim:

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); 
    } 

}); 

Jak wskazano w komentarzach, kiedy szukać pomocy u innych ludzi, by zrobić swoje zadanie łatwiejsze (stąd byś lepiej i szybciej wsparcie), jeśli poświęcisz czas na poprawne stwierdzenie problemu, z opisem/zrzutami ekranu z tego, co dzieje się nie tak i opublikuj czysty kod. Bardzo dobrą praktyką dla kodu po stronie klienta jest na przykład odtworzenie problemu pod numerem jsFiddle.