传单-获取覆盖全屏的地图 [英] 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,
                });

我使用的是角度显示器，屏幕尺寸为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.

L.Map 的 getBoundsZoom()方法有助于这个，例如:

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度和北纬85度的情况下，请务必阅读 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屋！