Maplibre GL JS中处理Mapbox样式精灵图2x缩放问题的解决方案

在使用Maplibre GL JS结合Mapbox样式时，开发者可能会遇到一个常见问题：当在高分辨率屏幕上加载精灵图(sprite)时，系统会自动请求2x版本的资源，而Mapbox官方样式可能并不提供这些高分辨率资源，导致404错误。

问题背景

Maplibre GL JS会根据设备像素比自动选择请求1x或2x版本的精灵图资源。对于Mapbox官方样式，其精灵图资源通常只提供1x版本。当运行在高DPI设备上时，Maplibre会尝试请求带有@2x后缀的URL，如mapbox://sprites/mapbox/streets-v12@2x，这会被转换为https://api.mapbox.com/styles/v1/mapbox/streets-v12@2x/sprite.json，而实际上Mapbox只提供https://api.mapbox.com/styles/v1/mapbox/streets-v12/sprite.json。

解决方案分析

问题的根源在于URL重写逻辑没有正确处理@2x后缀。标准的URL转换器会将整个路径简单地按点号分割，导致@2x被错误地放置在路径中。

正确的解决方案是修改URL转换逻辑，确保@2x后缀被正确识别和处理。具体实现如下：

1. 首先解析原始URL，获取路径部分
2. 将路径按点号分割为两部分
3. 检查第一部分是否包含@符号
4. 如果包含，则分离出基础路径和分辨率后缀
5. 重新构建正确的请求路径

实现代码示例

function normalizeSpriteURL(url, format, extension, accessToken) {
    const urlObject = parseUrl(url);
    const path = urlObject.path.split('.');

    let path1 = path[0];
    let path2 = path[1];
    let suffix = '';

    if (path1.includes('@')) {
        [path1, suffix] = path1.split('@');
        suffix = '@' + suffix;
    }

    urlObject.path = `/styles/v1${path1}/sprite${suffix}.${path2}`;
    return formatUrl(urlObject, accessToken);
}

技术要点

1. URL解析：使用parseUrl函数解析原始URL，获取路径、查询参数等组成部分
2. 路径分割：将路径按点号分割，分离出样式名称和文件扩展名
3. 分辨率后缀处理：检查并分离可能存在的@2x等分辨率标识
4. 路径重构：按照Mapbox API的规范重新构建请求路径

注意事项

1. 此解决方案适用于使用Mapbox官方样式但通过Maplibre GL JS渲染的场景
2. 如果确实需要高分辨率精灵图，应考虑自行生成2x版本的资源
3. 此修改不会影响1x设备的正常请求流程
4. 对于自定义样式，建议确保同时提供1x和2x版本的精灵图资源

通过这种解决方案，开发者可以确保在高DPI设备上也能正确加载Mapbox官方样式的精灵图资源，避免404错误，同时保持地图渲染的质量和性能。