javascript - 使用传单如何删除外部插件添加的旧 map 图 block ？

Question

我有一张 map ，其功能设置为在用户首选项中更改您的 map 图 block ，下面的函数负责在用户需要时动态更改 map 图 block 。

• 实际问题

当我更改 map 图 block 时，例如实时从 CartoDB 更改为 OSM，在规划 map 视口(viewport)时，您可以看到 CartoDB 中的旧图 block 。

这方面的证据/视频 https://i.gyazo.com/702e8e4875bc89c13f41a132dccb78da.mp4

我应该提到的另一件事是，我正在使用“leaflet-providers”插件，用于将图 block 添加到 map 的简单 API。

我确实在 github repo 上提出了一个关于我的经验的问题，但是这个问题已经关闭，作者提到这确实是一个传单问题，所以我来这里寻求一些 leaflet.js 的建议:)

我已经知道如何删除图 block 层，所以我需要一些更具体且与我的代码相关的东西，这是我尝试过的。

//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 中移除图层时，您将传递一个新图层到你的 map 实例。因为这个新图层还没有出现在 map 上，所以什么也没有发生。特别是，以前的 Tile Layer 仍然存在，导致您偶尔仍然可以看到它的图 block 。

只需保留对初始图层的引用，然后使用该引用将其从 map 中删除:

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

myLayer.addTo(map);

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

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