有效导入数百张图像的方法

Question

我们有几百个图像（图标），这些图像（图标）一旦渲染了我们的feautures。

我们使用（简化）：

map.loadImage('url', () => map.addImage('name', image as ImageBitmap)); 这与有图像一样多的HTTP请求产生，在我们的情况下是数百个HTTP请求。

还有其他方法可以导入图像以减少HTTP调用的数量吗？

我详细介绍了如何使用Sprite文件将大量图像加载到MAPBOX中的详细描述。 简而言之，我的动作算法如下：

Answer 1

- - 创建一个外屏幕瓦斯，然后将加载的精灵（图像）添加到IT

    const canvas = new OffscreenCanvas(width, height);
    const ctx = canvas.getContext('2d', { willReadFrequently: true });
    ctx.drawImage(image, 0, 0);

-对于每个必需的图像，将其从画布中作为图像获取，然后将其添加到Mapbox

    const imageData = ctx.getImageData(x, y, width, height);
    map.addImage(imageId, imageData)