我正在开发一个网页应用程序,它在Leaflet地图上显示动画标记。该地图会自动缩放到第一个动画边界,然后播放动画,接着缩放到第二个动画边界并播放第二个动画,以此类推......
我的问题是OpenStreetMap瓦片加载时间有时会超过动画持续时间,因此当标记动画结束时,地图仅部分加载或甚至未加载。
由于我从一开始就知道我要缩放的所有边界,因此我想提前进行ajax调用以下载所有有用的瓦片图像(在任何动画开始之前),以确保它们在浏览器缓存中当我需要它们时可用。
我已经搜索了很多,但我找不到一种方法来从Leaflet边界获取瓦片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;
}
}
它结合了他的两个答案。当动画正在运行时,我现在能够预加载接下来要到来的瓷砖。 它工作得非常好。