Blog - Supabase
·
使用Protomaps和Supabase Storage自托管地图
💡
原文英文，约1200词，阅读约需5分钟。
📝
内容提要
Protomaps是一个开源地图项目，用户可以在Supabase Storage上托管地图。本文介绍了如何提取区域生成PMTiles文件，上传至Supabase Storage，并使用MapLibre在网页上渲染地图。同时，讲解了如何利用Supabase Edge Functions限制文件访问，帮助用户创建自己的地图应用。
🎯
关键要点
- Protomaps是一个开源地图项目，可以在Supabase Storage上托管地图。
- 使用pmtiles CLI提取特定区域并生成静态PMTiles文件。
- 将生成的PMTiles文件上传至Supabase Storage，并创建公共存储桶。
- 使用MapLibre GL在网页上渲染地图，支持与React的集成。
- 利用Supabase Edge Functions限制对PMTiles文件的访问，确保安全性。
- 可以通过创建私有存储桶和使用短期签名URL来保护文件访问。
- 支持在Expo React Native应用中使用Protomaps，尽管目前对自定义协议的支持有限。
❓
延伸问答
如何使用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上托管地图，提供了自定义地图应用的灵活性和扩展性。
➡️
