leaflet - 如何在 Leaflet 中为磁贴请求添加自定义授权 header

Question

我正在使用 Leaflet.VectorGrid用于在传单 map 上加载 pbf 矢量切片的插件。我检索矢量切片的 API 需要传递授权 header 。在 Mapbox GL js 中，这可以通过使用 transformRequest 来解决。选项。示例:

var baseLayer = L.mapboxGL({
    accessToken: token,
    style: 'myStyle',
    transformRequest: (url, resourceType)=> {
        if(resourceType == 'Tile' && url.startsWith(TILE_SERVER_HOST)) {
            return {
                url: url,
                headers: { 'Authorization': 'Basic ' + key }
            };
        }
    }
}).addTo(leafletMap);

我怎样才能在 Leaflet 中做类似的事情来绕过我收到的 401 授权消息？

来自插件的引用向量层构造函数:

var vectorTileOptions = {
    rendererFactory: L.canvas.tile
};

var pbfLayer = L.vectorGrid.protobuf(vectorTileUrl, VectorTileOptions).addTo(leafletMap);

Answer 1

这个 Github 问题 https://github.com/Leaflet/Leaflet.VectorGrid/issues/89描述了一个 fetchOptions 属性，您可以在实例化将用作 fetch options 的图层时传递该属性至 retrieve the tiles .

你应该可以做到

var vectorTileOptions = {
    rendererFactory: L.canvas.tile,
    fetchOptions: {
        headers: { 
            Authorization: 'Basic ' + key
        }
    }
};

var pbfLayer = L.vectorGrid.protobuf(vectorTileUrl, VectorTileOptions).addTo(leafletMap);