被天地图的“图步长征路”惊艳到了，扒一扒它的技术细节...

最近天地图联合中国地图出版社等单位为纪念长征胜利90周年上线了“‘图’步长征路”专题地图，小编进去试玩了一下感觉挺惊艳的，不仅生动展示了两万五千里的行军路线，“四渡赤水”也被做成了动态推演。出于GIS打工人的职业本能，小编顺手扒了扒它的网络请求和前端代码，看看它的 WebGIS 架构思路，今天就来做个纯技术维度的拆解。

系统总体架构

根据小编浅薄的经验观察，它采用了一套轻量化 WebGIS 架构，由下至上可以拆解为四层：

• 基础设施层：天地图全球影像服务、矢量注记、基础 API
• 数据层：GeoJSON、JSON（主力军部队、地名、敌我态势等数据）
• 控制与逻辑层：时间轴状态机、MapLibre 的多视角相机控制器
• 表现层：Vue 3 + MapLibre GL

这种架构的好处在于：服务端压力轻，基本全是静态资源缓存，所有的平滑交互、图层过滤与镜头调度全部交给客户端 GPU 处理。

渲染引擎与技术选型

之前做天地图开发很多人习惯直接引官方 JS API，或者用 Leaflet、OpenLayers 加载切片，“图”步长征路则选用了 MapLibre GL JS。

底图直接接入天地图影像 WMTS 服务（img_w/wmts）作为 raster 源，注记字体接入天地图矢量字体集（vector.tianditu.gov.cn/static/font）。使用 MapLibre 底图在支持 WebGL 硬件加速，并且在长路线与高密度注记的情况下，矢量绘制避免了 DOM 标注的重排，缩放更流畅。

时空数据组织与图层切分

数据组织上将不同的数据按业务进行了解耦切分。

通过控制台可以看到：

• 四大主力军（红一、红二、红四、红二十五军） 的 GeoJSON；
• 封锁线碉堡、苏区游击区图层；
• 渡口、会师点与赤水河水系图层等

前端切换“全军总览”与“单军聚焦”时，直接通过 MapLibre 的 setLayoutProperty 切换图层 visibility，无需销毁重建图层。

“四渡赤水”的动态态势推演

专题内最核心的交互是“四渡赤水”子模块。

这一块采用了“时间轴 + 相机运镜 + 分期显隐”的机制，用户切换一渡到四渡时，状态机同步更新要素线段的透明度与高亮，同时调用 MapLibre 的 flyTo 平滑过渡中心点、俯仰角（pitch）和航向角（bearing）。配合赤水河水系与周边地形底图，用动态时空推演替代了静态箭头堆叠。

其他

另外在历史点位上，系统还接入了大模型问答，点击战役或渡口点位时，侧边栏提供了“问AI”入口，前端文本渲染实现了一个打字机效果，内置了基准时延与抖动，并在遇到标点符号时增加停顿，模拟流式输出的体验等。

最后的最后，连天地图官方都在使用 MapLibre 了，大家在项目中真的可以尝试了，是真的好用...

参考

1. 天地图“图”步长征路专题：https://www.tianditu.gov.cn/changzheng/#/map
2. MapLibre GL JS 官方文档：https://maplibre.org/maplibre-gl-js/docs/