maps - 在传单 map 中添加额外的缩放级别

Question

我正在使用 leaflet用我自己的图块创建一张照片 map ，它按预期工作。

我试图找出如何防止缩放跟随此 Quadtree类型模式:

缩放级别 0 - 整个 map 宽度 = 256px；

缩放级别 1 - 整个 map 宽度 = 512px；

缩放级别 2 - 整个 map 宽度 = 1024px；

等等...

我希望能够放大 25% 或 100px 的增量。

100px 增量的示例:

缩放级别 0 - 整个 map 宽度 = 200px；

缩放级别 1 - 整个 map 宽度 = 300px；

缩放级别 2 - 整个 map 宽度 = 400px；

等等...

题:
这样做的逻辑是什么？如果有可能吗？

我想要这样做的原因是我的照片 map (它不像普通 map 那样包裹)可以更多 responsive并很好地适应用户的屏幕尺寸。

我演示了我的问题，可以看到 here

Answer 1

简短的回答是，您只能显示具有预渲染图块的缩放级别。 Leaflet 不会为您创建中间缩放级别。

长的答案是，为了使用这样做，您需要定义自己的 CRS 比例方法并将其传递给您的 map ，例如:

L.CRS.CustomZoom = L.extend({}, L.CRS.Simple, {
    scale: function (zoom) {
        // This method should return the tile grid size
        // (which is always square) for a specific zoom
        // We want 0 = 200px = 2 tiles @ 100x100px,
        // 1 = 300px = 3 tiles @ 100x100px, etc.
        // Ie.: (200 + zoom*100)/100 => 2 + zoom

        return 2 + zoom;
    }
});

var map = L.map('map', { crs: L.CRS.CustomZoom }).setView([0, 0], 0);

在这个例子中，我扩展了 L.CRS.Simple ，但您当然可以从您喜欢的 API 扩展任何 CRS，甚至可以从头开始创建自己的 CRS。

使用导致 map 像素大小不是图块大小倍数的缩放因子，意味着您的右/下边缘图块只会部分填充 map 数据。这可以通过使此类图块的非 map 部分 100% 透明(或与背景颜色相同)来解决。

然而，在我看来，将 tilesize 设置为匹配最小公分母是一个更好的主意，在这种情况下为 100px。请记住使用 tileSize 反射(reflect)这一点。选项在您的瓷砖层。而且，当然，您需要将图像重新渲染为 100x100 像素的图块，而不是您当前使用的 256x256 的图块。

一个警告，当前版本的 LeafletJS (0.5) 有一个错误，导致自定义 scale() 方法无法工作，因为 TileLayer 类被硬编码为使用 2 次幂缩放缩放。但是，您需要做的更改很小，希望这将在 Leaflet 的 future 版本中得到解决。只需更改 TileLayer._getWrapTileNum()从:

_getWrapTileNum: function () {
    // TODO refactor, limit is not valid for non-standard projections
    return Math.pow(2, this._getZoomForUrl());
},

到:

_getWrapTileNum: function () {
    return this._map.options.crs.scale(this._getZoomForUrl());
},