在 HTML canvas 上显示许多高分辨率图像（地图平铺）

Question

我正在使用 three.js 来显示地球仪。起初，图像质量很差，随着用户放大，图像质量会提高。这是使用 tiling 完成的。每个图块为 256 像素 x 256 像素。对于最低的缩放，只有几块瓷砖，而对于最大的，有数千块。

问题是图像质量仍然很低，即使是在最高变焦下也是如此。我认为这是因为我正在使用 canvas。它是 2000 像素 x 1000 像素。即使我增加这个 canvas，最高质量的图像也是 92160px x 46080px，这对于 canvas 来说太大了，无法在大多数浏览器中呈现。

我可以使用什么方法来显示高质量的图块，但不会有很大的 canvas？使用 canvas 是正确的方法吗？谢谢！

Answer 1

我想出了一个办法，但我不确定这是一个好方法。对于需要显示的每个图块，我都创建了一个球体。我使用 phiStart、phiLength、thetaStart、thetaLength 使球体与地图上图块的大小相匹配。然后我创建一个 256px x 256px canvas，将图块图像放在 canvas 上，然后将 canvas 放在图块上。本质上，我将部分球体放在低分辨率球体的顶部，这是在加载页面时加载的球体。

我通过取一个完整的球体（每个变量 2*Pi）然后乘以我想要填充的球体的百分比来计算这四个变量。这是四个变量：

// `sphereCanvasWidth` is the width of the low-resolution sphere's canvas
// `canvasX` is the top left pixel of where you want to draw on the canvas
phiStart = (2 * Pi) * (canvasX / sphereCanvasWidth)
// `numPixelsTileX` is the number of pixels the canvas should cover
phiLength = (2 * Pi) * (numPixelsTileX / sphereCanvasWidth)
// `canvasY` is the bottom left pixel of where you want to draw on the canvas
thetaStart = (2 * Pi) * (canvasY / sphereCanvasWidth)
// `numPixelsTileY` is the number of pixels the canvas should cover
phiLength = (2 * Pi) * (numPixelsTileY / sphereCanvasWidth)

例如，如果我想填充球体左上角的 1/4，则为：

phiStart = 0
phiLength = (2 * Pi) * .25
thetaStart = 0
thetaLength = (2 * Pi) * .25

three.js 文档有 a sphere you can test the variables on。以下是上面示例生成的内容：

在 HTML canvas 上显示许多高分辨率图像（地图平铺）

Displaying many high-resolution images on an HTML canvas (map tiling)

html

javascript

canvas

three.js