如何为多个图块使用唯一的PNG？

Question

我想在Leaflet中使用离线地图，因此我将PNG用于图块。 我想为水使用独特的图像，因此不需要很多相同的PNG。

文件以这种方式存储 myMap / z / x / y.png 使用z缩放级别，使用x和y表示坐标。

我认为我可以轻松获得所有水砖的z，x和y。 我只想知道是否有可能告诉Leaflet，如果一个z，x和y与数组（或地图或其他东西）中的z，x和y相同的图块，则改为显示myMap / water.png。

Answer 1

如果您了解custom tilelayers in Leaflet work的用法，这很容易做到。对于这种特殊情况，您需要一个getTileUrl方法，该方法可以在满足某些条件时返回相同的图块，例如像这样：

L.TileLayer.RepeatedWater = L.TileLayer.extend({
    getTileUrl: function(coords) {

        if ( checkIfTheseCoordsAreInTheWater(coords) ) {
            return "/tiles/water.png";
        } else {
            return L.TileLayer.prototype.getTileUrl.call(this, coords);
        }
    }
});

请注意，还存在其他方法。特别是，service worker会拦截对图块的所有网络请求，检查它们的URL是否未超出范围或不可用（或其他），并在这种情况下从“默认水”图块返回缓存的响应。