扩展/覆盖 Mapbox-gl 'baselayer' loadTile

Question

类似于 Leaflet 的 guide 显示如何覆盖 L.TileLayer 的 getTileUrl 方法来代替您自己的方法（以及 L.GridLayer 的 createTile方法),

我想知道如何 extend/override Mapbox-gl 的 baselayer 切片（而不是仅使用 tile server URL 添加自定义切片）。

我只想避免 adding a layer 而是想覆盖 baselayer 本身。

我看到 this issue discussion 自定义 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
});

但是请注意，此功能是 poorly documented。

扩展/覆盖 Mapbox-gl 'baselayer' loadTile

Extend / override Mapbox-gl 'baselayer' loadTile

raster

wms

leaflet

mapbox

mapbox-gl-js