4

我正在开发一个图形网络应用程序，我已经决定传单可以制作一个不错的图形视图。我让它显示（有点），但我需要一种方法来强制它在用户输入新公式进行图形时更新。

我也在使用 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);
});

这有效，但在用户单击时不会刷新，事件肯定正在运行（我省略了其他更新文本显示的代码）。它显示正确，但是当用户添加一个功能来显示视图永远不会更新并且传单继续显示缓存的图像时，只有新的缩放级别或平移到从未查看过的区域会导致它更新图块。我的问题是：如何强制传单完全重新加载所有内容并删除并重新加载所有图像？

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

4

2 回答 2

13

我找到了答案。尽管没有缓存标头，但我的浏览器仍在缓存图像。子域不是文档声称的“随机选择”，它们是使用瓦片位置的哈希生成的。所以我不得不即兴创作一种将“&RANDOM##”添加到 URL 末尾而不是子域的方法。

新代码如下所示：

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);
});

希望这对其他人有帮助。如果有更好的方法可以做到这一点，请发表评论。

于 2013-02-24T15:15:39.390 回答
6

您可以通过使用函数而不是缓存破坏器的全局函数来简化这一点。

在您的情况下，您可以删除 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);
});
于 2016-02-12T17:53:54.690 回答