leaflet - How to use a unique PNG for multiple tile?

Question

I want to use an offline map with Leaflet so I use PNG for my tiles. I want to use a unique image for the water so I don't need to have a lot of identical PNG.

The files are stored this way myMap/z/x/y.png With z the level of zoom, x and y the coordinate.

I think I can easily get the z, x and y of all the water tiles. I just need to know if it's possible to tell Leaflet that if a tile with the same z, x and y than one in the array (or map or something else), it display myMap/water.png instead.

标签： leaflet

Answer 1

This is easy to do if you understand how custom tilelayers in Leaflet work. For this particular case you'll want a getTileUrl method that returns the same tile when some condition is met, e.g. something like:

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);
        }
    }
});

Be aware that other approaches exists. In particular, a service worker to intercept all network requests to the tiles, check if their URL is not out of bounds or not available (or whatever) and return a cached response from a "default water" tile in that case.