Question

我有一张地图，该地图的功能集可以根据用户的喜好更改您的地图图块，下面的功能负责在用户需要时动态更改地图图块。

实际问题

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

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

我还要提到的另一件事是，我使用“ leaflet-providers”插件，用于将图块添加到地图的简单API。

我确实在github仓库上提出了一个关于我的经验的问题，但是这个问题已经结案，作者提到这确实是一个传单问题，所以我来这里是关于leaflet.js的建议:) < / p>

我已经知道如何删除图块图层，因此我需要一些更具体的内容，并且与我的代码有关，这是我尝试过的。

    //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的 new 实例。

因此，当您尝试使用map.removeLayer(L.tileLayer.provider('OpenStreetMap'))从地图上删除图层时，会将 new 图层传递到您的map实例。因为此新图层尚未在地图上，所以什么也不会发生。特别是，上一个拼贴图层保留在原处，导致您仍然偶尔可以看到其拼贴的情况。

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

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

myLayer.addTo(map);

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

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

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

1 个答案: