Protomaps：自托管地图图块变得便宜且简单

PMTiles 是一种切片格式，通过 HTTP Range 请求工作，可以作为单个文件部署到存储桶中。我在研究我的最新项目 Mapboard 时遇到了 Protomaps。 1 对于大多数非商业项目来说，如果你的应用程序像病毒一样传播，商业 API 就会变得极其昂贵（例如，一旦你用完免费套餐，Mapbox 每 1000 次地图加载收费 5 美元）。 PMTiles 是 Protomaps 生态系统的一部分，是一种以单个文件形式提供的图块格式，可通过 Range 请求访问，因此非常便携且易于部署。对于支持缓存大文件Range请求的CDN来说，除了下载和上传到存储之外，不需要任何努力。对于其他人，例如 Cloudflare，您可以利用边缘函数在传统的 x/y/z URL 路径和范围请求之间进行转换。获取一些地图 如果您想要的只是世界地图，那么获取它就像进入构建页面并下载最新的每日构建一样简单。然而，使用 CLI 可以带来更多乐趣。例如，您可以仅提取边界框或特定缩放级别的数据，以获得小得多的文件。部署到 Bunny.net Bunny.net（附属链接）是用于部署此功能的一个出色的 CDN。他们支持 HTTP Range 请求，默认情况下不收集个人数据，2 总部位于欧盟，并提供对全球 CDN 网络和边缘存储服务器的低成本访问。定价根据边缘存储的区域和复制因子而有所不同。但通常您为欧洲和北美的带宽支付 0.01 美元/GB（在较小的卷网络上为 0.005 美元/GB），并为存储支付 0.01 美元/GB/月（无复制）到 0.055 美元/GB/月（最大复制）。高度复制对于缓存未命中时的延迟至关重要（因为数据在 CDN PoP 缓存时会被进一步复制）。实际上，存储 139GB 的世界地图并复制到大多数大陆 (5x) 将花费您每月约 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=""\secret_access_key=""\endpoint="https://-s3.storage.bunnycdn.com" rclone copyurl """bunnycdn:/.pmtiles" \ --s3-chunk-size 256M \ --progress 配置拉取区 理论上，此时你只需要创建一个拉取区，选择存储区作为起始点，就可以了。实际上，更改一些设置是明智的。可以在“安全”>“常规”>“允许的引荐来源网址”下配置允许的 CORS 来源，以便其他网站无法嵌入您的图块。您还需要在“缓存”下验证“优化大对象传递”是否已启用，因为这使得可以缓存范围请求。您可能还想阻止人们下载整个文件，以免给您带来巨额 CDN 账单。我发现的最实用的方法是在单个请求中传输 10MB 后将下载速度限制为 10kB/s（使用“网络限制”下的“下载速度限制”和“限制后”设置）。正常使用量绝不能达到这个量。您可能还想为拉动区域引入请求/秒限制（请注意，合法使用也可能很快达到很高的数字）或每月带宽限制。嵌入地图 部署图块后，唯一要做的就是通过 MapLibre GL 将它们嵌入到您的网站中。为此，您需要安装 pmtiles npm 包并向 MapLibre 添加协议和样式，如官方安装指南中所述。恭喜，您现在拥有自己的经济高效且高度可用的世界地图！ // 注释 (2) 基本上是 Excalidraw，但在地图上用于旅行计划。即将发布发布帖子。 IP 地址的最后一个八位字节被删除。如果您通过 CDN 传输个人数据，当然仍会进行处理。 // 时事通讯 随时了解我的新博客文章和项目；每周发送少于一次。 // 作者：嗨，我是 Bruce，苏黎世联邦理工学院计算机科学专业的学生。我构建移动应用程序、网站和其他产品，并写下我一路上遇到的有趣的事情。更多关于我的信息 → github // email // rss // ema 回复的信件