mapbox gl geojson style

Question

Ich versuche, die Aufnahme unten in Mapbox GL zu reproduzieren. Die Farben werden aus Gründen der Lesbarkeit hinzugefügt, dennoch ist das Anpassen von Farben nicht zwingend erforderlich. Der Schlüsselaspekt ist die unterschiedliche Strichstärke.

Ich habe über Styling in MapBox GL lesen here und there. Das Hinzufügen von so vielen Style-Layern, dass unterschiedliche Gewichtungen vorhanden sind, ist keine Option. Ich habe es mit zwei tausend LineStrings probiert und die Leistungen sind nicht akzeptabel.

Ich habe mehrere github Probleme there über datengesteuerte Stile in mapbox GL gecrawlt, aber ich kann nicht herausfinden, ob was ich brauche, ist auf der Straßenkarte.

Unter einem MWE des GEOJSON habe ich verwendet, um das Bild oben zu produzieren.

{ 
    "type": "FeatureCollection", 
    "features": [ 
    { 
     "geometry": { 
     "type": "LineString", 
     "coordinates": [[2.3420237, 48.9437736], 
         [2.3430249, 48.9462233], 
         [2.3428777, 48.9469687]] 
     }, 
     "type": "Feature", 
     "properties": { 
     "color": "#0000FF", 
     "weight": 5 
     } 
    }, 
    { 
     "geometry": { 
     "type": "LineString", 
     "coordinates": [[2.3880359, 48.9077387], 
         [2.3885364, 48.9072262], 
         [2.3886376, 48.9071376], 
         [2.3891088, 48.9066521]] 
     }, 
     "type": "Feature", 
     "properties": { 
     "color": "#FF0000", 
     "weight": 15 
     } 
    } 
    ] 
} 

Answer 1

Es gibt Dokumentation here auf ein Styling ein lineString von GeoJSON hinzufügen. Hier ist ein weiteres Beispiel, die zwei Linienzüge auf einer Karte mit zwei verschiedenen Gewichten/Farben zeigt: http://bl.ocks.org/tristen/5f807d44726b401b727f3ab06c7ed864

Ich versuchte es mit zwei Tausende Linestrings und die Leistungen sind nicht akzeptabel.

Ein leistungsfähigeres Datenformat für Tausende von Punkten ist die Konvertierung von GeoJSON in vector tiles. Es gibt ein Beispiel für das Hinzufügen einer Vektor-Kachel-Ebene zu einer Karte mit Mapbox GL JS hier: https://www.mapbox.com/mapbox-gl-js/example/vector-source/