问题
My map takes up 100% of the screen and I show the whole world when the user loads up the map.
On first load I'm trying to show as much of the world as I can given these three conditions:
- The prime meridian at the equator is centered on the screen.
- The map is zoomed in enough where the area above 90deg latitude and below 90deg longitude is not shown.
- The map is zoomed in enough where the area on the left and the right of the map is not duplicated. Basically no two or more Alaskas or Russias.
Currently I'm using .fitBounds([[-90, -180], [90, 180]]); but that only meets my first criteria. What would be the best approach to this?
回答1:
Leverage the map's maxZoom option, together with a call to the getBoundsZoom method.
Namely, you want to calculate the zoom level at which a rectangle spanning [-85.0511, -180], [85.0511, 180]] covers more than the whole map viewport, then set the map's maxZoom to that value.
Note that the maximum and minimum latitudes are +/-85.0511 and not +/-90; the Leaflet default map projection (EPSG:3857 AKA web mercator) is a cylindrical projection which spans vertically to infinity and has no representation of the poles.
Note as well that the output of getBoundsZoom varies depending on the values of the map's zoomSnap option and the size of the map container. You might want to re-calculate the map's maxZoom whenever it's resized.
tl;dr: map.setMaxZoom(map.getBoundsZoom([-85.0511, -180], [85.0511, 180]], true));.
来源：https://stackoverflow.com/questions/64074862/show-as-much-of-the-map-i-can-without-duplicating-or-showing-areas-beyond-the-ma