Protomaps 推出 PMTiles，自托管地图瓦片变得便宜又简单

PMTiles 是一种通过 HTTP Range 请求工作的瓦片格式，可以作为单个文件部署到存储桶中。

我在为最新项目 Mapboard 做调研时发现了 Protomaps。¹ 对大多数非商业项目来说，一旦流量暴涨，商业 API 的费用就会高得令人望而却步（例如 Mapbox，免费额度用完后每 1k 次地图加载收费 5 美元）。

PMTiles 是 Protomaps 生态的一部分，是一种以单文件形式发布的瓦片格式，可通过 Range 请求访问，因此极其便携、易于部署。对于支持大文件 Range 请求缓存的 CDN，你只需把文件上传到存储即可，无需其他操作。对于 Cloudflare 这类 CDN，你可以利用边缘函数在传统的 x/y/z URL 路径和 Range 请求之间做转换。

如果你只想要世界地图，获取方式很简单：访问构建页面，下载最新的每日构建即可。

不过，用 CLI 会更有趣。例如，你可以只提取某个边界框或特定缩放级别的数据，从而得到一个体积小得多的文件。

部署这个文件的一个绝佳 CDN 是 Bunny.net（推广链接）。它们支持 HTTP Range 请求，默认不收集个人数据，² 总部位于欧盟，并以低成本提供全球 CDN 和边缘存储服务器网络。

价格因地区和边缘存储的副本因子而异。但一般来说，到欧洲和北美的带宽费用是 $0.01/GB（在较小的 Volume 网络上为 $0.005/GB），存储费用则从 $0.01/GB/月（无副本）到 $0.055/GB/月（最大副本）不等。高副本主要影响缓存未命中时的延迟（因为数据在 CDN PoP 缓存时会进一步复制）。

实际算下来，存储 139GB 的世界地图并复制到大多数大洲（5 倍），存储费用约为每月 $5。在笔记本电脑上加载欧洲地图并放大到某个城市，大约会传输 5MB 数据，费用为 $0.00005——后续导航和重新加载会更便宜，因为越来越多的地图会被本地缓存。按每 1k 次地图加载 $0.05 计算，这可能比 Mapbox 便宜 100 倍。不过实际带宽当然会有波动（立即跳出的用户更少，重度用户可能达到几十 MB）。而 Mapbox 只按访问次数收取固定费用。

建议创建一个启用 S3 兼容的存储区域，因为通过 HTTP API 上传时我遇到了 15 分钟超时。

然后，安装 rclone 后，你可以下载文件并将其流式传输到 Bunny 存储区域。如果你的网络连接不太好，最好在 tmux 中或从临时 VPS 上操作。

rclone config create bunnycdn s3
provider=Other
access_key_id="<zone-name>"
secret_access_key="<storage-key>"
endpoint="https://<primary-region>-s3.storage.bunnycdn.com" rclone copyurl "<build-url>" "bunnycdn:<zone-name>/<filename>.pmtiles"
--s3-chunk-size 256M
--progress

配置拉取区域

理论上，此时你只需创建一个拉取区域，选择存储区域作为源，就完成了。但实际上，调整一些设置会更明智。

可以在 Security > General > Allowed referrers 下配置允许的 CORS 来源，这样其他网站就无法嵌入你的瓦片。

你还应该在 Caching 下确认已启用“Optimize for large object delivery”，因为这样才能缓存 Range 请求。

你可能还想阻止人们下载整个文件，以免收到高额 CDN 账单。我找到的最实用的方法是在单个请求传输 10MB 后，将下载速度限制为 10kB/s（使用“Network limits”下的“Download speed limits”和“Limit after”设置）。正常使用应该永远不会达到这个量。你还可以进一步为拉取区域设置每秒请求数限制（请注意，合法使用也可能很快达到较高的数值）或每月带宽限制。

瓦片部署完成后，剩下的唯一事情就是通过 MapLibre GL 将它们嵌入你的网站。为此，你需要安装 pmtiles npm 包，并按照官方安装指南为 MapLibre 添加协议和样式。

恭喜，你现在拥有了自己的高性价比、高可用性的世界地图！

基本上就是 Excalidraw，但在地图上，用于旅行规划。发布文章即将推出。 ↑

IP 地址的最后一个八位字节会被丢弃。如果你通过 CDN 传输个人数据，这些数据当然仍会被处理。 ↑

关注我的新博客文章和项目；发送频率低于每周一次。

嗨，我是 Bruce，苏黎世联邦理工学院的计算机科学学生。我构建移动应用、网站和其他产品，并记录沿途遇到的有趣事情。更多关于我 →

如果你想对这篇文章发表评论，请发送电子邮件。经作者许可，我会在此分享部分回复。