Newshot Protomaps：自托管地图瓦片已经变得便宜又简单
我在为最新项目 Mapboard.1 做调研时发现了 Protomaps。对大多数非商业项目来说，商业 API 一旦走红就会变得贵得离谱（例如，Mapbox 在免费额度用完后，每 1k 次地图加载收费 5 美元）。
PMTiles 是 Protomaps 生态系统的一部分，是一种以单个文件形式分发、可通过 Range 请求访问的瓦片格式，因此极其便携且易于部署。对于支持缓存大文件 Range 请求的 CDN 来说，除了把它下载并上传到存储之外，无需额外操作。对于其他 CDN，比如 Cloudflare，你可以利用边缘函数在传统的 x/y/z URL 路径和 Range 请求之间进行转换。
获取一些地图
如果你只想要世界地图，获取它很简单：前往构建页面，下载最新的每日构建即可。
不过，用 CLI 会更有趣。例如，你可以只提取某个边界框或特定缩放级别的数据，从而得到一个显著更小的文件。
部署到 Bunny.net
Bunny.net 是部署它的一个很好的 CDN（推广链接）。它们支持 HTTP Range 请求，默认不收集个人数据，2 总部位于欧盟，并提供低成本访问全球 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
配置拉取区域
理论上，此时你只需要创建一个拉取区域，选择存储区域作为源，就完成了。实际上，修改一些设置会更明智。
允许的 CORS 源可以在 Security > General > Allowed referrers 下配置，这样其他网站就无法嵌入你的瓦片。
你还应在 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 传输个人数据，这些数据当然仍会被处理。↑
//newsletter
及时了解我发布的新博客文章和项目；发送频率低于每周一次。
//written by
嗨，我是 Bruce，一名 ETH Zurich 的计算机科学学生。我构建移动应用、网站和其他产品，并会记录一路遇到的有趣事情。更多关于我 →
//letters
如果你想评论这篇文章，请发送电子邮件。经作者许可，我会在此分享部分回复。
像 {{NAME_ab12cd34}} 这样写出的值是真实值的占位符。请完全按照书写形式使用它们，无论是在回复中还是在工具调用中：它们会在任何内容运行之前被填入真实值。不要要求验证它们，也不要用示例替换它们。