Any other maplibre-gl-js plugins to support EPSG: 4326 tiles？

[fyuanz]

Usually, the tile splitting method has 0 levels and 2 tiles.
You can see this example of openlayers: https://openlayers.vip/examples/vector-tiles-4326.html it sets a coordinate system parameter projection: 'EPSG: 4326'.

Are there any other maplibre-gl-js plugins to support EPSG: 4326 tiles？
Or, maplibre-gl-js support EPSG: 4326 tiles?

[HarelM]

Can you clarify the question please?
Generally speaking, maplibre only supports web mercator, but you can use addProtocol to convert data from one projection to another in the client side, or have that done in the server side...

[fyuanz]

I don't know how to express it because I'm just starting out with map development. The expected effect is a demo of Openlayer, this is significantly different from the standard web Mercator.
https://openlayers.vip/examples/vector-tiles-4326.html

I would like to use the official Raster tile service provided by China's "天地图".
I don't know how to handle this kind of projection

[HarelM]

The example is using maptiler style json, which is supported in maplibre without any additional configurations.
I don't know what the official raster tile service provided by China's "天地图" address is or what it supports.
You can check out the following documentation which has a few examples:
https://maplibre.org/maplibre-gl-js/docs/API/classes/RasterTileSource/

[acalcutt]

Maybe you could try something like this with addprotocol, if you needed to convert the EPSG:3857 into EPSG:4326 tile coordinates. note this is untested because I don't have a source in that format, but maybe something like

maplibregl.addProtocol('EPSG4326', async (params, abortController) => {

    const templateUrl = params.url.replace('EPSG4326://', '');
    const urlParts = templateUrl.match(/\/(\d+)\/(\d+)\/(\d+)/);

    if (!urlParts || urlParts.length < 4) {
        throw new Error('Invalid tile URL format');
    }

    const z = parseInt(urlParts[1]);
    const x = parseInt(urlParts[2]);
    const y = parseInt(urlParts[3]);
    const baseUrl = templateUrl.substring(0, templateUrl.indexOf(`/${z}`));

    // --- Projection Conversion ---

    const n = Math.pow(2, z);

    // First, convert EPSG:3857 tiles to Lat/Lon
    const x_mercator = (x / n) * 40075016.68557849 - 20037508.342789244;
    const y_mercator = 20037508.342789244 - (y / n) * 40075016.68557849;

    const lon = x_mercator * 180 / 20037508.342789244;
    const lat = Math.atan(Math.sinh(y_mercator / 20037508.342789244 * Math.PI)) * 180 / Math.PI;

    // --- Convert Lat/Lon to EPSG:4326 Tile Indices ---

    // The following formulas are for a global EPSG:4326 tiling scheme.
    const x_tile_epsg4326 = Math.floor((lon + 180) / 360 * n);
    const y_tile_epsg4326 = Math.floor((1 - Math.log(Math.tan(lat * Math.PI / 180) + 1 / Math.cos(lat * Math.PI / 180)) / Math.PI) * n / 2);

    // --- Fetching the Tile ---

    const finalUrl = `${baseUrl}/${z}/${x_tile_epsg4326}/${y_tile_epsg4326}.webp`;

    try {
        const response = await fetch(finalUrl);

        if (!response.ok) {
            throw new Error(`Tile fetch error: ${response.statusText}`);
        }

        const data = await response.arrayBuffer();
        return {
            data: data
        };
    } catch (error) {
        throw new Error(`Tile fetch error: ${error.message}`);
    }
});

Then using it as a source with something like

    map.addSource('RasterSource', {
        'type': 'raster',
        'tiles': ['EPSG4326://https://your-epsg4326-server.com/{z}/{x}/{y}.webp'],
        'minzoom': 0,
        'maxzoom': 16
    });