传单 - 获取覆盖全屏的地图 [英] Leaflet - get a map that covers the full screen

问题描述

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

In leaflet and mapbox I would like to get rid of the two gray bars above and under the map as seen on the picture below. My #map DOM element takes the full screen and the gray bars disappear when I zoom in (e.g., zoomLevel = 3). So the gray bars seem to be caused by the fact that a zoomLevel has a given height (in px) of the tiles which is smaller than my screen.

我想保持相同缩放级别的图块，但要确保图块的高度至少覆盖整个屏幕.

I want to keep the tiles of the same zoom level but make sure the height of the tiles cover at least the full screen.

这是我的地图设置代码:

Here is my map setup code:

                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

I am using angular and my screen dimensions are 1920 x 1080

推荐答案

听起来您需要计算地图仅显示 85°N 和 85°S 之间区域的最小缩放级别.

Sounds like you need to calculate the minimum zoom level at which the map only shows the area between 85°N and 85°S.

getBoundsZoom() 方法的 getBoundsZoom() 方法>L.Map 对此有帮助，例如:

The getBoundsZoom() method of L.Map helps with this, e.g.:

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

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

Note that this is a generic solution, and works for any size of the map container.

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

You could also set the minZoom of the map to that value, and experiment with fractional zoom (see the zoomSnap option). If you want the user to be unable to drag outside the painted area, use the map's maxBounds option with something like [[85, Infinity],[-85, -Infinity]].

(如果您想知道为什么是 85°N 和 85°S，请阅读 https://en.wikipedia.org/wiki/Web_Mercator )

(And if you are wondering why 85°N and 85°S, do read https://en.wikipedia.org/wiki/Web_Mercator )

这篇关于传单 - 获取覆盖全屏的地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！