Question

类似于Leaflet的guide展示了如何替代L.TileLayer的getTileUrl方法（以及L.GridLayer的createTile方法）

我想知道如何扩展/覆盖Mapbox-gl的基本图层图块（与仅使用tile server URL添加自定义图块相反）。

我希望避免仅使用adding a layer，而要覆盖基本层本身。

我看到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

1 个答案: