javascript - 如何在 Leaflet map 上使用 'chunky'(粗粒度)缩放级别？

Question

我将 Leaflet.js 用于基于桌面和移动浏览器的 map ，并且需要支持各种 map 图 block 服务。其中一些图 block 服务定义了粗略的缩放级别(如 1、5、10、15)，如果我请求不支持的缩放级别，该服务不会返回图 block 。 (例如，如果我在不支持缩放级别 6 时请求 service/tiles/6/x/y)。

Leaflet tile 层支持 minZoom 和 maxZoom 但我想弄清楚是否有进行粗略缩放级别的最佳实践，以及其他人是否遇到过这个。

我在 GitHub 上找到了这篇解决不支持缩放级别的平铺缩放问题的帖子:https://github.com/Leaflet/Leaflet/pull/1802

但我不确定这是否适用。 (我不确定我是否想要缩放或“补间”缩放级别……但如果这有意义并且不太困难，我愿意尝试。)

我已经开始尝试这种变得困惑的方法，因为缩放会导致更多缩放，我必须区分用户驱动的缩放和系统驱动的缩放:

// layer metadata (assumption: Levels is in ascending order of zoom)
var layerDef = { Title: 'Service lines', Levels: [10, 15, 19] };

// create Leaflet Tile Layer and show on map
var layer = L.tileLayer('://host/service/{z}/{x}/{y}');
layer.minZoom = layerDef.Levels[0];
layer.maxZoom = layerDef.Levels[layerDef.Levels-1];
layer.addTo(map);

// initialize lastZoom for coarse zoom management
var lastZoom = map.getZoom();    

var userZoom = true;

// handle supported zoom levels when zoom changes
map.on('zoomend', function (e)
{
    // get new zoom level
    var z = e.target._zoom || map.getZoom();

    if (userZoom) // assume user initiated this zoom
    {
        // is this zoom level supported?
        var zIdx = $.inArray(z, layerDef.Levels);
        if (zIdx === -1)
        {
            // zoom level is not supported; zoom out or in to supported level

            // delta: < 0 for zoom out, > 0 for zoom in
            var zDelta = z - lastZoom;
            var zLastIdx = $.inArray(lastZoom, layerDef.Levels);
            var newZoom = -1;
            if (zDelta > 0)
            {
                // user zoomed in to unsupported level.
                // zoom in to next supported level (rely on layer.maxZoom)
                newZoom = layerDef.Levels[zLastIdx + 1];
            }
            else
            {
                // user zoomed out to unsupported level.
                // zoom out to next supported level  (rely on layer.minZoom)
                newZoom = layerDef.Levels[zLastIdx - 1];
            }
            if (newZoom !== -1)
            {
                userZoom = false; // set flag

                setTimeout(function ()
                {
                    map.setZoom(newZoom); // set zoom -- seems to not work if called from within zoomend handler
                }, 100); // delay call to setZoom() to fix issue
            }
        }
    }
    else
    {
        userZoom = true; // clear flag
    }
    lastZoom = z;
});

(旁注:我希望粗缩放级别的原因很明显:在每个缩放级别创建和存储光栅图 block 可能会变得很昂贵，尤其是对于大的地理区域，尤其是在与具有自己的离线移动设备一起使用时[本地] tile 服务器、有限的无线数据计划、有限的存储容量等。例如，这可能不是您在玩具应用程序和 Google map 中遇到的情况，而是在空间和带宽有限的特定领域和移动应用程序中遇到的情况溢价。)

谢谢!

更新:我发现我在使用这段代码时遇到的问题是 map.setZoom(z) 在 中调用时无法正常工作zoomEnd 处理程序(它确实设置了缩放，但会导致灰色/不存在的图 block 显示问题，可能是因为 Leaflet 仍在缩放/缩放过程中)。解决方法是使用 setTimeout 稍微延迟对 setZoom() 的调用。但是，我仍然很好奇是否有其他人处理过这个问题，以及是否有“更好的方法”...(我更新了上面的代码以使用 setZoom 修复)

Answer 1

目前在 GitHub 上的 Leaflet 存储库中有一个提交正在审查中。它将 zoomFactor 添加到 map 的选项中。也许这就是您要找的。至少，我认为只要您可用的 tileset 的缩放级别(不知道这是否是正确的技术术语)是最低可用缩放级别的倍数，它就会起作用。

参见:https://github.com/Leaflet/Leaflet/pull/3285