【免费下载链接】map-to-posterMapToPoster JS is a client-side web app that turns any location into a high-resolution, customizable map poster with various themes, layouts, and export options.项目地址https://gitcode.com/gh_mirrors/map/map-to-poster点击查看免费下载MapToPoster JS 是一款纯浏览器端的地图海报生成工具可以把任意城市搜索定位后变成高分辨率地图海报。这篇指南将带你快速掌握两个点睛功能卡纸装裱Mat / Passepartout和背景边缘效果Vignette / Radial Overlay让导出的地图拥有画廊级作品般的质感。 什么是卡纸装裱Mat / Passepartout在实体装裱中Mat 是画框内那一圈白色卡纸用来衬托画面、拉开视觉层次。MapToPoster JS 把它搬到了数字海报上在地图四周留出一圈与背景同色的卡纸边距地图区域向内收缩可选一条内边框细线Inner Border勾勒出装裱的边界感边框颜色自动跟随当前主题的文字色无需手动选色换主题也不会撞色。所有卡纸参数都集中在界面第 6 步 Mat / Passepartout 面板中对应源码index.html。⚙️ 快速启用卡纸装裱只需 5 个参数打开 Enable Mat 开关后会出现 4 个可调项完整参数与默认值如下默认值定义见 src/core/state.js界面控件状态字段可调范围默认值Enable MatmatEnabled开关关闭Mat Width卡纸宽度matWidth10 ~ 200px40pxShow Inner Border显示内边框matShowBorder开关开启Border Thickness边框粗细matBorderWidth1 ~ 10px1pxBorder Opacity边框不透明度matBorderOpacity0 ~ 100%100%几个使用细节卡纸宽度是每边宽度地图画布实际绘制区域 海报尺寸 − 2 × 卡纸宽度调整滑块时地图会实时重新居中地图署名标记attribution会同步内移始终保持在卡纸区域内不会被边框压住边框渲染逻辑在 src/ui/form.js 中边框颜色取自主题的文字色activeTheme.text。️ 背景边缘效果Vignette 与 Radial卡纸解决边框质感背景边缘效果则解决标题可读性——当标题压在城市道路密集区时边缘的淡入淡出色块能稳稳托住文字。在界面第 4 步 Composition 中找到Overlay Effect按钮组源码index.html共三种模式None不加任何边缘效果纯地图Vignette上下暗角上下边缘为不透明色块向中心线性渐隐把标题夹在画面边缘最常用Radial径向晕影中心透明、向外圈渐变为背景色形成聚焦式晕影适合把标题放在画面中部。效果颜色自动取自当前主题的背景色渐变公式实现在 src/ui/form.js换任何主题都不会出现突兀的色块。Overlay Size控制标题文字块大小None / Small / Medium / LargeOverlay Position提供 3×3 九宫格定位还可以直接拖动标题自由摆放带 8px 边缘安全间距。 画廊级搭配建议极简风Minimal White 主题 40px 卡纸 1px 内边框 Vignette干净如美术馆墙上的作品赛博风Cyber Noir 等深色艺术主题 3~5px 内边框 100% 不透明度 Radial霓虹线条与边框互相呼应老照片风Paper Heritage 复古主题 80~120px 宽卡纸 内边框降到 60% 不透明度营造泛黄相纸的层次。所有设置会自动写入浏览器 LocalStorage持久化字段清单见 src/core/state.js下次打开自动恢复无需重复调参。 导出时卡纸如何生效导出走的是 src/core/export.js 的高保真渲染管线卡纸与边缘效果都会被完整烘焙进最终 PNG先按海报尺寸 − 2 × 卡纸宽度截取地图快照export.js在克隆文档中按最终导出比例重绘内边框与边缘渐变层export.js把地图快照内缩matPx像素绘制到以背景色填充的完整画布上export.js。也就是说你预览看到的卡纸、内边框、边缘晕影所见即所得地出现在导出图片里还支持最高 50,000px 的超高分辨率。 常见疑问问卡纸边框颜色可以自定义吗边框颜色绑定主题文字色随主题自动变化保证任何配色下都协调目前不提供独立取色器。问为什么导出后卡纸比例和预览不一致不会不一致。导出时会按matWidth × 导出宽度 / 预览宽度精确换算export.js比例始终一致。问关掉 Edge Effect 还会保留标题吗会。Overlay Size 选 None 只是隐藏文字块Vignette/Radial 的 None 也只是取消边缘色块二者互不影响。 快速体验如需本地运行要求 Node.js 18git clone https://gitcode.com/gh_mirrors/map/map-to-poster cd map-to-poster npm install npm run dev打开http://localhost:5173搜索任意城市进入 Mat / Passepartout 与 Composition 面板即可开始调参。 相关源码文件卡纸状态定义src/core/state.js卡纸控制面板界面index.html卡纸边框与边缘效果实时渲染src/ui/form.js边缘渐变算法src/ui/form.js导出管线卡纸烘焙src/core/export.js项目说明README.md赞分享【免费下载链接】map-to-posterMapToPoster JS is a client-side web app that turns any location into a high-resolution, customizable map poster with various themes, layouts, and export options.项目地址https://gitcode.com/gh_mirrors/map/map-to-poster点击查看免费下载相关推荐driftwm千兆像素壁纸让一整张世界地图成为你的无限画布背景driftwm千兆像素壁纸让一整张世界地图成为你的无限画布背景 driftwm 是一款以触控板为核心的 Wayland 合成器它的桌面是一块无限延伸的二维画Obsidian 图片画廊插件安装与使用指南Obsidian 图片画廊插件安装与使用指南 1. 项目目录结构及介绍 Obsidian Image Gallery 是一个专为 Obsidian 设计的零配置如何用纯CSS打造惊艳响应式图像画廊与灯箱效果完整指南如何用纯CSS打造惊艳响应式图像画廊与灯箱效果完整指南 You Dont Need JavaScript是一个展示CSS强大功能的开源项目通过纯CSS实现了前端示例工程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考