使用傳單如何刪除外部插件添加的舊地圖圖塊？

Question

我有一張地圖，其功能集可以在用戶首選項中更改地圖圖塊，以下函數負責在用戶需要時動態更改地圖圖塊。

• 實際問題

當我更改地圖圖塊時，例如從 CartoDB 實時更改為 OSM，在規划地圖視口時，您可以看到來自 CartoDB 的舊圖塊。

證據/視頻https://i.gyazo.com/702e8e4875bc89c13f41a132dccb78da.mp4

我應該提到的另一件事是，我正在使用“leaflet-providers”插件，用於將圖塊添加到地圖的簡單 API。

我確實在 github repo 上提出了一個關於我的經驗的問題，但該問題已關閉，作者提到這確實是一個傳單問題，所以我來這里是為了尋求一些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') ，您都會獲得一個 Leaflet Tile Layer 的新實例。

因此，當您嘗試使用map.removeLayer(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();