在Leaflet中显示其他缩放级别的瓦片

Question

我正在尝试使用Leaflet制作离线地图。

为了节省数据，用户有一个选项可以不保存所有缩放级别。例如，用户有15和17级缩放。

现在的问题是，当用户从15级缩放到16级时，如何在从16级缩放中显示15级（或17级）图层？

另一种选择是跳过16级缩放，但也许还有其他的选择？我看了Leaflet的源代码，但是无法理解。

JSFIDDLE

更新插件的Fiddle （由Ilja Zverev提供），可以跳过某些缩放级别。

HTML

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

JAVASCIPT

var map = L.map('map').setView([52.084, 5.11], 15);
isNoZoomlevel = 16;

L.tileLayer('http://a.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a>',
    maxZoom: 18
}).addTo(map);


map.on('zoomend', function() {
    console.log("I zoomed to level " + map.getZoom());    
    if(map.getZoom() == isNoZoomlevel) {
        console.log("This offline zoomlevel does not excist");
        $("#out").html("This is no zoomlevel");
         // Howto replace the zoomlevel 16 with 17 or 15??   
    } else {
        $("#out").html("");
    }
});

CSS

#map {
    height: 250px;
}

- Johan Hoeksma

Answer 1

我为您特别制作了LimitZoom插件：只需在L.Map的zooms: [15, 17, ...]选项中指定缩放级别。

- Ilja Zverev

---

是的，它可以。感谢这个好插件。唯一的问题是，在缩放级别16上，它不显示来自第15级的瓦片。它只是跳过了缩放级别16。因此，当您只有3个缩放级别时，它会极端缩放...我要学习如何编写插件。也许我可以为您的Github做出贡献。 - Johan Hoeksma

我想做出类似这样的东西： http://jsfiddle.net/zoutepopcorn/7a3xe/17/ - Johan Hoeksma

你很幸运，因为我现在正处于实验心情 :) 请查看Leaflet.ContinuousZoom插件。里面有一个演示链接。 - Ilja Zverev

太棒了！！！那我必须要在我的移动应用上尝试使用离线瓦片。我认为它会奏效，我可以接受这个答案。非常感谢。 - Johan Hoeksma

Answer 2

根据您提供的示例，这对我很有效

var prevZoom = 15;
map.on('zoomend', function() {

    if(map.getZoom() == isNoZoomlevel) {

        if(map.getZoom() > prevZoom) {
            map.setZoom(map.getZoom() + 1); // force zoomIn
        }
        if(map.getZoom() < prevZoom) {
            map.setZoom(map.getZoom() - 1); // force zoomOut
        }
    } 
    prevZoom = map.getZoom();
});

- YaFred