Passen Sie Karte an, um Welt immer zu zeigen

Question

Gerade jetzt, was ich versuche zu tun ist, die Karte auf der Bildschirmgröße herein und heraus zu zoomen, damit Sie im Grunde immer jedes Stück Land in der Welt sehen können. Ich mache mir keine Sorgen um die sich wiederholende Welt, aber ich möchte sie im Idealfall an der Westküste Afrikas zentrieren, wie eine typische Karte.

Ich habe etwas, das wie folgt aussieht:

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; 

Das finde ich wirklich Hacky zu sein, und es funktioniert, wenn ich das versuchen würde, und auf einem 1920x1080 des ganzen Weg hinunter zu einem kleinen 1024x768, aber ich Ich habe in Leaflet nichts gesehen, was mir erlauben würde, dies zu tun. Eine Idee, die ich hatte, war ein unsichtbares Merkmal Gruppe zu erstellen, die im Wesentlichen einen Umfang von Datumsgrenze zu Datumsgrenze erstellt und verwenden .getBounds() wie folgt aus: Centering Leaflet map with getbounds and related issues

Hat jemand eine bessere Lösung?

Answer 1

Leaflet bietet eine fitWorld() method, um genau dies zu tun.

Sie würden dies verwenden, indem Sie map.fitWorld(); aufrufen, und hier ist ein full example.

Answer 2

Bitte beachten Sie, dass fitWorldzoomSnap berücksichtigt, so dass, wenn Sie den Standardwert von 1 verwenden und fitZoom auf Resize aufrufen, wird die Karte wirklich nicht passen gut in vielen Situationen. Verringern Sie zoomSnap auf einen Wert, der für Sie in Ordnung ist. Ich empfehle auch mit diesem Ansatz animate auf false:

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