Dopasuj mapę, aby pokazać świat zawsze

Question

W tej chwili staram się powiększać i zmniejszać mapę w zależności od rozmiaru ekranu, dzięki czemu zawsze możesz zobaczyć praktycznie każdy kawałek ziemi na świecie. Nie martwię się o powtarzający się świat, ale najlepiej chcę, aby był skoncentrowany w zasadzie na zachodnim wybrzeżu Afryki, jak na typowej mapie.

mam coś, co wygląda następująco:

function fitMap() { 
    if ($) { 
     var height = $(window).height(); 
     var width = $(window).width(); 
     //Put map into full screen 
     $('#map').css({position: "absolute", top: "0", left: "0", right: "0", bottom:"0"}); 

     if ((height < 586 && width < 1095) || height < 325 || (width < 700 && height > 586)) { 
      map.setZoom(1); 
     } 
     else if (width >= 1500 && height > 900) { 
      map.setZoom(3); 
     } 
     else { 
      map.setZoom(2); 
     } 
    } 
}; 

//Fit the map more appropriately to screen sizes. 
window.onload = fitMap; 
window.onresize = fitMap; 

Uważam, że jest to naprawdę hacky i działa gdybym spróbować umieścić to na 1920x1080 całą drogę w dół do małej 1024x768 ale nie widziałem niczego w Ulotce, która pozwoliłaby mi to zrobić. Jednym z pomysłów było utworzenie niewidocznej grupy funkcji, która w zasadzie tworzy obwód od linii danych do dateline i użycie .getBounds() w ten sposób: Centering Leaflet map with getbounds and related issues

Czy ktoś ma lepsze rozwiązanie?

Answer 1

Ulotka zawiera numer fitWorld() method, aby to zrobić.

Można tego użyć, dzwoniąc pod numer map.fitWorld();, a tutaj jest full example.

Answer 2

Należy pamiętać, że fitWorld trwa zoomSnap pod uwagę, więc jeśli używasz domyślnej wartości 1 i nazywają fitZoom na zmianę rozmiaru, że mapa nie naprawdę dobrze pasuje w wielu sytuacjach. Zmniejsz zoomSnap do wartości, która jest dla Ciebie w porządku. Polecam również ustawienie animate false z tego podejścia:

map.on('resize',() => { 
    map.fitWorld({ animate: false }); 
});