4

私はグラフ作成Webアプリに取り組んでおり、リーフレットで適切なグラフビューを作成することにしました。私はそれを（ある種の）表示していますが、ユーザーがグラフに新しい数式を入力したときに強制的に更新する方法が必要です。

私も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

私は答えを見つけました。キャッシュヘッダーがないにもかかわらず、私のブラウザはとにかく画像をキャッシュしていました。サブドメインは、ドキュメントで主張されているように「ランダムに選択」されるのではなく、タイルの場所のハッシュを使用して生成されます。そのため、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);
});

これが他の誰かに役立つことを願っています。これを行うためのより良い方法がある場合はコメントしてください。

于 2013-02-24T15:15:39.390 に答える
6

キャッシュバスターのグローバルの代わりに関数を使用することで、これを少し単純化できます。

あなたの場合、valグローバル変数を削除し、documentready関数呼び出しを次のように変更できます。

$(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 に答える