Question

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

我试图弄清楚如何阻止缩放遵循此Quadtree类型模式：

缩放级别0 - 整个地图宽度= 256px;
缩放级别1 - 整个地图宽度= 512px;
缩放级别2 - 整个地图宽度= 1024px;
依旧......

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

100px增量的示例：

缩放级别0 - 整个地图宽度= 200px;
缩放级别1 - 整个地图宽度= 300px;
缩放级别2 - 整个地图宽度= 400px;
依旧......

问题： 这样做的逻辑是什么？如果可能的话？

我想要这样做的原因是我的照片地图（不像普通地图那样包裹）可以更加responsive并且很好地适应用户的屏幕尺寸。

我演示了我的问题here

Answer 1

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

答案很长，为了使用这个，您需要定义自己的CRS比例方法并将其传递给地图，例如：

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。

使用缩放系数导致地图像素大小不是瓷砖大小的倍数，意味着您的右/底边切片将仅部分填充地图数据。这可以通过使这些图块的非地图部分100％透明（或与背景颜色相同）来修复。

然而，在我看来，设置tileize以匹配最小公分母（在本例中为100px）是一个更好的主意。请务必使用图块层中的tileSize选项来反映这一点。当然，您需要将图像重新渲染为100x100像素的图块，而不是当前使用的256x256图块。

有一点需要注意，当前版本的LeafletJS（0.5）有一个错误，它阻止自定义scale（）方法工作，因为TileLayer类被硬编码为使用2次幂缩放比例。但是，您需要做的改变很小，希望这将在未来的Leaflet版本中得到解决。只需更改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());
},

在Leaflet Maps中添加额外的缩放级别

1 个答案: