전단지 맵에 표시된 타일을 포함하여 모든 타일을 다시로드하려면 어떻게해야합니까?

Question

저는 그래프 웹 응용 프로그램에서 작업 중이며 전단지는보기 흉하지 않은 그래프보기로 결정했습니다. 나는 그것을 (일종의) 표시하고 있지만 사용자가 그래프에 새로운 수식을 입력 할 때 강제로 업데이트 할 방법이 필요합니다.

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

이 작동하지만 사용자가 클릭 이벤트 확실히 (I 텍스트 표시를 갱신 다른 코드를 생략 한) 실행중인 경우 새로 고침하지 않습니다 여기에 관련 코드입니다. 올바르게 표시되지만 표시되지 않는보기를 표시하는 기능을 사용자가 추가하고 리프레트가 캐시 된 이미지를 계속 표시하면 새로운 확대/축소 수준 또는보기 전에 표시되지 않은 영역으로의 이동만으로 타일을 업데이트합니다. 내가 가지고있는 질문은 : 전단지가 모든 것을 완전히 다시로드하고 모든 이미지를 삭제하고 다시로드하도록 강제하는 방법은 무엇입니까?

EDIT가 실패한 시도를 추가했습니다.

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

희망이 다른 사람을 도움이됩니다. 더 좋은 방법이 있다면 의견을 보내주십시오.

Answer 2

캐시 버스터에 대해 전역 대신 함수를 사용하여이 기능을 약간 단순화 할 수 있습니다.

$(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: function() { return Math.random(); } 
    }).addTo(map); 
});