gpx.studio 本地部署教程如何配置 Mapbox Token 与自建 BRouter 路由服务器【免费下载链接】gpxstudio.github.ioThe online GPX file editor项目地址: https://gitcode.com/gh_mirrors/gp/gpxstudio.github.io想要免费、离线地把gpx.studio——这款功能完整的在线GPX 文件编辑器——跑在自己的电脑上本教程带你完成gpx.studio 本地部署全流程克隆仓库、在 res/config.json 中配置Mapbox Token再自建BRouter 路由服务器实现骑行与徒步路线规划。全程仅需 3 个核心步骤无需编写任何代码。一、快速开始克隆仓库并启动本地服务gpx.studio 是一个纯前端项目无需安装 Node.js 或任何依赖只需一个静态文件服务器。第一步克隆项目源码git clone https://gitcode.com/gh_mirrors/gp/gpxstudio.github.io cd gpxstudio.github.io第二步在根目录启动本地服务以 Python 为例python3 -m http.server 8000第三步浏览器访问http://localhost:8000此时页面可以打开但底图瓦片、高程数据等依赖 Mapbox 的功能无法使用——这正是下一步要解决的。二、配置 Mapbox Token只改一个文件gpx.studio 的所有外部服务配置都集中在 res/config.json 这一个文件中{ mapbox: 粘贴你的 Mapbox Access Token, mapbox_dev: 可选localhost 专用 Token, routing_url: http://127.0.0.1:443 }如何获取 Token在 Mapbox 官网注册免费账号免费额度足够本地调试进入账户页面创建一个新的Access Token将其粘贴到config.json的mapbox字段中。为什么有 mapbox 和 mapbox_dev 两个字段前端会判断当前访问的主机名非 localhost 域名使用mapbox而localhost 自动切换到mapbox_dev逻辑见 js/buttons.js。这样你可以在本地调试时单独使用一个 Token互不干扰。Mapbox Token 在本地部署中承担两项关键任务️底图瓦片加载 Mapbox Outdoors 与 Mapbox 卫星影像图层⛰️高程数据请求 Mapbox Terrain-RGB 高程瓦片并解码绘制高程曲线实现见 js/trace.js。三、验证本地部署是否成功重启本地服务后按以下清单逐项确认检查项预期结果切换 Mapbox 底图瓦片正常加载无灰色空白载入一份带高程的 GPX 文件底部高程曲线正常显示保存面板出现 Google Drive 云同步入口 提示GPX 文件可直接拖拽到页面上载入也支持拖拽导出无需点击Load GPX。四、自建 BRouter 路由服务器进阶gpx.studio 的两点间骑行/徒步路线功能依赖一个路由 API。官方站点使用的是公共路由服务器自建部署时你可以将其切换为本地BRouter实现完全离线、无请求配额限制的路线规划。BRouter 是一款基于 OpenStreetMap 数据的轻量级离线路由引擎对硬件要求极低家用电脑甚至树莓派都能流畅运行。BRouter 安装步骤按 BRouter 官方说明下载对应系统Linux / macOS / Windows的版本并安装下载所需的.brf路线数据覆盖你常用的区域即可启动路由服务例如运行brouted命令Web 服务默认监听443 端口浏览器访问http://127.0.0.1:443看到 BRouter 界面即表示服务就绪。把 gpx.studio 指向你的 BRouter只需修改 res/config.json 中的routing_url字段routing_url: http://127.0.0.1:443gpx.studio 按 BRouter 标准接口发起请求格式为?lonlats经度,纬度|经度,纬度profile运动模式formatgeojson请求拼接逻辑见 js/trace.js。左侧工具栏中的运动模式Bike、Racing bike、Mountain bike、Hiking 等会一一映射为不同的 BRouter profile选项定义见 index.html。修改config.json后刷新页面即可在地图上直接规划真实道路路线。五、常见问题排查现象可能原因解决方法地图整片灰白Mapbox Token 错误或无地图权限重新检查mapbox字段确认 Token 未过期高程曲线不显示Token 未授权 Terrain-RGB 瓦片在 Mapbox 账户中为该 Token 开启高程瓦片权限规划路线失败BRouter 服务未启动或端口不通先用浏览器访问http://127.0.0.1:443验证服务底图不更新浏览器缓存了旧配置强制刷新CtrlF5本地页面小结回顾本次gpx.studio 本地部署的完整流程✅git clone克隆仓库python3 -m http.server一键启动✅ 在 res/config.json 填入Mapbox Token点亮底图与高程功能✅ 进阶安装BRouter并将routing_url指向本地获得离线路线规划能力。完成以上步骤后你就拥有了一个功能完整、数据完全自控的 GPX 文件编辑工作台可以放心地处理骑行、徒步轨迹而不用担心在线服务的配额限制。【免费下载链接】gpxstudio.github.ioThe online GPX file editor项目地址: https://gitcode.com/gh_mirrors/gp/gpxstudio.github.io创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考