企业官网建设流程全解析

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/TREK

TREK 是一款自托管的旅行规划器，它的地图功能支持 3D 建筑渲染、路线可视化、标记聚簇与交通叠加层，帮助新手也能轻松看懂行程全貌。本文用最短的篇幅讲清 TREK 地图的五大核心能力，以及在哪里设置、怎么上手。

上图就是典型的 TREK 行程规划地图：左侧是每日行程，右侧是地点列表，中间地图上既有一飞而过的航线弧线，也有地面行程的虚线连接。

地图渲染引擎怎么选：Leaflet 与 Mapbox GL 一键切换

TREK 默认使用Leaflet渲染地图，开箱即用、无需任何 Token。如果你想要更高级的视觉效果，可以在「设置 → 地图」中切换到Mapbox GL（向量瓦片，支持 3D 建筑与地形），甚至选择完全免费的MapLibre GL（基于 OpenFreeMap 向量瓦片，无需 Token）。

选择建议很简单：

如果选择了 Mapbox GL 却没有配置 Token，TREK 会自动回退到 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