使用传单如何删除外部插件添加的旧地图图块？

Question

我有一张地图，其功能集可在用户首选项中更改地图图块，以下函数负责在用户需要时动态更改地图图块。

• 实际问题

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

证据/视频 https://i.gyazo.com/702e8e4875bc89c13f41a132dccb78da.mp4

我应该提到的另一件事是，我正在使用“leaflet-providers”插件，用于将图块添加到地图的简单 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')，您都会获得一个Leaflet Tile Layer 的新实例。

因此，当您尝试使用 从地图中删除图层时map.removeLayer(L.tileLayer.provider('OpenStreetMap'))，您会将一个新图层传递给您的map实例。因为这个新图层尚未出现在地图上，所以什么也没有发生。特别是之前的Tile Layer仍然存在，导致偶尔仍然可以看到它的Tile的情况。

只需保留对初始图层的引用，然后使用该引用将其从地图中删除即可：

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

myLayer.addTo(map);

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

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