leaflet：刷新沒有緩存的tilelayer

Question

我正在將一個圖塊層加載到我的傳單地圖中，我的目標是每隔n分鍾刷新一次圖層。

我用redraw(); 方法，但我發現，數據總是來自緩存而不是來自服務器。 放大或縮小地圖后，有時會從服務器請求切片。

圖層和刷新的代碼如下所示：

var TomTom_Incident = L.tileLayer('https://api.tomtom.com/traffic/map/4/tile/incidents/s3/{z}/{x}/{y}.png?key=<APIKEY>', {
    maxZoom: 18,
    attribution: '&copy; <a href="https://www.tomtom.com/" target="_blank">TomTom</a>',
    opacity: 0.85
});

var TomTom_Incident_intervall = "";

function refresh_TomTom_Incident() {

    TomTom_Incident.redraw();

    console.log(consoleLogTime.getHours()+':'+consoleLogTime.getMinutes()+':'+consoleLogTime.getSeconds()+'TomTom_Incident Intervall active');
}


TomTom_Incident.on('add', function(e) {

    TomTom_Incident_intervall = setInterval(refresh_TomTom_Incident, 300000);

    console.log('TomTom_Incident added');
});

if (map.hasLayer(TomTom_Incident)) {
    console.log('TomTom_Incident present');

    TomTom_Incident_intervall = setInterval(refresh_TomTom_Incident, 300000);

}   else {
    console.log('TomTom_Incident not present');
}

TomTom_Incident.on('remove', function(e) {
    clearInterval(TomTom_Incident_intervall);
    console.log('Intervall active');
});

有沒有辦法在redraw();之后總是請求tile redraw(); 或者為此圖塊層禁用緩存？

鏈接到文檔： https ： //developer.tomtom.com/online-traffic/online-traffic-documentation-online-traffic-incidents/traffic-incident-tiles

提前致謝！

Answer 1

首先退房： http ： //leafletjs.com/reference-1.3.0.html#tilelayer 。 如您所見，您可以“在模板中使用自定義鍵，這些鍵將從TileLayer選項中進行評估”。

您應該做的是定義您的圖層，以便它為您的網址添加隨機自定義鍵。 這樣瀏覽器就不會將磁貼識別為先前已緩存過的。

我已經為你實現了一個關於Plunker的例子： http ：//plnkr.co/edit/Bux8bM30WtVCklOL7ndr？p = preview

這是執行部分：

 var generateRandInt = function() { return Math.floor( Math.random() * 200000 ) + 1; }; L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?{randint}, { randint: generateRandInt, maxZoom: 18, attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' + '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 'Imagery © <a href="http://mapbox.com">Mapbox</a>', id: 'mapbox.streets' }).addTo(mymap); 

當然，這將為每個tile請求生成一個新的隨機整數。 如果你想為每個重繪動作使用不同的整數，那么你可以想象做這樣的事情：

 var redrawint = Math.floor( Math.random() * 200000 ) + 1 var getRedrawInteger = function() { return redrawint; }; var incrementRedrawInteger = function() { redrawint += 1; }; L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?{randint}, { randint: getRedrawInteger, maxZoom: 18, attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' + '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 'Imagery © <a href="http://mapbox.com">Mapbox</a>', id: 'mapbox.streets' }).addTo(mymap); 

因此，您需要在每次重繪之前調用incrementRedrawInteger（）。 這實際上會使重繪的緩存無效。