caching - 如何在浏览器缓存中预加载已知边界的传单图 block 以加快显示速度？

Question

我正在开发一个 Web 应用程序，它在传单 map 上显示动画标记。 map 以编程方式缩放到第一个动画边界，然后播放动画，然后将 map 缩放到第二个动画边界并播放第二个动画，依此类推...

我的问题是 OpenStreetMap 图块加载时间有时会超过动画持续时间，因此当标记动画结束时， map 会部分加载甚至未加载。

正如我从一开始就知道我要放大的所有边界，我想进行 ajax 调用以提前(在任何动画开始之前)下载所有有用的图块图像，以确保它们在我需要时在浏览器缓存中他们。

我搜索了很多，但没有找到从传单边界获取瓷砖 URL 列表的方法。有没有办法在浏览器缓存中手动加载图块以获得已知的边界和缩放级别？

解决方案 感谢 YaFred 的回答:

以下是使用 20% 填充预加载“mypolyline”周围的图块的代码:

var bounds = mypolyline.getBounds().pad(0.2);
var zoom = map.getBoundsZoom(bounds);
var east = bounds.getEast();
var west = bounds.getWest();
var north = bounds.getNorth();
var south = bounds.getSouth();

var dataEast = long2tile(east, zoom);
var dataWest = long2tile(west, zoom);
var dataNorth = lat2tile(north, zoom);
var dataSouth = lat2tile(south, zoom);

for(var y = dataNorth; y < dataSouth + 1; y++) {
    for(var x = dataWest; x < dataEast + 1; x++) {
        var url = 'https://a.tile.openstreetmap.fr/osmfr/' + zoom + '/' + x + '/' + y + '.png';
        var img=new Image();
        img.src=url;
    }
}

它结合了他的两个答案。当动画运行时，我现在可以为下一个预加载图块。它非常有效。

Answer 1

一共有2个问题:

1/如何预加载瓷砖？

瓷砖是图像。您只需要创建对这些图像的引用。
看 JavaScript Preloading Images

2/知道边界后必须加载哪些图块？

看看https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames

我在这里做了一个应该有帮助的例子。当您移动 map 时，它会从下一个缩放级别预加载图块:https://yafred.github.io/leaflet-tests/20170311-preloading-tiles/

它首先使用以下代码计算边界的每个角需要哪些图块:

function long2tile(lon,zoom) { return (Math.floor((lon+180)/360*Math.pow(2,zoom))); }
function lat2tile(lat,zoom)  { return (Math.floor((1-Math.log(Math.tan(lat*Math.PI/180) + 1/Math.cos(lat*Math.PI/180))/Math.PI)/2 *Math.pow(2,zoom))); }

然后，它计算哪些图块在边界内。