Timeline Visualizer二次开发指南fork后如何自定义地图风格与主题色【免费下载链接】google-timeline-visualizerVisualize your year in travel using your Google Location History (Timeline) data项目地址: https://gitcode.com/GitHub_Trending/go/google-timeline-visualizerTimeline Visualizer是一款把 Google 位置历史Timeline导出文件变成动态旅行视频的开源项目。很多新手 fork 仓库后都想动手改造它换一套地图底图风格或者把标志性玫红色主题色换成自己喜欢的配色。本文将带你快速定位地图渲染与主题色的核心代码并给出 Android、Web、桌面 Python 三端各自的修改方法。1. 先看懂项目结构找到地图相关代码Timeline Visualizer 有三个可渲染端地图瓦片逻辑各自独立但思路一致端技术栈地图渲染入口Android 应用KotlinTimelinePainter.kt、TileRepository.ktWeb 应用TypeScriptweb/src/renderer.ts桌面 CLIPythonvisualizer.py三个端都默认使用 CARTO 的light_all浅色底图基于 OpenStreetMap 数据瓦片 URL 模板类似https://a.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.pngfork 后先跑通一次构建确认基线正常git clone https://gitcode.com/GitHub_Trending/go/google-timeline-visualizer2. 自定义地图风格换底图最快的 3 个位置地图风格浅色/深色/地形图等由瓦片 URL 决定改动集中在下面几处AndroidTileRepository.kt 中的cartoTileUrl()函数拼接瓦片地址把light_all换成 CARTO 其他图层如dark_matter、rastertiles/voyager即可切换风格。Webweb/src/renderer.ts 中的TILE_TEMPLATE常量与cartoTileUrl()函数改法相同画布底色#f2edf0也在这里建议与底图背景保持一致避免边缘露白。Python CLIvisualizer.py 的TILE_URL与carto_tile_url()函数。 提示底图服务需要 API Key。Android 构建时通过环境变量CARTO_BASEMAP_API_KEY注入见 app/build.gradle.ktsWeb 端用VITE_CARTO_BASEMAP_API_KEYPython 端直接读同名环境变量。本地开发export CARTO_BASEMAP_API_KEYyour-project-key换底图后别忘了让瓦片缓存失效Android 端缓存在carto-tiles-v2目录见 TileRepository.kt否则预览还是旧图。3. 自定义主题色一处改动全局生效项目默认品牌色是玫红色#E90064主题色分散在两层第一层UI 主题色按钮、导航、背景浅色主题app/src/main/res/values/colors.xml 中的brand与interactive深色主题app/src/main/res/values-night/colors.xml记得两处同步改主题组装app/src/main/res/values/themes.xml这里把颜色绑定到 Material3 的colorPrimary等槽位一般无需改动把#E90064改为你想要的色值例如深蓝#1A56DB重建后整个界面的按钮、选中态、图标着色都会跟着变。第二层地图上的轨迹线颜色轨迹线、移动标记的描边色硬编码在 TimelinePainter.kt 的几组Paint里oldTrailPaint、middleTrailPaint、recentTrailPaint、headRingPaint均使用Color.rgb(233, 0, 100)。建议把它们提取为可配置常量再统一替换成你的品牌色预览和导出视频会同时生效。Web 端对应的是 web/src/renderer.ts 中的轨迹宽度与颜色常量以及页面整体样式 web/src/style.css。4. 保持地图署名别删 attribution无论换哪套底图预览和导出视频中都必须保留署名文字© OpenStreetMap contributors © CARTO这是许可证要求。三端各自定义了MAP_ATTRIBUTION常量visualizer.py、web/src/renderer.ts项目用测试 tests/test_carto_configuration.py 校验底图配置改动后跑一下可以防止漏改./gradlew test lint python -m pytest隐私细节瓦片请求会向底图服务透露浏览区域参见 docs/privacy.md。5. 验证你的定制效果导入一份样例 Timeline 文件仓库自带 test-fixtures/seoul-bohol-sample.json选择日期区间点击 Preview 查看新底图与轨迹颜色生成一段 10 秒以内的 MP4确认导出视频中的颜色与署名正确按「底图 URL → 主题颜色值 → 轨迹 Paint 常量」这条路径修改基本就覆盖了自定义地图风格与主题色的全部要点。改完记得提交前跑一遍完整测试让上游合并你的改动时更顺利 【免费下载链接】google-timeline-visualizerVisualize your year in travel using your Google Location History (Timeline) data项目地址: https://gitcode.com/GitHub_Trending/go/google-timeline-visualizer创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考