Leaflet - 获取覆盖全屏的地图

Question

在传单和地图框中，我想去掉地图上方和下方的两个灰色条，如下图所示。我的 #map DOM 元素占据全屏，并且当我放大时灰色条消失（例如，zoomLevel = 3）。因此，灰色条似乎是由于 ZoomLevel 具有给定的图块高度（以 px 为单位）而导致的，该高度小于我的屏幕。

我想保持图块相同的缩放级别，但确保图块的高度至少覆盖全屏。

这是我的地图设置代码：

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

我使用的是 Angular，屏幕尺寸为 1920 x 1080

Answer 1

听起来您需要计算地图仅显示 85\xc2\xb0N 和 85\xc2\xb0S 之间的区域的最小缩放级别。

\n\n

方法getBoundsZoom()有助于L.Map解决此问题，例如：

\n\n

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

\n\n

请注意，这是一个通用解决方案，适用于任何大小的地图容器。

\n\n

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

\n\n

（如果您想知道为什么 85\xc2\xb0N 和 85\xc2\xb0S，请阅读https://en.wikipedia.org/wiki/Web_Mercator）

\n