Disegna linee tra i marker nel volantino

Question

Sto provando a inserire linee tra i marcatori (che sono generati dai dati JSON) nel volantino. Ho visto un esempio, ma non funziona con i dati JSON. Riesco a vedere i marcatori, ma non compaiono linee.

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

miei dati 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

Ci sono molti modi in cui è possibile farlo iterando sul GeoJSON originale o sul layer L.GeoJson risultante per produrre una geometria polilinea.Qui è una semplice funzione che trasformerà uno strato L.geoJson di punti in una matrice di coordinate che può essere passato a 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; 
} 

e qui è un violino mostrando al lavoro su alcuni dati GeoJSON sintetico:

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

Supponendo che i dati GeoJSON contiene una geometria solo punto, si dovrebbe essere in grado di usarlo dopo aver definito window.geojson all'interno della vostra funzione $.getJSON successo in questo modo:

Se i dati GeoJSON sono più complessi, potrebbe essere necessario aggiungere alcuni condizionali per verificare il tipo di geometria, ecc.

Answer 2

EDIT:

idea di Nathan è corretta, nel senso che si dovrà costruire una polilinea (le linee tra i tuoi marcatori) te stesso.

Per essere rigorosi, è necessario utilizzare i dati quando l'elenco di punti è ancora un array (e presupponendo che l'ordine dell'array sia l'ordine delle connessioni di linea che si desidera ottenere). Il che significa che devi lavorare direttamente sui tuoi dati GeoJSON.

Per esempio, si dovrebbe fare: dati

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

---

Il GeoJSON saranno convertiti da Volantino in vettori per polilinee, poligoni, ecc, e marcatori per elementi puntuali. Si prega di fare riferimento al foglio tutorial e reference.

Quando si desidera specificare come opuscolo deve lo stile delle vettori, si dovrebbe davvero fare un oggetto che contiene path options (come il tuo style variabile sulla prima linea), ma si dovrebbe fare come il style option del vostro L.geoJson strato , non dentro un'icona.

Se si desidera specificare in che modo Leaflet deve applicare lo stile ai marcatori , è possibile impostare un'icona specifica, che sarà applicabile solo alle funzioni punto. Dovresti utilizzare meglio lo pointToLayer option, poiché il codice verrà applicato realmente solo sui punti, invece di provare ad applicarlo ai vettori (che non hanno un metodo setIcon per esempio).

Infine, quando si desidera eseguire un'azione che si applica sia a vettori che a marcatori, si utilizza onEachFeature option, ad esempio per associare il popup.

Così si finirebbe con qualcosa di simile:

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

}); 

Come sottolineato nei commenti, ogni volta che si cerca di aiuto da altre persone, si dovrebbe fare il loro compito più facile (e quindi si potrebbe ottenere una migliore e più veloce supporto) se si prende il tempo per dichiarare correttamente il problema, con la descrizione/schermate di ciò che sta andando male e postare un codice pulito. Un'ottima pratica per il codice lato client consiste nel riprodurre il problema su jsFiddle ad esempio.