6

我使用传单创建带有我自己的瓷砖的照片地图，它按预期工作。

我试图弄清楚如何防止缩放遵循这种四叉树类型模式：

  • 缩放级别 0 - 整个地图宽度 = 256px；
  • 缩放级别 1 - 整个地图宽度 = 512px；
  • 缩放级别 2 - 整个地图宽度 = 1024 像素；
  • 等等...

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

100px 增量的示例：

  • 缩放级别 0 - 整个地图宽度 = 200px；
  • 缩放级别 1 - 整个地图宽度 = 300px；
  • 缩放级别 2 - 整个地图宽度 = 400 像素；
  • 等等...

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

我想要这样做的原因是为了让我的照片贴图（它不像法线贴图那样包裹）可以更快地响应并很好地适应用户的屏幕尺寸。

我演示了我的问题，可以在这里看到

4

1 回答 1

8

简短的回答是，您只能显示具有预渲染图块的缩放级别。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% 透明（或与背景颜色相同）来解决。

但是，在我看来，将切片大小设置为匹配最小公分母（在本例中为 100 像素）是一个更好的主意。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());
},
于 2013-01-28T18:11:52.257 回答