主页 / coding / 问题 / 78821219
Accepted
Jose Gómez
Asked: 2024-08-01 21:25:45 +0800 CST

从已弃用的带有 tileUrlFunction 的 XYZ 迁移到带有 tileLoadFunction 的 TileImage

  • 772

最新的 Openlayers 文档指出，tileUrlFunction 在 XYZ 源中已弃用。我尝试使用 tileLoadFunction 迁移到 TileImage，但什么都没有显示。

旧版本正常运行：

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>'
    })
});

这不起作用（tileLoadFunction从未被调用）：

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

1 个回答

  1. Best Answer

    文档建议使用 ImageTile，而不是 TileImage 源。

    ImageTile 源使用loader与 DataTile 源类似的（请参阅https://openlayers.org/en/latest/examples/pmtiles-elevation.html）而不是tileLoadFunction：

    function loadImage(src) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.crossOrigin = 'anonymous';
    img.addEventListener('load', () => resolve(img));
    img.addEventListener('error', () => reject(new Error('load failed')));
    img.src = src;
  });
}

var mylayer = new TileLayer({
    source: new ImageTile({
        tileGrid: createXYZ({
            tileSize: 256, // Standard tile size for OpenStreetMap
            minZoom: 0,
            maxZoom: 19, // OpenStreetMap supports zoom levels 0-19
        }),
        loader: async function (z, x, y) {
            console.log("loader invoked");
            const zfactor = Math.pow(2, z);
            const url = "https://tile.openstreetmap.org/" + z + "/" + x % zfactor + "/" + y + ".png";
            const image = await loadImage(url);
            return image;
        },
        attributions: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>'
    }),
});

    https://jsfiddle.net/yt93g5za/1/

    • 1

相关问题