How do I force a leaflet map to reload all tiles including visible ones?

后端 未结 2 1897
孤街浪徒
孤街浪徒 2021-01-13 19:20

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

相关标签:
2条回答
  • 2021-01-13 19:59

    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:

    $(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);
    });
    
    0 讨论(0)
  • 2021-01-13 20:15

    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.

    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.

    0 讨论(0)
提交回复
热议问题