Question

我在我的应用程序中使用Leaflet，我需要放大超过18个级别（我认为19或20就够了）。但是当我缩放超过18个级别时，地图图像会消失，只留下一个灰色的平面。

这是html：

<div id="map"></div>

这是js：

var options = {
    maxZoom: 19,
    minZoom: 18
};

$timeout(function() {
    $scope.map = L.map('map', options).setView([38.62276209666611, 34.70849695797369], 18);

    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://www.example.com/">Example</a>'
    }).addTo($scope.map);

    $scope.map.dragging.disable();
});

我已经尝试过这些：

map.options.minZoom = 18;
map.options.maxZoom = 19;

maxNativeZoom。

Answer 1

maxNativeZoom是L.TileLayer的选项，不是L.Map的选项。这是properly documented in the Leaflet reference。

See a working example

Answer 2

同时将maxZoom设为tileLayer

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://www.example.com/">Example</a>',
    maxZoom: 20
}).addTo($scope.map);

Answer 3

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://www.example.com/">Example</a>',
        maxNativeZoom:19,
        maxZoom:25
    }).addTo($scope.map);

Answer 4

这里是一个Mapbox的配置，我发现对我来说完美的缩放设置是"maxNativeZoom":19,"maxZoom":20，你可以增加maxZoom的值，但是你不能把"maxNativeZoom"的值增加到19以上因为它会显示灰色瓷砖

L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
            {"attribution": "Mapbox", "detectRetina": false, "maxNativeZoom": 19, "maxZoom": 20, "minZoom": 0, "noWrap": false, "opacity": 1, "subdomains": "abc", "tms": false})

宣传单如何增加maxZoom

4 个答案: