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

Question

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

• 实际问题

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

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

我

应该提到的另一件事是，我正在使用"传单提供者"插件，用于将图块添加到地图的简单 API。

我确实在 github 存储库上提出了一个关于我对此的经历的问题，但该问题已关闭，作者提到这确实是一个传单问题，所以我来这里获取一些传单.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();