แผ่นพับไม่แสดงจุดสีใดสีหนึ่งจากกลุ่มเลเยอร์

ฉันใช้แผ่นพับเพื่อวาดเส้นทางที่เกี่ยวข้องกับยานพาหนะ เส้นทางของยานพาหนะแต่ละเส้นทางประกอบด้วยกลุ่มเลเยอร์เพื่อให้มีสีที่แตกต่างกันในเส้นทาง (เนื่องจากสีขึ้นอยู่กับอุณหภูมิ) ข้อมูลที่ได้รับจากเว็บซ็อกเก็ตในรูปแบบต่อไปนี้ (ตามที่แสดงโดยคอนโซลดีบักของโครเมียม):

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

ปัญหาของฉันคือสำหรับค่าสีบางค่า (เฉดสีน้ำเงินที่แตกต่างกัน) เส้นทางไม่ได้ถูกวาดลงบนแผนที่ แต่สำหรับค่าสีอื่น ๆ นั้นทำงานได้ถูกต้อง ในกรณีที่ฉันเปลี่ยนระดับการซูม ทุกอย่างจะปรากฏขึ้น (ทุกสีที่ฉันใช้)

คุณจะเห็นว่ามีสีน้ำเงินบางส่วนปรากฏขึ้นบนรูปภาพที่สอง (เหนือเส้นทางก่อนหน้า) ซึ่งควรจะจมลงโดยไม่จำเป็นต้องเปลี่ยนระดับการซูม

รหัสของฉันสำหรับการเพิ่มข้อมูลลงในเลเยอร์

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

[แก้ไข]

นี่คือ "ตัวอย่างขั้นต่ำ สมบูรณ์ และตรวจสอบได้" (อย่างน้อยฉันก็หวังว่าจะเป็นเช่นนั้น) ฉันได้อัปโหลดบน Github. มีแผนที่ที่แสดงเส้นทางบางส่วน เมื่อโหลดเส้นทางที่แสดงควรเป็นสีเขียวและสีชมพู แต่หากคุณเปลี่ยนระดับการซูม เส้นทางสีน้ำเงินควรปรากฏขึ้น ฉันได้รวมข้อเสนอแนะ @Jieter และ @snkashis แล้ว แต่ปัญหายังคงอยู่ที่นี่