問題描述

我正在開發一個圖形網絡應用程序，我已經決定傳單可以制作一個不錯的圖形視圖.我讓它顯示(有點)，但我需要一種方法來強制它在用戶輸入新公式進行圖形時更新.

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.

我也在使用 JQuery，但這不重要.以下是相關代碼:

I'm using JQuery as well, but that shouldn't matter. Here is the relevant code:

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 添加了另一個失敗的嘗試

EDIT added another failed attempt

推薦答案

我找到了答案.盡管沒有緩存標頭，但我的瀏覽器仍在緩存圖像.子域不是文檔聲稱的隨機選擇"，它們是使用瓦片位置的哈希生成的.所以我不得不臨時想出一種方法來將&RANDOM##"添加到 URL 的末尾而不是子域.

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.

新代碼如下所示:

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.

這篇關于如何強制傳單地圖重新加載所有圖塊，包括可見圖塊?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！