小编Jul*_*n V的帖子

我正在开发一个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 + …