Листовка - маркер не перестает двигаться даже после удаления прослушивателя событий

Question

Я использую плагин leaflet-realtime для визуализации траектории. Я воспроизвел код следа и попытался удалить след и маркер, добавив realtime.removeEventListener(); Однако маркер все еще движется. Я знаю, что могу удалить маркер, добавив realtime.removeLayer(marker);, но как насчет следа?

Я пытался удалить его, добавив trailCoords = [];, но он тоже не работает. Это немного измененный код trail.js

    var trailCoords;
    var map = L.map('map'),
        trail = {
            type: 'Feature',
            properties: {
                id: 1
            },
            geometry: {
                type: 'LineString',
                coordinates: []
            }
        },
        realtime = L.realtime(function(success, error) {
            fetch('https://wanderdrone.appspot.com/')
            .then(function(response) { return response.json(); })
            .then(function(data) {
                trailCoords = trail.geometry.coordinates;
                trailCoords.push(data.geometry.coordinates);
                trailCoords.splice(0, Math.max(0, trailCoords.length - 5));
                success({
                    type: 'FeatureCollection',
                    features: [data, trail]
                });
            })
            .catch(error);
        }, {
            interval: 250
        }).addTo(map);

    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    var i = 0;
    realtime.on('update', function() {
        console.log(i)
        i++
        map.fitBounds(realtime.getBounds(), {maxZoom: 3});
        if (i === 3)
        {
            trailCoords = [];
            realtime.removeEventListener();
        }

    });

. Мой вопрос в том, какая часть кода выполняется, если я останавливаю прослушиватель событий, и как я могу удалить след?

Answer 1

Я покопался, и вот что я нашел. Если вы исследуете объект realtime, маркер и след являются свойствами этого объекта в соответствии со свойством _featureLayers. Вам нужно определить id этих слоев как часть properties Geo JSON:

var trail = {
  type: 'Feature',
  properties: {
      id: 'trail'
  },
  geometry: {
      type: 'LineString',
      coordinates: []
  }
}

Как видите, я изменил 1 на trail. Теперь вы можете захватить свой след и удалить его, позвонив по номеру realtime.getLayer('trail').remove(). Мне не очень повезло с работой removeEventListener, но в реальном времени есть функция stop, которая, похоже, работает. Это будет выглядеть так:

var i = 0;
realtime.on('update', function() {

    console.log('i', i)
    i++
    map.fitBounds(realtime.getBounds(), {maxZoom: 3});
    if (i === 3) {
        trailCoords = [];
        realtime.stop();
        realtime.getLayer('trail').remove()
    }

});

По какой-то причине имя самого маркера id по умолчанию не определено. Вы могли бы вызвать realtime.getLayer('undefined').remove(), чтобы удалить его, но это очень хакерский метод и предполагает, что других слоев с идентификатором undefined не существует. Может быть какой-то способ определить это id для производителя по умолчанию, но я оставлю это вам.

Рабочие коды и ящик

Answer 2

Чтобы удалить функции, проще всего просто больше не предоставлять эти функции для обратного вызова success.

Итак, чтобы удалить след, вы должны добавить какое-то условие, при котором след больше не должен быть visible и вызовите success следующим образом:

                success({
                    type: 'FeatureCollection',
                    features: [data, trail]
                });

Аналогично, если вы хотите удалить маркер, вызовите успех с пустым features:

                success({
                    type: 'FeatureCollection',
                    features: []
                });