如何强制Leaflet地图重新加载所有瓦片，包括可见的瓦片？

Question

我正在开发一个图形网页应用程序，我决定使用leaflet作为图形视图。我已经实现了（有点）显示，但是我需要一种方法在用户输入新的图形公式时强制更新。

我也在使用JQuery，但这不重要。下面是相关代码：

function formulaChange(formula){
     //submits a request to the server to add a graph to display
     map.setView(map.getCenter(),map.getZoom(),true);//doesn't work
     //and neither does:
     //map.fire('viewreset');
     //tiles.redraw();
}

function enterHandler(event){
    if(event.keyCode==13){
        formulaChange(document.getElementById("formula").value);
    }

}

var map;
var tiles;
$(document).ready(function(){
    map=L.map('plot',{crs:L.CRS.Simple}).setView([0,0],10);
    //url is actually a servlet on the server that generates an image on the fly
    tiles = L.tileLayer('./GraphTile.png?x={x}&y={y}&z={z}&tilesize={tileSize}&{s}', 
    {
        maxZoom: 20,
        continuousWorld: true,
        tileSize: 128,
        //subdomains used as a random in the URL to prevent caching
        subdomains: 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890'
    }
    ).addTo(map);
});

这段代码可以运行，但用户点击时无法刷新，事件肯定正在运行（我省略了其他更新文本显示的代码）。它正确地显示了，但是当用户添加一个函数来显示视图时，视图永远不会更新，leaflet继续显示缓存的图像，只有新的缩放级别或者在尚未查看过的区域中平移才会导致它更新瓦片。我的问题是：我如何强制leaflet完全重新加载所有内容，并且删除并重新加载所有图像？

编辑添加了另一种失败的尝试。

- MatrixPeckham

Answer 1

我找到了答案。尽管浏览器有no-cache头部，但它仍然缓存了图片。文档中所说的子域名并不是“随机选择”的，它们是使用切片位置的哈希值生成的。因此，我不得不想出一种方法，在URL的末尾添加"&RANDOM##"而不是子域名。

新代码如下：

function enterHandler(event){
    if(event.keyCode==13){
        formulaChange(document.getElementById("formula").value);
    }
}
function formulaChange(formula){
    val.item=Math.random();
    tiles.redraw();
}
var map;
var tiles;
var val={
    item: Math.random(),
    toString: function(){
        return this.item;
    }
};
$(document).ready(function(){
    map=L.map('plot',{crs:L.CRS.Simple}).setView([0,0],10);
    tiles = L.tileLayer('./GraphTile.png?x={x}&y={y}&z={z}&tilesize={tileSize}&{test}', 
    {
        maxZoom: 20,
        continuousWorld: true,
        tileSize: 128,
        test: val
    }
    ).addTo(map);
});

希望这能帮助其他人。如果有更好的方法，请评论告诉我们。

- MatrixPeckham

Answer 2

您可以使用一个函数来简化缓存破坏器的全局变量。在您的情况下，可以删除val全局变量，并更改文档就绪函数调用，使其类似于：

$(document).ready(function(){
    map=L.map('plot',{crs:L.CRS.Simple}).setView([0,0],10);
    tiles = L.tileLayer('./GraphTile.png?x={x}&y={y}&z={z}&tilesize={tileSize}&{test}', 
    {
        maxZoom: 20,
        continuousWorld: true,
        tileSize: 128,
        test: Math.random()
    }).addTo(map);
});

- cjn

---

很好，我不知道我可以传递一个函数。 - MatrixPeckham

函数没有被调用..而是被字符串化了。Leaflet版本为1.2.0。已在L.tileLayer.wms()和L.tileLayer.wmts()上进行测试 :/ - Luckylooke

移除函数()的定义，以评估Math.random()而不是字符串化它。 - PeterS