Symbolisieren Linie basierend auf Attributen

Question

Ich versuche, PolyLineDecorator mit Leaflet zu verwenden, aber ich habe einen Haken gefunden, den ich nicht einmal PolyLineDecorator, wenn es um das Symbolisieren eines Pfades/Linie basierend auf Attributdaten geht.

var polyline = L.polyline([...]).addTo(map); 
var decorator = L.polylineDecorator(polyline, { 
    patterns: [ 
     // defines a pattern of 10px-wide dashes, repeated every 20px on the line 
     {offset: 0, repeat: 20, symbol: L.Symbol.dash({pixelSize: 10})} 
    ] 
}).addTo(map); 

aber gut für mich funktioniert, habe ich 20 Zeilen in einer einzigen GeoJSON Datei, und ich mag die Linien auf dem Feld Namen in der JSON-Datei basierend symbolisieren. Ich kann nirgends ein Beispiel finden, das dies abdeckt. Kann mich jemand auf relevante Beispiele oder Dokumentationen hinweisen? Ich habe das Gefühl, dass es einen Weg geben muss gegenüber dem Export jeder Zeile als eigene GeoJSON-Datei.

Danke für jede Hilfe.

Answer 1

Sie sollten hierfür die Methode GeoJson onEachFeature() verwenden. Lassen Sie uns asume, dass Ihre geoJson Struktur ist:

var geojsonFeatures = [ 
    { 
    "type": "Feature", 
    "properties": { 
     "name": "Trail 1", 
    }, 
    "geometry": { 
     "type": "Point", 
     "coordinates": [-104.99404, 39.75621] 
    } 
    }, 
    { 
    "type": "Feature", 
    "properties": { 
     "name": "Trail 2", 
    }, 
    "geometry": { 
     "type": "Point", 
     "coordinates": [-104.99404, 39.75621] 
    } 
    }  
]; 

Sie Name Eigenschaften Merkmal des von feature.properties.name zugreifen:

L.geoJson(geojsonFeature, { 
    onEachFeature: function (feature, layer) { 
    if (feature.properties.name === '') { 
     L.polylineDecorator(layer, { 
     patterns: [ 
      {offset: 0, repeat: 20, symbol: L.Symbol.dash({pixelSize: 10})} 
     ] 
     }).addTo(map); 
    } else { 
     L.polylineDecorator(layer, { 
     patterns: [ 
      {offset: 0, repeat: 30, symbol: L.Symbol.dash({pixelSize: 20})} 
     ] 
     }).addTo(map); 
    } 
    }) 
})