リーフレットはレイヤーグループの特定の色の点を表示しません

Question

私は車両に関連付けられたパスを描くためにリーフレットを使用しています。各ビークルパスは、レイヤーグループで構成され、パス内に異なる色を持つことができます（色は温度に依存します）。

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

私の問題は、色の特定の値（青の異なる色合い）のパスが描かれていないということである：（クロムのデバッグコンソールで表示されるように）データは、次の形式でウェブソケットから受信されますマップ上には表示されますが、他のマップでは適切に機能します。ズームレベルを変更すると、すべてが表示されます（使用しているすべての色）。

2つ目の画像に青色が表示されていることがわかります（前のパスよりも）。ズームレベルを変更する必要はなく、溺れているはずです。

データをレイヤーに追加するためのコードです。

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]

は、私がGithubにアップロードした（少なくとも私はそれがあると思います） "最小限の完全かつ検証例" です。いくつかのパスが表示されているマップが含まれています。ロード時に表示されるパスは緑とピンクになりますが、ズームレベルを変更すると青のパスが表示されます。 @Jieterと@snkashisの提案を統合しましたが、問題はまだありません。

Answer 1

最後に、車両レイヤーのタイプをL.layerGroupからL.geoJsonに変更するという考えに達しました。そしてそれは働いた！なぜか分からなくても。

Git repositoryを私のソリューションで更新しました。

---

（以前私もmulti_polyline._leaflet_id = id;をやって立ち止まったし、今L.Util.setOptions(vehicleLayer, {vehicle_id: id});を使用してきたコメントで言ったように。私は道でvehicleLayerにmulti_polylineに改称しました。）

Answer 2

あなたの例ではまだmulti_polyline._leaflet_id = id;が表示されていますが、L.Util.setOptionsを使用して自分の内部識別子（車両IDなど）をマークしていませんか？