MapToPoster JS 是一款纯浏览器端运行的地图海报生成器：输入任意城市名称，它就能把该位置渲染成一张高分辨率、可自定义主题与排版的海报，并一键导出 PNG。整篇文章将带你从零开始，完整走完"搜索位置 → 选择主题 → 一键导出"的全流程，新手也能在 10 分钟内做出第一张地图海报。

30 秒启动：如何免费运行 MapToPoster JS

本工具无需注册、无需服务器，所有渲染都在你自己的浏览器中完成。只需 Node.js 18 及以上版本：

1. 克隆仓库：git clone https://gitcode.com/gh_mirrors/map/map-to-poster
2. 进入目录安装依赖：npm install
3. 启动开发服务器：npm run dev，然后访问http://localhost:5173即可开始制作

💡 依赖与脚本定义在 package.json 中，npm run build可打包出生产版本。

制作流程图解：从定位到导出的 6 个步骤

界面分为左侧控制栏和右侧海报预览区，控制栏按数字 1~7 分好了步骤，跟着编号往下走即可。界面源码可直接在 index.html 中查看。

步骤 1：搜索城市位置，地图瞬间跳转

在"1. Define Location"的搜索框中输入城市名（至少 2 个字符），系统会调用 Nominatim 地理编码服务返回候选列表，点击结果后地图自动定位。搜索逻辑位于 src/map/geocoder.js。

如果搜索不符合预期，还可以：

• 手动改坐标：直接填写 Latitude / Longitude
• 覆写城市名：在 Override City Name 中自定义标题文字
• 开关国名 / 坐标：点击眼睛图标控制国家名与经纬度是否显示

步骤 2：添加标记与路线，讲一个旅行故事

打开"2. Marker & Route"区域：

• Show Location Marker：显示位置标记，支持 Pin、圆点、爱心、星星等图标，滑杆可调节大小
• 点击Add Point添加多个标记，并可直接在地图上拖拽调整位置
• Custom Route (A to B)：开启后自动通过 OSRM 规划路线，拖拽端点即可修改行程，还能在线条上点击添加自定义弯折（详见 src/map/route-manager.js）

✈️ 做一张"城市 A → 城市 B"的旅行海报，这一步就是灵魂。

步骤 3：选择地图风格：标准主题与艺术主题

在"3. Map Style"中可以一键切换两种渲染模式：

• Standard（标准模式）：基于 Leaflet 栅格瓦片，内置 Minimal White、Midnight Dark、Classic Street、Satellite View 等主题，并可用开关控制地点标签显示
• Artistic（艺术模式）：基于 MapLibre GL 的矢量手绘风，内置 Cyber Noir、Golden Era、Mangrove Maze 等数十款配色，还支持自建主题并保存在浏览器中（主题定义在 src/core/artistic-themes.js 与 src/core/themes.js）

步骤 4：调整构图、字体与画框效果

• Perspective Zoom：1~18 级缩放，决定"鸟瞰城市"还是"俯瞰街区"
• Overlay 文字区：标题、国名、坐标组成的文字层可以直接用鼠标拖到海报任意位置，支持 Vignette / Radial 柔边效果提升可读性
• Typography：城市名、国名、坐标可分别选择 Bebas Neue、Playfair Display 等不同字体
• Mat / Passepartout：开启后为海报加上一圈"博物馆卡纸"内边框，可调宽度、边框粗细与透明度

步骤 5：选择输出尺寸：从社媒到大幅打印

"7. Output Size"提供四种快捷比例（正方形 / 竖版 / 横版），点击Other可打开完整预设库，分类包括：社交媒体（Instagram、Twitter）、壁纸（4K 桌面、iPhone）、网页横幅、照片冲印（4×6 到 11×14 英寸）以及大幅海报（最高 24×36 英寸）与 A0~A5 纸张尺寸，完整清单见 src/core/output-presets.js。也可以直接手输自定义宽高，最大支持 50000px。

步骤 6：一键导出，生成高分辨率 PNG

确认效果后，点击底部Generate Export按钮，程序会通过 html2canvas 把当前视图按所选分辨率渲染成 PNG 并自动下载。导出管线实现在 src/core/export.js，渲染期间按钮上方会出现"Rendering Art..."加载提示，尺寸越大等待越久，耐心等待即可。

为什么推荐 MapToPoster JS？3 个亮点

1. 🔒 隐私优先：100% 客户端渲染，坐标、主题等设置只存在浏览器 LocalStorage（src/core/state.js），数据不会离开你的电脑
2. 🎨 双引擎混合渲染：Leaflet 栅格与 MapLibre 矢量双引擎视图同步，切主题不跳构图
3. 🖨️ 打印级输出：最高 50000px 分辨率导出，适合大幅喷绘与装裱

常见问题

Q：导出的海报模糊？提高"Output Size"中的分辨率，建议打印用途选择 300 DPI 对应的像素（如 8×10 英寸选 2400×3000）。

Q：想做深色霓虹风海报？切换到 Artistic 模式，选择 Cyber Noir 主题，配合 Vignette 柔边效果效果最佳。

Q：换浏览器后设置会丢吗？自定义主题保存在 LocalStorage 中，可在"Other Theme"弹窗中导出为 JSON，再导入到新环境。

现在就打开浏览器，搜索你最有故事的那座城市，做一张独一无二的地图海报吧 🗺️