Расширить / переопределить Mapbox-gl 'baselayer' loadTile

Question

Аналогично тому, как руководство Leaflet показывает, как переопределить метод getTileUrl L.TileLayer's вместо вашего собственного (и метода createTile L.GridLayer's),

Я хочузнать, как расширить / переопределить плитки базового слоя Mapbox-gl (в отличие от использования только URL сервера плиток для добавления в пользовательские плитки).

Я стараюсь избегать только добавив слой и вместо этого хочу перезаписать сам базовый слой.

Я видел обсуждение этой проблемы по настройке RasterTileSource.loadTile и задумался, было ли это правильным направлением.

Пример буклета:

L.TileLayer.Kitten = L.TileLayer.extend({
    getTileUrl: function(coords) {
        var i = Math.ceil( Math.random() * 4 );
        return "https://placekitten.com/256/256?image=" + i;
    }
});

L.tileLayer.kitten = function() {
    return new L.TileLayer.Kitten();
}

L.tileLayer.kitten().addTo(map);

Answer 1

Вы можете использовать map.transformRequest для перехвата и изменения запроса плитки.Например:

function addAuthHeaders(url, resourceType) {
    var username = 'me';
    var password = 'password';
    if (resourceType === 'Tile' && url.match('mysite')) {
        return {
            url: url,
            headers: { 'Authorization': 'Basic ' + btoa(username + ':' + password) }
        };
    }
}

var map = mapboxgl.Map({
   …,
   transformRequest: addAuthHeaders
});

Обратите внимание, что эта функция плохо документирована .