Início / user-1816603

Jose Gómez's questions

Martin Hope
Jose Gómez
Asked: 2024-08-01 21:25:45 +0800 CST
  • 5

A documentação mais recente do Openlayers afirma que tileUrlFunction está obsoleto na fonte XYZ. Estou tentando migrar para TileImage com tileLoadFunction, mas nada aparece.

A versão antiga está funcionando:

Number.prototype.mod = function (n) {
    return ((this%n)+n)%n;
};

var mylayer = new TileLayer({
    source: new XYZ({
        tileUrlFunction: function (tileCoord, pixelRatio, projection) {
            console.log("tileUrlFunction invoked");
            if (tileCoord === null) {
                return undefined;
            }

            var z = tileCoord[0];
            var x = tileCoord[1];
            var y = tileCoord[2];
            var zfactor = Math.pow(2, z);
            const url = "https://tile.openstreetmap.org/" + z + "/" + x.mod(zfactor) + "/" + y.mod(zfactor) + ".png";
            return url;
        },
        tileSize: 256,
        minZoom: 0,
        maxZoom: 19,
        attributions: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>'
    })
});

Isso não está funcionando (tileLoadFunction nunca é invocado):

Number.prototype.mod = function (n) {
    return ((this%n)+n)%n;
};

var mylayer = new TileLayer({
    source: new TileImage({
        tileGrid: createXYZ({
            tileSize: 256, // Standard tile size for OpenStreetMap
            minZoom: 0,
            maxZoom: 19, // OpenStreetMap supports zoom levels 0-19
        }),
        tileLoadFunction: function (imageTile, src) {
            console.log("tileLoadFunction invoked");
            const tileCoord = imageTile.getTileCoord();
            if (!tileCoord) {
                console.log("Tile coordinate is null");
                imageTile.getImage().src = ''; // Handle undefined tile coordinate
                return;
            }

            const z = tileCoord[0];
            const x = tileCoord[1];
            const y = tileCoord[2];
            const zfactor = Math.pow(2, z);
            const url = "https://tile.openstreetmap.org/" + z + "/" + x.mod(zfactor) + "/" + y.mod(zfactor) + ".png";

            console.log("Loading URL for coordinates - " + z + "," + x + "," + y + " --> " + url);
            imageTile.getImage().src = url;
        },
        attributions: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>'
    }),
});

JSFiddle: https://jsfiddle.net/yertp50n/

openlayers