时间戳

首页 > 解决方案 > 如何在 Leaflet 中为磁贴请求添加自定义授权标头

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

问题描述

我正在使用Leaflet.VectorGrid插件在传单地图上加载 pbf 矢量图块。我检索矢量切片的 API 需要传递授权标头。在 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);

标签： leafletbasic-authenticationvector-tiles

解决方案

这个 Github 问题https://github.com/Leaflet/Leaflet.VectorGrid/issues/89描述了在实例化图层时可以传递的属性，该属性将fetchOptions用作检索切片的fetch选项。

你应该能够做到

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

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

推荐阅读