结合 Leaflet 做了一个类似 Google Maps 的高清海报在线浏览网页

前两天看到了《流浪地球》高清的海报，整个海报文件大小高达 110MB。因为这个文件在大多数电脑上打开都比较吃力，我试着用 Leaflet 做一个类似 Google Maps 的高清海报在线浏览网页，方便自己查看。

制作好的网页的源码及切片图片我都放在了 GitHub 上： https://github.com/Sneezry/thewanderingearth

快速的在线 Demo： https://sneezry.com/thewanderingearth/

请注意，电影海报拥有版权，请在合理范围内使用。如果用于商业用途需要得到海报创作者专门授权。

制作这个网页最大的工作量在于图片切片（ image tiles ），由于原始图片实在太大了，现有的免费工具都很难应付。而收费工具授权费实在过于高昂。我最后找到的方法是用 Photoshop 结合一个动作脚本（
https://github.com/bramus/photoshop-google-maps-tile-cutter ）实现的。Photoshop 我使用的是每月 9.99 刀的订阅版，这个订阅不支持中国区，所以需要注册美国区 ID，付款支持国内 Visa 信用卡。

我在制作这个海报切片时一共切出了 2 万 1 千个 tiles，用的是家里的古董电脑，i3 处理器，4G 内存，620 显卡，耗时将近三个小时。

Photoshop 切出来的图非常大，我设定的 162 像素平方的图，输出的文件高达 1MB，所以需要压缩。我使用的压缩工具是 Hummingbird （ https://github.com/thunkli/hummingbird ），压出来的 JPG 降到了 10k 以下，支持批量压缩，非常好用。不过似乎有个小 bug，如果文件夹中的文件数量超过 100 个，只会压缩 100 个，可以通过搜索大文件的方法找出没有压缩的文件，再次拖进去压缩。

如果 Photoshop 输出为 PNG，也可以使用 Pngyu 进行压缩，但是我没有进行测试。Pngyu 可以通过
https://nukesaq88.github.io/Pngyu/ 进行了解。

Leaflet 也支持 retina 设置，这对于手机等高清屏幕设备很友好。在这个例子中我没有做 retina 的支持，所以在手机上看会比较模糊。

这个方法对于在线分享高清图片非常有帮助。