首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
Coding
V2EX  ›  分享创造

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

  •  
  •   sneezry · 304 天前 · 1271 次点击
    这是一个创建于 304 天前的主题,其中的信息可能已经有所发展或是发生改变。
    前两天看到了《流浪地球》高清的海报,整个海报文件大小高达 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 的支持,所以在手机上看会比较模糊。

    这个方法对于在线分享高清图片非常有帮助。
    10 回复  |  直到 2019-02-15 13:12:30 +08:00
        1
    liang511   304 天前
    几十分钟前才把原图设成壁纸
        2
    yao978318542   304 天前
    加载有点慢
        3
    kaka1   304 天前   ♥ 1
    用 arcgis 切片很快,直接就是符合 wtms 标准的,leaflet 直接调用即可
        4
    nicoljiang   304 天前
    酷~
        5
    sneezry   304 天前
    @yao978318542 #2 直接用的 GitHub Pages,所以国内速度会比较慢
        6
    yao978318542   304 天前
    @liang511 #1 Wallpaper Engine 已经有这张海报的动态壁纸了 效果很赞
        7
    LadyChunsKite   304 天前   ♥ 1
    风暴英雄官网上的战场说明也是用好像也是用 Leaflet 做的。效果还挺好的。
        8
    apolo   302 天前
    @liang511 哥们 源文件可否分享下 自己做壁纸用
        10
    gerorim   302 天前
    @LadyChunsKite #7
    检视了下页面用到的 js 和绑定的事件,的确是。
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1670 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 25ms · UTC 01:15 · PVG 09:15 · LAX 17:15 · JFK 20:15
    ♥ Do have faith in what you're doing.