Используя листовку, как вы можете удалить старые листы карты, добавленные внешними плагинами?

Question

У меня есть карта с набором функций для изменения листов карты в пользовательских настройках. Приведенная ниже функция отвечает за динамическое изменение листов карты, когда пользователь этого хочет.

• Актуальная проблема

Когда я изменяю тайлы карты, например, с CartoDB на OSM в режиме реального времени, при планировании области просмотра карты вы можете видеть старые тайлы из CartoDB.

Доказательства / Видео этого https://i.gyazo.com/702e8e4875bc89c13f41a132dccb78da.mp4

Еще одна вещь, которую я должен упомянуть, я использую плагин «leaflet-provider», для простого API добавления плиток на карту.

Я поднял вопрос на репозитории github о своем опыте этого, но проблема была закрыта, и автор упомянул, что это действительно была проблема с листовкой, поэтому я пришел сюда за советом leaflet.js :)

Я уже знаю, как удалить слои листов, поэтому мне нужно кое-что более конкретное и в отношении моего кода, вот что я попробовал.

    //this

    self.map.removeLayer(  L.tileLayer.provider('OpenStreetMap'))

    //this?
    //self.map.invalidateSize();

    //this??
    self.map.invalidateSize();

    let self = this;
    let mapLayer = self.mapLayer;

    if (mapLayer === 'osm') {
         L.tileLayer.provider('OpenStreetMap').addTo(self.map);
    }
    if (mapLayer === 'cartodb') {
         L.tileLayer.provider('CartoDB').addTo(self.map);
    }

    //attempt to refresh tiles?
    self.map._onResize();
    self.map.invalidateSize();

Answer 1

Случается так, что всякий раз, когда вы звоните L.tileLayer.provider('OpenStreetMap'), вы получаете новый экземпляр листового слоя листов.

Поэтому, когда вы пытаетесь удалить слой с карты с помощью map.removeLayer(L.tileLayer.provider('OpenStreetMap')), вы передаете новый слой своему экземпляру map. Поскольку этот новый слой еще не на карте, ничего не происходит. В частности, предыдущий слой листов остается на месте, что приводит к ситуации, когда вы все еще можете иногда видеть его плитки.

Просто сохраните ссылку на исходный слой и используйте эту ссылку, чтобы позже удалить ее с карты:

var myLayer = L.tileLayer.provider('OpenStreetMap');

myLayer.addTo(map);

// Later...
map.removeLayer(myLayer);

// even simpler alternative:
myLayer.remove();