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

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

  •  
  •   sneezry ·
    Sneezry · 2019-02-13 16:52:30 +08:00 · 2328 次点击
    这是一个创建于 1870 天前的主题,其中的信息可能已经有所发展或是发生改变。
    前两天看到了《流浪地球》高清的海报,整个海报文件大小高达 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
    liang511
        1
    liang511  
       2019-02-13 16:59:06 +08:00
    几十分钟前才把原图设成壁纸
    yao978318542
        2
    yao978318542  
       2019-02-13 17:02:21 +08:00
    加载有点慢
    kaka1
        3
    kaka1  
       2019-02-13 17:03:13 +08:00   ❤️ 1
    用 arcgis 切片很快,直接就是符合 wtms 标准的,leaflet 直接调用即可
    nicoljiang
        4
    nicoljiang  
       2019-02-13 17:06:11 +08:00
    酷~
    sneezry
        5
    sneezry  
    OP
       2019-02-13 17:07:35 +08:00
    @yao978318542 #2 直接用的 GitHub Pages,所以国内速度会比较慢
    yao978318542
        6
    yao978318542  
       2019-02-13 17:11:40 +08:00
    @liang511 #1 Wallpaper Engine 已经有这张海报的动态壁纸了 效果很赞
    LadyChunsKite
        7
    LadyChunsKite  
       2019-02-13 17:21:53 +08:00   ❤️ 1
    风暴英雄官网上的战场说明也是用好像也是用 Leaflet 做的。效果还挺好的。
    apolo
        8
    apolo  
       2019-02-15 09:56:19 +08:00
    @liang511 哥们 源文件可否分享下 自己做壁纸用
    liang511
        9
    liang511  
       2019-02-15 09:59:40 +08:00
    gerorim
        10
    gerorim  
       2019-02-15 13:12:30 +08:00
    @LadyChunsKite #7
    检视了下页面用到的 js 和绑定的事件,的确是。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5861 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 02:24 · PVG 10:24 · LAX 19:24 · JFK 22:24
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.