如何在 mapbox-gl-js 地图上跨不同缩放级别渲染相同的获取栅格图块

Question

我有一个简单的 Mapbox-gl-js 地图，上面渲染了一个栅格层。栅格图层使用来自外部服务器的 xyz 请求方案获取切片。我正在向 Map 对象提供一个 transformRequest 回调，以拦截对该服务器的请求并转换 url。回调采用 url，如果它是奇数，则将 z（缩放级别）向下舍入到最接近的偶数。例如，

<host>/tiles/3/5/12.png

会变成

<host>/tiles/2/5/[email protected]

或者

<host>/tiles/7/13/[email protected]

会变成

<host>/tiles/6/13/[email protected]

.

我遇到的问题是，当地图处于奇数缩放级别时，图块会消失。即使当地图处于均匀缩放级别时我正在获取的同一个图块正常呈现，也会发生这种情况。因此，如果我在地图缩放 4 上获取缩放 4 的图块，它们会呈现正常，但如果我在地图缩放 3 上获取缩放 4 的图块，它们则不会。你们中的任何一位地图大师对为什么会发生这种情况有一些见解吗？

这是我用来转换 url 的函数。它捕获进入 radar-global 的图块并转换 url 中的缩放级别。

// app.tsx
const map = new Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    transformRequest: transformRequestFunc,
});

// utils.ts
export const transformRequestFunc = (url: any, resourceType: any) => {
    if (resourceType === 'Tile' && url.indexOf('radar-global') > -1) {
        const regex = new RegExp('[0-9][0-9]?(?=(/[0-9][0-9]?/[0-9][0-9]?/(\\d{10}@2x.png)))')
        const zoom = url.match(regex)[0]
        const zoomStr = (2 * Math.round(zoom / 2)).toString()
        return {
            url: url.replace(regex,zoomStr)
        };
    }
};