Leaflet

Question

在 leaflet 和 mapbox 中，我想去掉地图上方和下方的两个灰色条，如下图所示。当我放大时（例如，zoomLevel = 3），我的#map DOM 元素占据全屏并且灰色条消失。所以灰色条似乎是由于 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°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）

Leaflet - 获取覆盖全屏的地图

Leaflet - get a map that covers the full screen

angularjs

angular-leaflet-directive