TREK地图功能详解3D建筑、路线可视化与标记聚簇一网打尽【免费下载链接】TREKA self-hosted travel/trip planner with real-time collaboration, interactive maps, PWA support, SSO, budgets, packing lists, and more.项目地址: https://gitcode.com/GitHub_Trending/nomad22/TREKTREK 是一款自托管的旅行规划器它的地图功能支持 3D 建筑渲染、路线可视化、标记聚簇与交通叠加层帮助新手也能轻松看懂行程全貌。本文用最短的篇幅讲清 TREK 地图的五大核心能力以及在哪里设置、怎么上手。上图就是典型的 TREK 行程规划地图左侧是每日行程右侧是地点列表中间地图上既有一飞而过的航线弧线也有地面行程的虚线连接。地图渲染引擎怎么选Leaflet 与 Mapbox GL 一键切换TREK 默认使用Leaflet渲染地图开箱即用、无需任何 Token。如果你想要更高级的视觉效果可以在「设置 → 地图」中切换到Mapbox GL向量瓦片支持 3D 建筑与地形甚至选择完全免费的MapLibre GL基于 OpenFreeMap 向量瓦片无需 Token。选择建议很简单渲染引擎特点是否需要 TokenLeaflet经典 2D稳定省心不需要Mapbox GL向量瓦片 3D 建筑 地形需要pk.*公开 TokenMapLibre GL向量瓦片零配置不需要如果选择了 Mapbox GL 却没有配置 TokenTREK 会自动回退到 Leaflet地图永远不会显示空白。各引擎的地图设置页面可参考 wiki/Map-Settings.md。3D建筑与地形让地图“立”起来在 Mapbox GL 下开启3D Buildings Terrain开关后地图会自动以 45° 俯仰角展示建筑挤出效果卫星风格还会叠加基于 DEM 的真实地形高程巴黎的街道、东京的高楼会以立体形态呈现。 小技巧官方刻意在非卫星风格中关闭了地形数据避免路线线在透视下与标记点“漂移”这是为了保证 2D 标记与 3D 地面精确贴合实现细节见 client/src/components/Map/MapViewGL.tsx。路线可视化虚线连接 步行/驾车时间标签选中某一天后TREK 会用深色虚线按行程顺序连接当天的所有地点。当你把地图放大到 12 级时相邻地点之间会出现“时间胶囊”标签同时显示这段路程的预估步行时间和驾车时间驾车时间来自开源 OSRM 路由引擎无需 API Key。几个实用细节跨交通预订时路线自动断开——两地之间是航班、火车或邮轮时不会画一段“地面路线”穿过去已确认预订为实线待确认预订为虚线一眼区分状态侧边栏底部会汇总当天总距离与总耗时旁边就是Optimize优化路线按钮基于最近邻算法一键重排未锁定的地点让总路程最短随时可撤销标记聚簇缩小看全局放大看细节行程地点很多时TREK 不会让标记挤成一团。缩小地图时相近的标记会自动聚簇成一个带数字的圆钮点击聚簇地图自动放大到覆盖其所有成员继续放大到 11 级则完全禁用聚簇逐个显示。每个标记本身也包含丰富信息有照片的地点在圆钮中直接展示实景图没有照片则显示按类别着色的图标当前选中的地点标记更大方便定位 标记右下角的顺序角标显示该地点在当天行程中的次序出现在多天的地点会用·分隔显示多个位置聚簇行为的关键参数30 像素最大聚簇半径、11 级停止聚簇、最大缩放时“蜘蛛网”展开都配置在 client/src/components/Map/MapView.tsx 中。交通叠加层把航班、火车与自驾画进地图TREK 支持把机票、火车、租车、邮轮等预订直接画在地图上✈️航班与邮轮——画成地球大圆弧弧上浮动标签显示起降机场代码、飞行时长与距离如图中 LYS → GVA汽车、巴士、出租车、自行车——按需从 OSRM 获取真实道路路线加载完成前先用直线占位火车——画直线连接端点多段列车会画出完整的车站链跨国际日期变更线的路线会画成一条连续弧线不再被地图边缘截断叠加层默认关闭在日侧栏预订行旁点一下Route小图标即可单独开启也可以点行程工具栏的批量按钮一键显示/隐藏全部路线。彩蛋功能右键建点与 Atlas 世界足迹右键地图空白处Mapbox GL 下为中键即可打开地点表单坐标和反查地址都已自动填好——比手动搜索快得多管理员开启Atlas插件后主导航会出现世界地图去过哪些国家自动点亮还能标记州/省、维护心愿清单底部面板汇总你到过的国家数、城市数与连续出行年限总结TREK 的地图能力对新手极其友好默认 Leaflet 零配置可用追求视觉效果可以一键切到 3D 引擎路线时间标签、标记聚簇、交通叠加层全部开箱即用不需要写一行代码。想深入了解可继续阅读官方文档 wiki/Map-Features.md、wiki/Map-Settings.md 与 wiki/Route-Optimization.md。【免费下载链接】TREKA self-hosted travel/trip planner with real-time collaboration, interactive maps, PWA support, SSO, budgets, packing lists, and more.项目地址: https://gitcode.com/GitHub_Trending/nomad22/TREK创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
