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

[sneezry]

前两天看到了《流浪地球》高清的海报，整个海报文件大小高达 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 的支持，所以在手机上看会比较模糊。

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

[liang511]

几十分钟前才把原图设成壁纸

[yao978318542]

加载有点慢

[kaka1]

用 arcgis 切片很快,直接就是符合 wtms 标准的,leaflet 直接调用即可

[nicoljiang]

酷～

[sneezry]

@yao978318542 #2 直接用的 GitHub Pages，所以国内速度会比较慢

[yao978318542]

@liang511 #1 Wallpaper Engine 已经有这张海报的动态壁纸了 效果很赞

[LadyChunsKite]

风暴英雄官网上的战场说明也是用好像也是用 Leaflet 做的。效果还挺好的。

[apolo]

@liang511 哥们 源文件可否分享下 自己做壁纸用

[liang511]

@apolo https://pan.baidu.com/s/19awvuKTX0XQlxMR22kK5Pw

[gerorim]

@LadyChunsKite #7
检视了下页面用到的 js 和绑定的事件，的确是。