gpx.studio 本地部署教程如何配置 Mapbox Token 與自建 BRouter 路由服務(wù)器【免費(fèi)下載鏈接】gpxstudio.github.ioThe online GPX file editor項(xiàng)目地址: https://gitcode.com/gh_mirrors/gp/gpxstudio.github.io想要免費(fèi)、離線地把gpx.studio——這款功能完整的在線GPX 文件編輯器——跑在自己的電腦上本教程帶你完成gpx.studio 本地部署全流程克隆倉(cāng)庫(kù)、在 res/config.json 中配置Mapbox Token再自建BRouter 路由服務(wù)器實(shí)現(xiàn)騎行與徒步路線規(guī)劃。全程僅需 3 個(gè)核心步驟無(wú)需編寫任何代碼。一、快速開(kāi)始克隆倉(cāng)庫(kù)并啟動(dòng)本地服務(wù)gpx.studio 是一個(gè)純前端項(xiàng)目無(wú)需安裝 Node.js 或任何依賴只需一個(gè)靜態(tài)文件服務(wù)器。第一步克隆項(xiàng)目源碼git clone https://gitcode.com/gh_mirrors/gp/gpxstudio.github.io cd gpxstudio.github.io第二步在根目錄啟動(dòng)本地服務(wù)以 Python 為例python3 -m http.server 8000第三步瀏覽器訪問(wèn)http://localhost:8000此時(shí)頁(yè)面可以打開(kāi)但底圖瓦片、高程數(shù)據(jù)等依賴 Mapbox 的功能無(wú)法使用——這正是下一步要解決的。二、配置 Mapbox Token只改一個(gè)文件gpx.studio 的所有外部服務(wù)配置都集中在 res/config.json 這一個(gè)文件中{ mapbox: 粘貼你的 Mapbox Access Token, mapbox_dev: 可選localhost 專用 Token, routing_url: http://127.0.0.1:443 }如何獲取 Token在 Mapbox 官網(wǎng)注冊(cè)免費(fèi)賬號(hào)免費(fèi)額度足夠本地調(diào)試進(jìn)入賬戶頁(yè)面創(chuàng)建一個(gè)新的Access Token將其粘貼到config.json的mapbox字段中。為什么有 mapbox 和 mapbox_dev 兩個(gè)字段前端會(huì)判斷當(dāng)前訪問(wèn)的主機(jī)名非 localhost 域名使用mapbox而localhost 自動(dòng)切換到mapbox_dev邏輯見(jiàn) js/buttons.js。這樣你可以在本地調(diào)試時(shí)單獨(dú)使用一個(gè) Token互不干擾。Mapbox Token 在本地部署中承擔(dān)兩項(xiàng)關(guān)鍵任務(wù)?底圖瓦片加載 Mapbox Outdoors 與 Mapbox 衛(wèi)星影像圖層??高程數(shù)據(jù)請(qǐng)求 Mapbox Terrain-RGB 高程瓦片并解碼繪制高程曲線實(shí)現(xiàn)見(jiàn) js/trace.js。三、驗(yàn)證本地部署是否成功重啟本地服務(wù)后按以下清單逐項(xiàng)確認(rèn)檢查項(xiàng)預(yù)期結(jié)果切換 Mapbox 底圖瓦片正常加載無(wú)灰色空白載入一份帶高程的 GPX 文件底部高程曲線正常顯示保存面板出現(xiàn) Google Drive 云同步入口 提示GPX 文件可直接拖拽到頁(yè)面上載入也支持拖拽導(dǎo)出無(wú)需點(diǎn)擊Load GPX。四、自建 BRouter 路由服務(wù)器進(jìn)階gpx.studio 的兩點(diǎn)間騎行/徒步路線功能依賴一個(gè)路由 API。官方站點(diǎn)使用的是公共路由服務(wù)器自建部署時(shí)你可以將其切換為本地BRouter實(shí)現(xiàn)完全離線、無(wú)請(qǐng)求配額限制的路線規(guī)劃。BRouter 是一款基于 OpenStreetMap 數(shù)據(jù)的輕量級(jí)離線路由引擎對(duì)硬件要求極低家用電腦甚至樹(shù)莓派都能流暢運(yùn)行。BRouter 安裝步驟按 BRouter 官方說(shuō)明下載對(duì)應(yīng)系統(tǒng)Linux / macOS / Windows的版本并安裝下載所需的.brf路線數(shù)據(jù)覆蓋你常用的區(qū)域即可啟動(dòng)路由服務(wù)例如運(yùn)行brouted命令Web 服務(wù)默認(rèn)監(jiān)聽(tīng)443 端口瀏覽器訪問(wèn)http://127.0.0.1:443看到 BRouter 界面即表示服務(wù)就緒。把 gpx.studio 指向你的 BRouter只需修改 res/config.json 中的routing_url字段routing_url: http://127.0.0.1:443gpx.studio 按 BRouter 標(biāo)準(zhǔn)接口發(fā)起請(qǐng)求格式為?lonlats經(jīng)度,緯度|經(jīng)度,緯度profile運(yùn)動(dòng)模式formatgeojson請(qǐng)求拼接邏輯見(jiàn) js/trace.js。左側(cè)工具欄中的運(yùn)動(dòng)模式Bike、Racing bike、Mountain bike、Hiking 等會(huì)一一映射為不同的 BRouter profile選項(xiàng)定義見(jiàn) index.html。修改config.json后刷新頁(yè)面即可在地圖上直接規(guī)劃真實(shí)道路路線。五、常見(jiàn)問(wèn)題排查現(xiàn)象可能原因解決方法地圖整片灰白Mapbox Token 錯(cuò)誤或無(wú)地圖權(quán)限重新檢查mapbox字段確認(rèn) Token 未過(guò)期高程曲線不顯示Token 未授權(quán) Terrain-RGB 瓦片在 Mapbox 賬戶中為該 Token 開(kāi)啟高程瓦片權(quán)限規(guī)劃路線失敗BRouter 服務(wù)未啟動(dòng)或端口不通先用瀏覽器訪問(wèn)http://127.0.0.1:443驗(yàn)證服務(wù)底圖不更新瀏覽器緩存了舊配置強(qiáng)制刷新CtrlF5本地頁(yè)面小結(jié)回顧本次gpx.studio 本地部署的完整流程?git clone克隆倉(cāng)庫(kù)python3 -m http.server一鍵啟動(dòng)? 在 res/config.json 填入Mapbox Token點(diǎn)亮底圖與高程功能? 進(jìn)階安裝BRouter并將routing_url指向本地獲得離線路線規(guī)劃能力。完成以上步驟后你就擁有了一個(gè)功能完整、數(shù)據(jù)完全自控的 GPX 文件編輯工作臺(tái)可以放心地處理騎行、徒步軌跡而不用擔(dān)心在線服務(wù)的配額限制。【免費(fèi)下載鏈接】gpxstudio.github.ioThe online GPX file editor項(xiàng)目地址: https://gitcode.com/gh_mirrors/gp/gpxstudio.github.io創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考