Листовка не отображает точки определенного цвета из группы слоев

Я использую листовку, чтобы нарисовать путь, связанный с транспортными средствами. Каждый путь транспортного средства состоит из LayerGroup, что позволяет иметь различный цвет пути (поскольку цвет зависит от температуры). Данные получены из веб-сокета в следующем формате (как отображается в консоли отладки хрома):

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, но проблема все еще здесь.


person Sam_H_Cadman    schedule 21.06.2016    source источник
comment
Ваш пример немного сложно читать, но я заметил, что вы назначаете _leaflet_ids. Это не то, что вы должны делать, это может сработать, но также может привести к некоторым трудным для отслеживания ошибкам. Возможно, у вас есть id-коллизии?   -  person Jieter    schedule 21.06.2016
comment
Я сделал это, чтобы легко найти группу слоев, связанную с одним транспортным средством (группу multi_polyline, которую я создаю для транспортного средства, если оно еще не существует). Это делается для каждого слоя транспортных средств, но не на уровне подслоя (те, которые я добавляю в multi_polyline). Я не думаю, что у меня есть id-коллизии, у меня нет ошибки о чем-то подобном и не добавляется балл за неправильный путь. Должен признаться, я понятия не имею, как быть в этом уверенным. Однако я попытаюсь изменить способ обработки различных слоев каждого транспортного средства, не назначая _leaflet_id   -  person Sam_H_Cadman    schedule 21.06.2016
comment
Листовка хранит слои в объекте с ключами _leaflet_id. Если у вас есть исчезающие слои, я подозреваю, что что-то перезаписывается, потому что идентификатор больше не уникален.   -  person Jieter    schedule 21.06.2016
comment
Я изменил свой код, поэтому _leaflet_id больше не редактируется напрямую. Я использую некоторый ассоциативный массив, чтобы легко найти layerGroup, связанный с моим автомобилем. К сожалению, ничего не изменилось: «синие» подслои по-прежнему не отображаются при добавлении точки и появляются только при изменении масштаба. Беспокоит то, что проблемы возникают только при добавлении точки в «синий» сегмент моего пути.   -  person Sam_H_Cadman    schedule 21.06.2016
comment
Было бы проще отлаживать, если бы мы могли посмотреть на минимальный, полный и проверяемый пример   -  person Jieter    schedule 21.06.2016
comment
Мне потребовалось некоторое время, но я обновил свой вопрос ссылкой GitHub на пример, который должен соответствовать тому, что вы просите.   -  person Sam_H_Cadman    schedule 22.06.2016


Ответы (2)


Я все еще вижу multi_polyline._leaflet_id = id; в вашем примере.. почему вы не используете L.Util.setOptions для обозначения своих внутренних идентификаторов (идентификатор автомобиля и т. д.)?

person snkashis    schedule 21.06.2016
comment
Когда я получил этот код, он был сделан таким образом, и я не знал о L.Util.setOptions. Я изменил свой код, чтобы использовать его, но проблема все еще здесь. Я обновил свой пост примером на GitHub. - person Sam_H_Cadman; 22.06.2016
comment
И есть ли конкретная причина, по которой вы не можете использовать готовый плагин для этой функции, такой как iosphere.github. io/Leaflet.hotline/demo вместо создания другой реализации? - person snkashis; 22.06.2016
comment
Я не знал о существовании этого плагина. Я попробовал. Он делает довольно хорошие вещи, но кажется мне немного тяжеловатым (карта/браузер становится очень медленным после нескольких минут отображения данных в реальном времени), и это также является источником некоторых проблем с управлением картой (например, перетаскивание карты). - person Sam_H_Cadman; 23.06.2016

Наконец я пришел к идее изменить тип слоя с транспортным средством с L.layerGroup на L.geoJson. И это сработало! Даже если я не знаю почему.

Я обновил репозиторий Git своим решением.


(Как уже было сказано в комментариях, я также перестал делать multi_polyline._leaflet_id = id; и теперь использую L.Util.setOptions(vehicleLayer, {vehicle_id: id});. Между прочим, я переименовал multi_polyline в VehicleLayer.)

person Sam_H_Cadman    schedule 23.06.2016
comment
Я немного медлил с преобразованием вашего решения во что-то, что работает (перестал работать над ним, так как заметил, что вы заставили его работать), некоторые примечания: - person Jieter; 24.06.2016
comment
L.LatLng имеет метод DistanceTo, который делает то, что делает ваша функция measure. Использование полных объектов latlng немного уменьшит беспорядок в вашем коде, потому что теперь вам нужно в 2 раза меньше переменных. - person Jieter; 24.06.2016
comment
Ваш пример был не совсем минимальным с 18 КБ кода JS, вы могли бы показать проблему, скажем, с 10 сегментами. - person Jieter; 24.06.2016
comment
Я заменил свою функцию `measure` на distanceTo. Он отлично работает, и код легче читать. Я буду иметь в виду ваш второй совет для моих следующих постов. Благодарю вас! - person Sam_H_Cadman; 24.06.2016