如何在浏览器缓存中预加载已知边界的Leaflet图块以便更快地显示？

Question

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

我的问题是OpenStreetMap图块加载时间有时会超过动画持续时间,因此当标记动画到达结束时,地图会被部分加载甚至不加载.

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

我搜索了很多,但我找不到从Leaflet边界获取tile网址列表的方法.有没有办法在浏览器缓存中手动加载瓷砖以获得已知的边界和缩放级别？

解决方案感谢YaFred的回答:

这是使用20%填充在"mypolyline"周围预加载tile的代码:

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

一个有两个问题:

1 /如何预加载瓷砖？

瓷砖是图像.您只需要创建对这些图像的引用.看看JavaScript预加载图片

2 /当你知道边界时,你必须加载哪些瓷砖？

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

我在这里做了一个应该有用的例子.当您移动地图时,它会从下一个缩放级别预加载切片: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))); }

然后,它计算哪些瓷砖在边界内.