Question

我试图用Leaflet制作离线地图。

对于数据保存，用户可以选择不保存所有缩放级别。例如，用户具有缩放级别： - 15和17。

现在的问题是，当用户从第15级放大到16级时。

如何在16？

的缩放上显示15级（或17级）

替代方法是跳过缩放级别16，但也许还有另一种选择？我从传单中查看了源代码，但我无法弄明白。

JSFIDDLE

带插件的

Update 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;
}

Answer 1

我特意为您制作LimitZoom plugin：只需在zooms: [15, 17, ...]的{{1}}选项中指定缩放级别。

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();
});

在Leaflet中显示其他zoomlevel的瓷砖

2 个答案: