企业官网建设流程全解析

Web Mercator投影完整教程：Timeline Visualizer如何让经纬度与地图瓦片完美对齐

【免费下载链接】google-timeline-visualizerVisualize your year in travel using your Google Location History (Timeline) data项目地址: https://gitcode.com/GitHub_Trending/go/google-timeline-visualizer

Timeline Visualizer 是一款开源的旅行时间线可视化工具，它能把你导出的 Google 位置历史（Timeline）数据变成可分享的旅行动画视频。它的核心难题之一，就是把 GPS 数据里抽象的经纬度，精准地画到一张张正方形的地图瓦片上——这一切都依赖Web Mercator 投影。本教程将用通俗的方式，带你搞懂这套坐标系是如何对齐的。

为什么是 Web Mercator 投影？🌍

GPS 记录的位置是球面上的（纬度、经度），而屏幕上的地图是一格一格的方形瓦片。直接按比例把经纬度"压扁"成矩形，高纬度地区会严重变形，瓦片之间也会错位。

Web Mercator 投影（EPSG:3857）是几乎所有在线地图的标准答案：它把地球表面展开成一个"世界方块"，纬度越高，横向拉伸越明显。只要轨迹点和瓦片都走同一套投影，二者就天然对齐。

经纬度转世界坐标：三步公式

Timeline Visualizer 把整个地球映射成一个 0~1 的方块（WorldPoint），公式只有两行：

• 经度：x = (longitude + 180) / 360
• 纬度：y = 0.5 - ln((1 + sin(lat)) / (1 - sin(lat))) / (4π)
• 纬度先被限制在 ±85.05112878°（Mercator 在极点处 y 会趋向无穷，必须截断）

Android 端的完整实现在 TimelineModels.kt 的WebMercator.project中；Web 端的同款公式在 geo.ts，两端行为完全一致，这也是多平台对齐的基础。

单元测试还验证了一个经典锚点：(0°, 0°) 必须投影到世界正中心 (0.5, 0.5)，见 WebMercatorTest.kt。

地图瓦片如何精确"卡"到坐标上？🗺️

在线地图采用"滑动地图"（slippy map）体系：某个缩放级别zoom下，世界被切成2^zoom × 2^zoom张瓦片。对齐的关键就是一次乘法：

• tileX = floor(worldX × 2^zoom)
• tileY = floor(worldY × 2^zoom)

因为轨迹点和瓦片都使用同一个 0~1 世界坐标，瓦片的左上角世界坐标tileX / 2^zoom就能直接换算到画布像素，做到零误差叠放。Web 端计算"当前视野需要哪些瓦片"的逻辑在 renderer.ts 的requiredTiles，把瓦片贴到画布上的代码在 renderer.ts 的drawMapBackground。

Android 端则由 TileRepository.kt 负责按zoom/x/y下载瓦片并做本地缓存；Web 端有对应的 tile-cache.ts 内存缓存。

边界情况：跨越日期变更线与极地航线 ✈️

世界方块在经度上是"首尾相接"的环，两个特殊问题需要处理：

• 跨日界线：东京（179°E）到旧金山（-179°W）应该走直线而不是绕地球一圈。WebMercator.shortestWrappedX（TimelineModels.kt）会检测哪种跨度更短，自动选择短路径。
• 极地走廊：接近极点时经度剧烈抖动，普通"逐点解卷绕"会凭空多绕地球一圈。geo.ts 的unwrapJourneyPoints专门识别高纬"走廊段"，用大圆线参考点重算横坐标，保证北极航线画得平滑。
• 瓦片换边：视野横跨 180° 经线时，requiredTiles用取模((tileX % count) + count) % count把瓦片号"卷绕"回有效范围，避免请求到不存在的瓦片。

小结：一张公式表看懂对齐原理 📌

只要轨迹数据与地图瓦片共用同一套 Web Mercator 世界坐标，再复杂的全年旅行轨迹也能与底图严丝合缝——这正是 Timeline Visualizer 让"你的足迹在地图上动起来"的底层魔法。

【免费下载链接】google-timeline-visualizerVisualize your year in travel using your Google Location History (Timeline) data项目地址: https://gitcode.com/GitHub_Trending/go/google-timeline-visualizer