Как использовать уникальный PNG для нескольких плиток?

Question

Я хочу использовать автономную карту с Leaflet, поэтому я использую PNG для своих плиток. Я хочу использовать уникальное изображение для воды, поэтому мне не нужно иметь много идентичных PNG.

Файлы хранятся таким образом MyMap / г / х / y.png С z уровень масштабирования, x и y координата.

Я думаю, я могу легко получить z, x и y всех водных плиток. Мне просто нужно знать, можно ли сказать Leaflet, что если плитка с такими же z, x и y, что и в массиве (или картой, или чем-то еще), вместо этого отображает myMap / water.png.

Answer 1

Это легко сделать, если вы понимаете, как пользовательские слои листов в Leaflet работают .В этом конкретном случае вам понадобится метод 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);
        }
    }
});

Помните, что существуют другие подходы.В частности, работник службы для перехвата всех сетевых запросов к плиткам, проверки, не является ли их URL-адрес неограниченным или недоступным (или каким-либо другим), и возврата кэшированного ответа из плитки «воды по умолчанию» вэтот случай.