Javascript 如何像GMap那样按需加载部分图像？

我有一个大图像，比如说1000MP（700MB），就像一个特定区域的地图，如果放大图像，我只想加载特定部分。 这对于使应用程序在web环境中高效运行非常重要

我通过将图像分割成不同的部分来存储图像，并根据需要仅加载可用的切片图像

切片是根据缩放级别进行的

---

但我不想这样做，是否有任何有效和适当的方法，地图是如何做到的？

一些服务、文章和框架：

如果你在谷歌上搜索“slippy map nodejs”，你会发现很多现成的互动程序服务器

试试：

用于延迟加载的HTMLImageElement扩展。显示图像时将加载图像

通过npm或bower安装lazyload映像

# via npm 
$ npm install lazyload-image

# via bower 
$ bower install lazyload-image

用法

Load lazyload-image.html in your HTML.

<link rel="import" href="lazyload-image.html">
Modify your <img> elements such as following.

<img is="lazyload-image" src="path/to/your/image.jpg" offset="200" width="100" height="100"

在html中加载lazyload-image.html。
修改注意，您不希望逻辑是后端驱动/延迟加载的，我可以推荐使用对象流的方法

方法：

拿着你的大图，分成小图[就像你已经在做的那样]
将它们打包成一个数组，使默认的缩放图像先进入，然后再进入每个缩放级别+/-。假设一帧10幅图像组成一个视图。然后以以下方式打包图像：

缩放0时的10帧
缩放+10时的10帧
缩放时10帧-10
缩放+20时的10帧
缩放时的10帧-20

使用对象流媒体库（如）开始将图像从服务器发送到客户端
在客户端上，接收帧并将其保存在内存中，以便在用户平移/缩放时显示
关键的区别在于数据不是真正的延迟加载，因为它不依赖用户放大/缩小来获得所需的图像。帧被加载到内存中，以给用户提供最小的等待时间，即优化时间，而不是内存

祝你一切顺利。希望这有帮助。如果需要更详细的实现，请告诉我。
我很确定您所做的是google maps如何实现的。是的，这是任何数字地图的正常做法）更有效的方法是使用SVG，但SVG是矢量图形，而不是光栅