Peter Hoffmann:使用 z10 瓦片网格按需加载 33,000 个峰值
biwak.info 开发了一款面向移动设备的阿尔卑斯山小屋地图,并整合了 33,437 个具名山峰的详细信息,数据源自 OpenStreetMap 和 Wikidata。为优化在连接受限的移动设备上的加载性能,需对庞大的 15.4 MB 山峰数据进行高效加载。解决方案是将数据分割为基于瓦片的较小 JSON 文件,并沿用 Leaflet 现有的滑移地图瓦片网格。这使得浏览器仅能获取用户当前地图视图中可见的相关山峰数据。数据网格选定固定的缩放级别 10,以在请求数量与每个下载文件的大小之间取得平衡。在此级别下,一个阿尔卑斯瓦片尺寸约为 27x27 公里,而典型手机在缩放级别 12 时最多触及六个瓦片,中位瓦片大小为 13 KB(压缩后为 3.6 KB)。一个 Python 脚本用于生成这些瓦片文件,并附带非空瓦片的清单,确保仅请求必要的文件。每个瓦片的 JSON 数据经过紧凑化处理,采用整数坐标和字段头来最小化文件大小。山峰按显著性或孤立度进行排序,以控制不同地图缩放级别下的可见性,仅在较低缩放级别显示更为显著的山峰。客户端 JavaScript 利用 Leaflet 的 'moveend' 事件来确定需要哪些瓦片,并以最多四个并行请求进行获取,以防止在较慢连接上造成过载。一个包含 64 个瓦片的 LRU 缓存管理已下载数据,若瓦片不在当前视图中则淘汰最近最少使用的瓦片。山峰数据渲染在单个画布上,而非使用独立的 Leaflet 标记,从而提升了性能。点击地图执行已加载瓦片内的最近邻搜索,以识别附近的山峰。基于瓦片的网格天然支持深层链接,允许为特定山峰提供稳定的 URL。未来的改进包括添加更多类别的数据(如山口和观景点),并可能迁移至矢量瓦片(MVT)以与 MapLibre 等地图库集成。该系统无需服务器或数据库即可有效处理大型数据集,展示了简单文件网格的强大能力。