Leaflet zeigen keine Punkte einer bestimmten Farbe von einer LayerGroup

Question

Ich verwende Flugblatt, um den Pfad zu den Fahrzeugen zu zeichnen. Jeder Fahrzeugweg besteht aus einer Schichtgruppe, um eine unterschiedliche Farbe im Pfad zu ermöglichen (da die Farbe von der Temperatur abhängt). Die Daten werden von einem Web-Buchse im folgende Format empfangen (wie von der Debug-Konsole aus Chrom angezeigt):

Object {color: "#cc0099", legende: "<someHtmlCode.TheSameForEveryPieceOfData>", data: {lat: 48.77905, lon: -3.44891}, c2a_id: "vehicle_1"} 

Mein Problem ist, dass für bestimmte Werte der Farbe (verschiedene Blauton) der Pfad nicht gezogen wird, auf der Karte aber für die anderen funktioniert es richtig. Wenn ich die Zoomstufe ändere, wird alles angezeigt (jede Farbe, die ich benutze).

Sie können sehen, dass auf dem zweiten Bild (über den vorherigen Pfaden) etwas Blau aufgetaucht ist, das ohne das Ändern des Zoomlevels ertrinken sollte.

Mein Code zum Hinzufügen der Daten zum Layer.

var idAllLayers; 
if (_data != null && _data['data'] != null) { 
    current_lon = _data['data']['lon']; 
    current_lat = _data['data']['lat']; 

    // checking if there is already a layer associated to the vehicle _id_ 
    if (!(this.layer_group_real_time.hasLayer(id))) { 
     var multi_polyline = L.layerGroup([]); //create a layer for this vehicle 
     multi_polyline._leaflet_id = id; 
     //add a sublayer to this one (for a sub path to have different colors) 
     multi_polyline.addLayer(this.newLayer(id, _data['color'])); 
     this.layer_group_real_time.addLayer(multi_polyline); 
    } 

    // get the differents layers of the layerGroup for the vehicle _id_ 
    idAllLayers = this.layer_group_real_time.getLayer(id).getLayers(); 
    currentLayerLatLng = idAllLayers[idAllLayers.length-1].getLatLngs(); 
    if (current_lat != null && current_lon != null) { 
     // if previous elements have been stored 
     if (this.previousDataPoints[id] != null && this.previousColor[id] != null) { 
      oldDataPoint = this.previousDataPoints[id]['data']; 
      delta = this.measure(current_lat, current_lon, oldDataPoint['lat'], oldDataPoint['lon']); 
      if (delta > MAX_DIST || _data['color'] != this.previousColor[id]) { 
       if (delta < MAX_DIST){ // case where color has changed but we still need to add the point to the previous subpath 
        currentLayerLatLng.push(L.latLng(current_lat, current_lon)); 
       }          
       this.layer_group_real_time.getLayer(id).addLayer(this.newLayer(id, _data['color'])); 
       idAllLayers = this.layer_group_real_time.getLayer(id).getLayers(); 
       currentLayerLatLng = idAllLayers[idAllLayers.length - 1].getLatLngs(); 
      } 
     } 
     currentLayerLatLng.push(L.latLng(current_lat, current_lon)); 
     idAllLayers[idAllLayers.length - 1].setLatLngs(currentLayerLatLng); // setting up the new coords 
     this.previousDataPoints[id] = _data; 
     this.previousColor[id] = _data['color']; 
    } 
} 

newLayer: function (_id, _color) { 
     var nl = L.polyline([], 
      { 
       color: _color, 
       opacity: 0.7, 
       stroke: true, 
       weight: 6, 
       vehicle_id: _id 
      }); 
     nl.on('click', this.traceOnClick); 
     return nl; 
    }, 

---

[EDIT]

Hier ist ein "minimal, vollständig und überprüfbar Beispiel" (zumindest hoffe ich, es ist) ich auf Github hochgeladen haben. Es enthält eine Karte, auf der ein Pfad angezeigt wird. Unter Last sollte der angezeigte Pfad grün und pink sein, aber wenn Sie die Zoomstufe ändern, sollte der blaue Pfad erscheinen. Ich habe @Jieter und @snkashis Vorschläge integriert, aber das Problem ist immer noch da.

Answer 1

Endlich bin ich auf die Idee gekommen, den Typ der Fahrzeugschicht von L.layerGroup zu L.geoJson zu ändern. Und es hat funktioniert! Auch wenn ich nicht weiß warum.

Ich habe die Git repository mit meiner Lösung aktualisiert.

---

(Wie bereits in den Kommentaren, sagte ich habe auch multi_polyline._leaflet_id = id; stoped tun und jetzt L.Util.setOptions(vehicleLayer, {vehicle_id: id}); verwenden. Ich multi_polyline zu vehicleLayer die übrigens umbenannt haben.)

Answer 2

Ich sehe immer noch multi_polyline._leaflet_id = id; in Ihrem Beispiel .. warum verwenden Sie nicht L.Util.setOptions, um Ihre eigenen internen Identifikatoren (Fahrzeug-ID, etc.) zu markieren?