Leaflet - 获取覆盖整个屏幕的地图

问题描述：

在传单和地图框中，我想摆脱位于地图上方的两个灰色条，如下图所示。当我放大时（例如，zoomLevel = 3），我的#map DOM元素将全屏显示，并且灰色条消失。所以灰色条看起来是由于zoomLevel具有比我的屏幕更小的瓦片的给定高度（px）而引起的。Leaflet - 获取覆盖整个屏幕的地图

我想保留相同缩放级别的瓷砖，但要确保瓷砖的高度至少覆盖整个屏幕。

这里是我的地图设置代码：

   vm.map = L.map('map', { 
        center: [35, 15], 
        zoom: 2, 
        maxZoom: 21, 
        scrollWheelZoom: true, 
        maxBounds: [ 
        [89.9, 160.9], 
        [-89.9, -160.9] 
        ], 
        zoomControl: false, 
        noWrap: true, 
        zoomAnimation: true, 
        markerZoomAnimation: true, 
       });

我使用的角度和我的屏幕尺寸为1920×1080

我设法摆脱条通过将跟随着CSS属性我#map元素：'变换：规模（1.1）'。但是，这会在我的其他代码中造成混乱，所以我正在寻找其他的东西。 – Robycool

您可以尝试使传单垂直重复地图。然而，目前官方回购协议不支持此功能（https://github.com/Leaflet/Leaflet/issues/904），因此您可能需要为此开放PR。它不应该太难做，因为它已经在X轴上实现了。 – Buddyshot

谢谢@Buddyshot。你似乎很好地跟着我，回答我所有的问题！很好的例子说明开放源代码的真棒。我将首先检查我是否可以解决现有传单包中的问题，并以其他方式实施您的解决方案。 – Robycool

答

听起来像是你需要计算的最低缩放级别该地图只显示85°N和85°S之间的区域。

的getBoundsZoom() method of L.Map有助于此，例如：

var bounds = L.latLngBounds([[85, 180],[-85, -180]]); 
var wantedZoom = map.getBoundsZoom(bounds, true); 
var center = bounds.getCenter(); 
map.setView(center, wantedZoom);

注意，这是一个通用的解决方案，并努力在地图容器的任何尺寸。

您还可以将地图的minZoom设置为该值，并使用分数缩放进行试验（请参阅zoomSnap选项）。如果您希望用户无法在绘制区域外拖动，请使用地图的maxBounds选项，如[[85, Infinity],[-85, -Infinity]]。

（如果你想知道为什么85°N，85°S，阅尽https://en.wikipedia.org/wiki/Web_Mercator）

谢谢，这似乎是一个优雅的解决方案。不过，在我的具体情况下，保持缩放级别= 2的图块非常重要，否则我的地图变得太难看了。事实上，我需要2.1左右的缩放级别，只是放大缩小级别2的图块。或者，也可以选择在给定缩放级别缩放缩放图块大小的功能。 – Robycool

正如我已经说过的，试验'zoomSnap'。尝试将'zoomSnap'设置为'0.1'和'minZoom'为'2.1'。 :-) – IvanSanchez

工程就像一个魅力。谢谢！ – Robycool

Leaflet - 获取覆盖整个屏幕的地图

相关推荐