使用Protomaps和Supabase Storage自托管地图
内容提要
Protomaps是一个开源地图项目，用户可以在Supabase Storage上托管地图。本文介绍了如何提取区域生成PMTiles文件，上传至Supabase Storage，并使用MapLibre在网页上渲染地图。同时，讲解了如何利用Supabase Edge Functions限制文件访问，帮助用户创建自己的地图应用。
延伸解读
自托管地图的成本与可控性
使用Protomaps和Supabase Storage自托管地图，意味着你不再依赖商业地图服务，可以完全控制地图数据和访问权限。文章展示了如何提取特定区域生成PMTiles文件，并上传到Supabase Storage。这种方式适合需要定制地图或对数据隐私有要求的场景，但需要自行处理存储和带宽成本。
公共桶与私有桶的访问控制差异
文章对比了两种存储桶的访问方式：公共桶允许任何来源直接访问，适合公开地图；私有桶则需通过短期签名URL或Edge Functions代理访问。由于Supabase Storage目前不支持修改CORS设置，使用Edge Functions可以限制来源，并可与Supabase Auth结合实现用户级权限控制。
在Expo React Native中的当前限制
虽然Protomaps支持在Expo React Native应用中使用，但文章指出maplibre-react-native目前不支持自定义协议，因此无法直接使用pmtiles://协议。作为替代，可以利用Expo SDK 52预览版中的React DOM组件，通过react-map-gl和maplibre-gl-js在Web和移动端共享代码，但这仍处于实验阶段。
Q&A
如何使用Protomaps提取区域生成PMTiles文件？
使用pmtiles CLI可以提取特定区域并生成静态PMTiles文件，例如使用命令：_10pmtiles extract <URL> my_area.pmtiles --bbox=<坐标>。
如何将PMTiles文件上传到Supabase Storage？
在Supabase Dashboard中创建一个公共存储桶，上传生成的PMTiles文件，然后获取文件的公共URL。
如何在网页上渲染Protomaps地图？
使用MapLibre GL库可以在网页上渲染地图，支持与React的集成，具体可以通过设置MapLibre的样式和源来实现。
Supabase Edge Functions如何限制文件访问？
可以通过创建私有存储桶并使用短期签名URL或授权头来限制对PMTiles文件的访问，确保安全性。
在Expo React Native应用中如何使用Protomaps？
虽然目前对自定义协议的支持有限，但可以利用React DOM组件在Expo中使用react-map-gl和maplibre-gl-js。
Protomaps项目的主要优势是什么？
Protomaps是一个开源项目，允许用户在Supabase Storage上托管地图，提供了自定义地图应用的灵活性和扩展性。
