使用MapLibre实现Postgres实时位置共享
内容提要
本教程在Postgis和Supabase基础上添加了Supabase实时功能，介绍了使用Supabase Edge Function构建捕获实时位置数据的Telegram Bot，使用RPC将数据插入Postgres，使用Supabase实时功能监听数据库变化，使用MapLibre GL JS在React中绘制实时位置数据。教程提供了代码和链接。
延伸解读
实时位置共享的技术栈组合
本教程将 Supabase Edge Function、RPC、Realtime 与 MapLibre GL JS 结合，构建了一个从 Telegram Bot 捕获位置、经 Edge Function 写入 Postgres、再通过 Realtime 广播到前端地图的完整链路。这种组合利用了 Supabase 的实时能力与 PostGIS 的地理空间功能，适合需要多客户端同步位置的应用场景。
RPC 在数据插入中的会话验证作用
教程中的 location_insert RPC 不仅插入位置数据，还先查询 sessions 表验证用户是否有活跃会话。这确保了只有处于有效会话中的用户才能写入位置，避免了无效或未授权数据进入数据库。这种设计在需要控制数据写入权限的实时应用中很实用。
前端实时订阅与地图绘制的实现要点
在 React 中，通过 useEffect 设置 Supabase Realtime 订阅，仅监听 locations 表的 INSERT 事件，并按 event_id 过滤。收到新数据后更新状态，再用 react-map-gl 的 Marker 组件绘制标记。注意需使用 use client 标记客户端组件，并在组件卸载时取消订阅，以避免资源泄漏。
基础地图与实时数据的整合方式
教程使用 Protomaps 托管在 Supabase Storage 上的矢量瓦片作为基础地图，通过 pmtiles 协议加载。实时位置标记则叠加在地图之上。这种方案将地图托管与实时数据服务统一在 Supabase 生态内，减少了外部依赖，但需要预先配置好地图瓦片和存储权限。
Q&A
如何使用Supabase Edge Function构建Telegram Bot以捕获实时位置数据？
可以通过创建一个Supabase Edge Function，设置Telegram Bot接收位置数据并将其插入Supabase数据库来实现。
如何将位置数据插入Postgres数据库？
使用远程过程调用（RPC）将位置数据插入Postgres，确保用户会话有效后再执行插入操作。
Supabase Realtime如何监听数据库变化？
Supabase Realtime通过设置订阅来监听数据库的变化，并将变化广播给多个客户端。
如何在React中使用MapLibre GL JS绘制实时位置数据？
在React中使用MapLibre GL JS，可以通过更新状态来绘制实时位置标记，利用实时订阅获取最新数据。
使用Supabase Realtime的优势是什么？
Supabase Realtime适合广播位置数据，能够高效地将数据库变化实时推送给多个客户端。
如何确保用户会话在插入位置数据时有效？
在插入位置数据时，通过RPC验证用户的会话状态，确保其为活动状态后再进行数据插入。
