为了跟公司的人演示一个软件从思考到开发的过程，我花了一天的时间，实现了这部分功能

先看效果： https://php.joson.cc/imagemap/

第一步，搞清原理

什么是局部加载大图，如果有一张体积超大的图，一次性传送给浏览器那几乎是一次糟糕的体验。
1，就算一次传给用户，用户浏览器迫于分辨率和窗口所见局限，也有可能看不清楚。特别是需要看清图上的文字。
2，用户要等很久才能看到图片长啥样。
3，服务器带宽浪费。

如果能只传送用户可见区域的部分图片给用户，等用户拖动时再加载其他部分，这将给用户一个非常有意思的体验。就像我们经常使用的百度地图，地图是非常大的图片，如果百度服务器一次性将地图传给用户，那就不可想象。

那么，我们只要知道用户正在请求图片的哪部分，我们将图片的那部分传过去就好了，其实我们可以用一些简单的数学计算，加上服务器上的GD处理，很容易办到。但如果这样，那么用户的每次请求，服务器都将进行大量的实时演算，消耗巨大的资源来处理图片，这将是可怕的。那么我们很容易想到，预先让服务器把图片的每个缩放等级处理好，再缓存下来。下次直接读取磁盘的缓存则可以解决。

我们可以通过简单的计算，把图片拆分成一个网格。再利用前端JS动态读取每个格子的图片即可。

第二步，理清系统工作流程

第三步，逐个模块实现

其他模块就不用说了，都很简单，重点在图形处理与客户端显示部分。首先我们确立缩放等级的公式，定为 块尺寸 *  2^level，这个公式的缩放可以得到比较好的结果。

在服务器上，我们首先通过图片的尺寸，计算出它的最大 缩放等级 ceil(  sqrt( width / 块尺寸 ) ) ， 再把每个缩放等级按照 块尺寸 分割成图则可。如下图（4个缩放等级）：

（程序将每个缩放等级的图，自动分发在相对应的文件夹）

（再在每个文件夹里，自动把图拆分成块储存）

现在，只需要前端能准确知道，当前屏幕正在显示哪几块碎片，就可以将他们读取出来。 

（放大后加载缩放等级更高的局部）

（半秒后，所见区域的其他部分被加载了）