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——后续的导航和刷新会更便宜，因为地图的更多部分已被本地缓存。按 $0.05/1k 次地图加载计算，这可能比 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 配置 Pull Zone 理论上，到这一步你只需要创建一个 Pull Zone，把存储区域选为源，就完成了。但实际上，改一些设置会更稳妥。

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

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

你可能还想阻止别人下载整个文件、害你收到高额 CDN 账单。我找到的最实用的办法是：在单个请求传输 10MB 之后，把下载速度限制到 10kB/s（使用「Network limits」下的「Download speed limits」和「Limit after」设置）。正常使用永远不会达到这个量。你还可以进一步给 Pull Zone 加一个每秒请求数限制（注意，正常使用也可能很快达到较高数字）或每月带宽上限。

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

恭喜，你现在拥有了自己托管、成本低廉且高可用的世界地图！

基本上就是 Excalidraw，但放在地图上，用于旅行规划。发布文章即将推出。 ↑ IP 地址的最后一个八位字节会被丢弃。如果你通过 CDN 传输个人数据，这些数据当然仍会被处理。 ↑ 关注我的新博客文章和项目；发送频率低于每周一次。 你好，我是 Bruce，苏黎世联邦理工学院的计算机科学学生。我开发移动应用、网站和其他产品，并记录沿途遇到的有趣事情。更多关于我 → 如果你想对这篇文章发表评论，请发邮件。我会在作者许可的情况下在此分享部分回复。