javascript 如何强制传单地图重新加载所有图块，包括可见图块？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15048096/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I force a leaflet map to reload all tiles including visible ones?
提问by MatrixPeckham
I'm working on a graphing web-app and I've decided that leaflet would make a decent graph view. I have it displaying (sort of) but I need a way to force it to update when the user enters a new formula to graph.
我正在开发一个图形网络应用程序，并且我已经决定该传单可以制作一个不错的图形视图。我让它显示（有点）但我需要一种方法来强制它在用户输入新公式进行绘图时进行更新。
I'm using JQuery as well, but that shouldn't matter. Here is the relevant code:
我也在使用 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);
});
This works but won't refresh when the user clicks, the event is definitely running (I've omitted other code that updates a text display). It displays properly, but when the user adds a function to display the view never updates and leaflet continues to display cached images, only a new zoom level or panning to an area never before viewed causes it to update the tiles. The question I have is: How do I force leaflet to completely reload everything and drop and reload all the images?
这有效但不会在用户单击时刷新，事件肯定正在运行（我省略了更新文本显示的其他代码）。它显示正确，但是当用户添加显示视图的功能时，永远不会更新并且传单继续显示缓存的图像，只有新的缩放级别或平移到从未查看过的区域才能更新图块。我的问题是：如何强制传单完全重新加载所有内容并删除并重新加载所有图像？
EDIT added another failed attempt
编辑添加了另一个失败的尝试
回答by MatrixPeckham
I found the answer. Despite the no-cache headers my browser was caching the images anyway. The subdomains are not "randomly chosen" as the documentation claims, they are generated using a hash of the tile location. So I had to improvise a way to add "&RANDOM##" to the end of the URL instead of the subdomain.
我找到了答案。尽管没有缓存标头，我的浏览器还是在缓存图像。子域不是文档声称的“随机选择”，它们是使用图块位置的哈希生成的。所以我不得不临时添加“&RANDOM##”到 URL 的末尾而不是子域。
The new code looks like this:
新代码如下所示：
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);
});
Hope this helps someone else. Please comment if there's a better way to do this.
希望这对其他人有帮助。如果有更好的方法来做到这一点，请发表评论。
回答by cjn
You can simplify this a bit by using a function instead of the global for the cache buster.
您可以通过使用函数而不是缓存破坏器的全局来简化这一点。
In your case, you can remove the val global var and change the document ready function call to look something like:
在您的情况下，您可以删除 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);
});
