Daha hızlı görüntüleme için tarayıcı önbelleğinde bilinen sınırların yapraklı döşemeleri nasıl yüklenir?

Question

Bir Broşür haritasında animasyonlu işaretçileri gösteren bir web uygulaması geliştiriyorum. Harita programatik olarak ilk animasyon sınırlarına yakınlaştırılır, sonra animasyon oynatılır, sonra harita ikinci animasyon sınırlarına yakınlaştırılır ve ikinci animasyon oynatılır ve bu şekilde devam eder ...

Sorunum, OpenStreetMap fayans yükleme süresi bazen animasyon süresini aşar, bu nedenle harita, animasyon sona erdiğinde harita kısmen yüklenir veya yüklenmez.

Baştan sona bildiğim kadarıyla, yakınlaştırdığım tüm sınırlar, tarayıcıda olduklarından emin olmak için tüm yararlı çini resimleri önceden (herhangi bir animasyon başlamadan önce) indirmek için ajax aramaları yapmak istiyorum onlara ihtiyacım olduğunda önbellek.

Çok araştırdım ve Leaflet sınırlarından fayans URL'lerinin bir listesini almanın bir yolunu bulamıyorum. Bilinen sınırlar ve yakınlaştırma düzeyi için tarayıcı önbelleğindeki döşemeleri elle yüklemek için bir yol var mı? YaFred cevaba

ÇÖZÜM teşekkürler: Burada

% 20 dolgu ile etrafında "mypolyline" fayans önceden yüklemek için koddur:

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; 
    } 
} 

Onun iki cevap birleştirir. Bir animasyon çalışırken, şimdi gelecek olan için karoları ön yükleyebiliyorum. Fevkalade çalışıyor.

1/Nasıl fayans önceden yüklemek için: birinde 2 soru

Answer 1

vardır?

Fayans görüntüleridir. Bu resimlere bir referans oluşturmanız yeterli. Bakın JavaScript Preloading Images

2/Sınırları bildiğinizde hangi döşemeleri yüklemelisiniz?

ben yardımcı olması gerektiğini Burada bir örnek pişmiş https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames

bir göz atın. https://yafred.github.io/leaflet-tests/20170311-preloading-tiles/

İlk hesaplamamakta aşağıdaki kodla sınırları her bir köşesi için ihtiyaç kiremitler: haritayı taşıdığınızda Bir sonraki yakınlaştırma seviyesinden fayans önceden yükleme oluyor sonra

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))); } 

, bu fayans hangi hesaplar sınırları içinde.