Recently, Tianditu, together with China Cartographic Publishing House and other organizations, launched the "'Map' the Long March Route" thematic map to commemorate the 90th anniversary of the victory of the Long March. I went in and tried it out, and it felt quite impressive. It not only vividly displays the 25,000-li march route, but also turns the "Four Crossings of the Chishui River" into a dynamic simulation. Out of the professional instinct of a GIS worker, I casually dug into its network requests and frontend code to see its WebGIS architecture approach. Today I will do a purely technical breakdown.

Overall System Architecture

Based on my limited experience, it adopts a lightweight WebGIS architecture, which can be broken down into four layers from bottom to top:

  • Infrastructure layer: Tianditu global imagery service, vector annotations, and base API
  • Data layer: GeoJSON and JSON (main force units, place names, enemy and friendly situation data, etc.)
  • Control and logic layer: timeline state machine and MapLibre multi-view camera controller
  • Presentation layer: Vue 3 + MapLibre GL

The advantage of this architecture is that server-side pressure is light, and it is basically all static resource caching. All smooth interactions, layer filtering, and camera scheduling are handled by the client GPU.

Rendering Engine and Technology Selection

Previously, many people were used to directly importing the official JS API for Tianditu development, or using Leaflet or OpenLayers to load tiles. "Map the Long March Route" chose MapLibre GL JS.

The basemap directly connects to the Tianditu imagery WMTS service (img_w/wmts) as a raster source, and annotation fonts connect to the Tianditu vector font set (vector.tianditu.gov.cn/static/font). Using a MapLibre basemap supports WebGL hardware acceleration, and under long routes and high-density annotations, vector drawing avoids reflow of DOM annotations and makes zooming smoother.

Spatiotemporal Data Organization and Layer Splitting

In terms of data organization, different data are decoupled and split by business.

Through the console, one can see:

  • GeoJSON for the four main forces (Red First, Red Second, Red Fourth, and Red Twenty-Fifth Army);
  • Blockade line bunker and Soviet area guerrilla zone layers;
  • Ferry crossing, meeting point, and Chishui River water system layers, etc.

When the frontend switches between "all-army overview" and "single-army focus", it directly uses MapLibre's setLayoutProperty to toggle layer visibility, without destroying and recreating layers.

Dynamic Situation Simulation of the "Four Crossings of the Chishui River"

The most core interaction within the thematic map is the "Four Crossings of the Chishui River" submodule.

This part adopts a mechanism of "timeline + camera movement + staged visibility". When the user switches from the First Crossing to the Fourth Crossing, the state machine synchronously updates the transparency and highlighting of feature line segments, and at the same time calls MapLibre's flyTo to smoothly transition the center point, pitch, and bearing. Combined with the Chishui River water system and surrounding terrain basemap, it replaces static arrow stacking with dynamic spatiotemporal simulation.

Other

In addition, at historical points, the system also integrates LLM Q&A. When clicking a battle or ferry point, the sidebar provides an "Ask AI" entry. The frontend text rendering implements a typewriter effect, with built-in baseline latency and jitter, and adds pauses when encountering punctuation, simulating a streaming output experience, etc.

Last but not least, even Tianditu itself is using MapLibre now. You can really try it in your projects; it is truly easy to use...

References

  1. Tianditu "'Map' the Long March Route" thematic map: https://www.tianditu.gov.cn/changzheng/#/map
  2. MapLibre GL JS official documentation: https://maplibre.org/maplibre-gl-js/docs/