如何为Azure Maps VectorTileSource请求指定Bearer Token授权头？

要给自有服务器的矢量瓦片请求添加动态Bearer Token授权头，核心是利用Azure Maps SDK的transformRequest配置项，它能拦截并修改SDK发起的所有HTTP请求。

实现步骤 #

1. 初始化地图时配置请求拦截回调
   在创建atlas.Map实例时，通过transformRequest参数添加自定义逻辑，判断请求是否指向你的瓦片服务器，若符合则注入Authorization头。

2. 正常创建VectorTileSource
   按照常规方式配置自定义瓦片的URL模板，无需额外修改，拦截器会自动处理请求头。

代码示例 #

// 初始化地图，添加请求拦截逻辑
const map = new atlas.Map('map', {
    center: [-122.33, 47.6],
    zoom: 12,
    authOptions: {
        authType: 'subscriptionKey',
        subscriptionKey: 'YOUR_AZURE_MAPS_SUBSCRIPTION_KEY'
    },
    transformRequest: (url, resourceType) => {
        // 仅处理自定义瓦片服务器的请求
        const customTileServerBaseUrl = 'https://your-custom-tile-server.com/';
        if (url.startsWith(customTileServerBaseUrl)) {
            // 获取动态Bearer Token（替换为你的Token获取逻辑，比如从后端接口/本地缓存读取）
            const bearerToken = getDynamicBearerToken();
            
            return {
                url: url,
                headers: {
                    'Authorization': `Bearer ${bearerToken}`
                }
            };
        }
        // 其他请求保持默认处理逻辑
        return { url: url };
    }
});

// 创建自定义矢量瓦片源
const customTileSource = new atlas.source.VectorTileSource('custom-tile-source', {
    tiles: ['https://your-custom-tile-server.com/tiles/{z}/{x}/{y}.mvt']
});

// 将瓦片源添加到地图
map.sources.add(customTileSource);

// 创建并添加瓦片图层
const customTileLayer = new atlas.layer.VectorTileLayer('custom-tile-layer', 'custom-tile-source', {
    sourceLayer: 'your-source-layer-name', // 替换为瓦片内的源图层名称
    fillColor: '#2ecc71',
    fillOpacity: 0.6,
    lineColor: '#27ae60',
    lineWidth: 1
});

map.layers.add(customTileLayer);

// 示例：动态获取Token的函数（需根据实际业务实现）
function getDynamicBearerToken() {
    // 这里可以是从后端接口请求、读取本地存储的有效Token，或刷新过期Token的逻辑
    return 'your-dynamic-bearer-token-value';
}

关键注意事项 #

• 请求范围控制：必须通过URL前缀判断来限定拦截范围，避免修改Azure Maps自身的资源请求（如底图瓦片、地理编码API等），防止地图功能异常。
• Token生命周期管理：如果Token有过期时间，需在getDynamicBearerToken中添加有效性检查和自动刷新逻辑，确保每次请求携带的Token都是有效的。
• CORS配置：确保你的自定义瓦片服务器已配置CORS规则，允许Azure Maps SDK所在域名的跨域请求，否则会出现请求失败的情况。

内容的提问来源于stack exchange，提问作者Mark