用途
本技能面向需要在高性能 Web 地图上展示大量地理数据点的场景，处理规模从 5,000 到 100,000+ 个点。它专注于 Leaflet.js 优化、空间聚类算法、基于视口的加载，以及地图应用的渐进式披露 UX 模式。
主要能力
技能提供地图性能分层建议：0-100 个标记使用原生 Leaflet；100-1,000 使用基础聚类（react-leaflet-cluster）；1,000-10,000 使用 Supercluster + 视口加载；10,000-50,000 使用 Supercluster + canvas + 采样；50,000-500,000 使用 Web Workers + 服务端聚类；500,000+ 使用 MVT 瓦片 + 后端预聚合。
技术栈选型方面：React + 少于 5k 点推荐 react-leaflet-cluster；React + 5-50k 点推荐 use-supercluster hook；React + 50k+ 点推荐 supercluster + Web Workers；静态站点推荐服务端聚类；实时更新推荐 Canvas 渲染器 + 采样。
核心技巧包括：使用 Supercluster 进行标记聚类（基于索引的 k-d 树聚类，支持服务端或 Worker 运行，视口感知）；基于视口的加载（Supabase + PostGIS 数据库函数与 React Query hook）；渐进式披露策略（根据缩放级别调整聚类半径、标记大小、标签显示）；Canvas 渲染提升性能；使用 divIcon 创建高效聚类图标；防抖地图事件。
技能还提供性能基准数据：无聚类时 10k 点加载约 8 秒，Supercluster + 视口约 500ms，Supercluster + canvas 约 350ms。目标性能：初始加载 <500ms，平移/缩放响应 <200ms，标记点击 <100ms。
UX 模式包括：点击展开聚类、点击显示列表、悬停预览、加载状态、空状态。
使用方式
技能通过激活触发词启用，例如 "map performance"、"too many markers"、"slow map"、"clustering"、"10k points"、"marker clustering"、"leaflet performance"、"spatial visualization"、"geospatial clustering"、"viewport loading"、"map data optimization"、"real-time map"、"Supercluster"、"marker cluster"。
技能提供代码示例，包括 useSupercluster 的 React 实现、PostGIS 视口查询函数、React Query hook、渐进式披露配置、Canvas 渲染设置、聚类图标创建、防抖事件处理。
依赖版本：leaflet ^1.9.4、react-leaflet ^4.2.1、supercluster ^8.0.1、use-supercluster ^1.2.0、@tanstack/react-query ^5.0.0、use-debounce ^10.0.0。
适用场景
适用于需要展示大量地理数据点的 Web 地图应用，如房地产、短租、POI 展示等。技能兼容 Next.js 13+、Vite + React、Remix、Astro；数据库支持 Supabase (PostGIS)、PostgreSQL + PostGIS；地图库支持 Leaflet.js、Mapbox GL JS、Maplibre GL JS。
限制
不适用于静态地图图片（应使用 Mapbox/Google Static）、3D 可视化（应使用 Maplibre GL）、非地理数据可视化（应使用 D3.js/Chart.js）、少于 100 个标记的简单地图（原生 Leaflet 即可）。技能要求具备 PostGIS、React、空间算法知识。