从公元前 403 年三家分晋到当代，18 个历史时期、164 幅疆域快照被塞进一个纯前端网页，拖动时间轴，山河就变成那一年的模样。点开一座城，还能看到它跨越十八朝的建制沿革，读史时的地理盲区被一张可交互地图补上了。

读《资治通鉴》或是背唐诗宋词，最让人出戏的往往是地理盲区。

六朝古都建康、苏东坡被贬的黄州、韩愈勒马的秦岭蓝关、岳飞北伐的朱仙镇，放在今天的地图上究竟在哪儿？阅读五胡十六国或五代十国史，面对走马灯似的政权更迭，脑子里很难拼出一张清晰的版图。去翻纸质版《中国历史地图集》，又难免在厚重的卷帙里顾此失彼。

最近在 GitHub 上刷到一个叫「江山时序」的开源项目，直接治好了这种读史时的空间焦虑。

它把中国 2400 多年的历史做成了可拖动时间轴的交互地图。时间跨度从公元前 403 年（《资治通鉴》开篇的“三家分晋”）一路延伸到当代，将 18 个历史时期、164 幅多阶段疆域快照装进了一个纯前端网页里。拖到哪一年，山河就变成那一年的模样；点开任何一座城，就能翻开它跨越十八个时期的建制沿革档案。

江山时序：把 2400 年疆域装进一张可拖动的网页

项目作者是一位酷爱历史与人文地理的程序员。今年 7 月他曾尝试做一个历史地理小游戏，半途搁置后，在 10 月重新立项，专注于打磨这张纯粹的历史地图。短短两周半的深夜和周末，他与 AI 协作提交了两百多次代码，对照正史与开源数据集逐一修补疆域漏洞。目前项目GitHub Star 数已经冲到了 4.9k，并且依然保持着高频更新。

项目地址：https://github.com/DeanChensj/jiangshan-map

01 零门槛上手：两种方式任选

整个项目采用原生零依赖架构，体验起来毫无负担，共有两种打开方式：

方式一 本地部署

因为完全没有第三方前端依赖和复杂的构建步骤，把代码克隆到本地后，用 Python 起一个最基础的静态服务就能直接运行，在浏览器打开 localhost:8000 即可：

git clone https://github.com/DeanChensj/jiangshan-map.git

cd jiangshan-map

python3 -m http.server 8000 #mac/linux

py -m http.server 8000 #windows

如果你习惯使用容器，项目也内置了配置文件，执行 docker compose up -d –build 就能通过 Nginx 静态服务跑在 8008 端口。

方式二 在线直接访问

不想折腾命令行的话，作者提供了完全一致的在线版，点开即玩（页面内置了公有领域的《流水》《阳关三叠》等古琴名曲录音，边听边看更有沉浸感）：

在线访问地址：

https://deanchen.me/jiangshan-map/

划重点

项目仓库里已经放好了 docker compose 配置，端口 8008。

下面带你看看这张舆图最核心的四种玩法。

02 玩法一：拖动时间轴，看天下一帧帧分合易主

这是「江山时序」最直观的视觉震撼。从战国七雄与周、越、巴蜀、中山、义渠同屏并立，到汉末三国群雄割据，再到南北朝、五代十国以及宋、辽、西夏、大理、金、蒙古的对峙，所有政权都以高对比度的宣纸设色铺陈在同一张画布上。鼠标悬停在左下角图例的政权名上，对应疆域即刻高亮；点击一下，镜头便直接聚焦过去。

地图在细节设计上极其考究。每逢重大的开疆或失地节点，比如公元前 316 年司马错灭巴蜀、公元 43 年马援平交趾立铜柱、648 年唐置安西四镇、1881 年曾纪泽签《中俄伊犁条约》收复伊犁，点击时间轴上的阶段圆点切换版图时，画面会用朱砂色虚线浮现上一阶段的“虚线残影”。领土的盈亏得失，两相对照一目了然。

与此同时，黄河历代改道、云梦泽与罗布泊（蒲昌海）等古湖的消长，以及历代长城、大运河、丝绸之路与郑和航线，都会随当朝版图同步演进。

时间轴上还会实时显示当朝在位帝王（如汉武帝 ）与精确的年号纪年。把地图放大后，鼠标悬停在任意州郡上，就能查看当时的政区归属与现代省份对照；开启右上角的“透视镜”功能，还能直接把现代省界投射在古舆图之上。

划重点

切换阶段圆点时，上一阶段的疆域会用朱砂虚线留下残影，盈亏得失两相对照。

03 玩法二：点地溯源，翻开一座城的 2400 年身世

在地图上单击任意古城或名关（或者双击画布任意位置），就会弹出一张“点地溯源”卡片。卡片顶部是这座城市的专属判词与历史小传，下方则按 18 个历史时期逐行梳理它的名称与建制沿革：从战国与秦代的郡、汉代的刺史部、唐代的道、宋代的路，一路看到元明清的行省府州与现代省市。曾作为政权都城的年份，还会附带专属的“王朝都城”徽章。

点地溯源卡片：一座城跨越十八个时期的建制沿革

每个朝代条目下方，都内嵌了当年发生在这片土地上的定点地标大事：咸阳的商鞅变法、樊城的关羽水淹七军、长安的玄武门之变、临安的岳飞蒙难。点击卡片右上角的“史事纪要”即可筛选出发生过大事的朝代，再点具体事件，时间轴和疆域版图就会瞬间穿越回那一年。

此外，地图用传统的汉阙城楼图标标出了函谷关、潼关、剑门关、雁门关、玉门关、阳关、山海关等 20 座天下雄关（附有山脉水系扼守形势详解），同时收录了赤壁、垓下、五丈原、兰亭、岳阳楼、滕王阁、蓝关、楼兰、热海（伊塞克湖）等诗词名胜与古战场。韩愈诗里“雪拥蓝关马不前”的蓝关究竟卡在秦岭哪道山口，点开便知。

划重点

函谷关、潼关、剑门关等 20 座雄关，都附了山脉水系扼守形势详解。

04 玩法三：点人溯事，跟着历史人物重走万里青史路

如果说时间轴是横坐标，城池沿革是纵坐标，那么“点人溯事”就是把鲜活的人放进了历史现场。

点开左上角的万能搜索框，输入任意帝王将相或文豪名僧（如曹操、霍去病、司马迁、岳飞、郑和），就能展开人物生平纪事面板，用古籍游丝般的朱砂飞白弧线，将人物一生的行迹一站站串在动态演变的疆域上。

点人溯事：朱砂飞白弧线串起人物一生行迹

其中最值得细品的，是系统精心编排的七条长线人物专题：

秦始皇（前 238–前 221）

从咸阳亲政平乱到临淄受降，逐站看韩赵魏楚燕齐一步步并入大秦版图

张骞（前 138–前 126）

匈奴羁留十余载持汉节不失，一路凿空大宛、康居、大月氏

诸葛亮（207–234）

隆中三顾、赤壁联吴、白帝托孤、五月渡泸南征、六出祁山至五丈原星落

玄奘（627–645）

孤身出玉门关、涉莫贺延碛、越凌山雪隘，抵那烂陀求法、曲女城辩经

李白（701–762）

自安西碎叶入蜀、仗剑出三峡、长安供奉翰林、洛阳逢杜甫、终老当涂

苏轼（1037–1101）

眉山出川赴京、密州超然台赏月、黄州写《赤壁赋》，一路贬至惠州与海南儋州

王阳明（1472–1529）

龙场悟道、巡抚南赣破贼、35 日生擒宁王、天泉证道，归途留绝笔“此心光明”

按键盘左右方向键逐站推进时（或按空格键自动播放），底部的历史年份、在位君主、年号与王朝版图会跟着古人的脚步同步流转，卡片上还会浮现他们当年在此地写下的《史记》《出师表》《传习录》或诗词名篇原句。

划重点

按左右方向键逐站推进，空格键自动播放；卡片上会浮现古人当年在此地写下的原句。

05 玩法四：彩蛋模式，舆图寻址盲测你能当几品官

觉得自己历史地理功底不错？点击搜索框引导栏角落的“古地名小试”，就能开启“舆图寻址挑战”。

在这个模式下，地图会隐去所有城市标注，分 10 轮按梯度递增难度。题目只给出朝代背景与掌故线索（比如“西汉时期的姑臧”或“六朝古都建康”，绝不剧透现代城市名），让你凭着对山川水系的直觉在古地图上盲测落针。系统会根据落针点与真实坐标的大圆距离计算得分，答完 10 题后，按总分授予“太史令·舆图大家”“职方郎中”或“州郡从事”等古代职方官阶封号。

划重点

10 轮答题按大圆距离算分，最后授「太史令·舆图大家」「职方郎中」这类古代职方官阶。

06 深链分享：每一个历史瞬间都是一条独立 URL

项目设计了一套极为轻巧的深链（Deep Links）机制，你在地图上看到的每一个画面都会实时映射为地址栏参数。比如想分享公元前 260 年长平之战的格局，直接复制链接即可：

长平之战格局

https://deanchen.me/jiangshan-map/?year=-260

深链：地址栏参数与地图画面实时对应

更妙的是，你可以把年份和地名组合起来，用一条 URL 复现苏东坡“问汝平生功业，黄州惠州儋州”的跨年贬谪路线。打开下面这条链接，每点击一站路标，底层的宋代版图就会自动切换到对应年份：

苏东坡贬谪路线

https://deanchen.me/jiangshan-map/?year=1079,1080,1094,1097&place=湖州，黄州，惠州，儋州

如果在任意 URL 末尾加上 &embed=1 放进 iframe，就能把这张动态古地图直接嵌入个人博客、Notion 笔记或历史课件中（微信公众号、知乎、小红书等不支持 iframe 的平台，直接贴纯链接即可跳转）。

划重点

把年份和地名一起写进 URL，一条链接就能复现苏东坡的贬谪路线。

07 把地图集变成 AI 的空间引擎：原生支持 MCP 与 Skill

除了供人把玩，「江山时序」还做了一个架构设计：它原生面向 AI Agent 开放了底层能力。

作者对大语言模型的特性看得很透：让大模型直接推算古代城池的经纬度坐标，极易产生幻觉；但让它从古诗或史料里提取 year（年份）和 place（古今地名）这两个语义参数，准确率却极高。因此，整个项目的 AI 接口完全围绕“零坐标双参数协议”构建，把复杂的古今地名解析、疆域渲染和轨迹连线全部交由地图引擎在本地完成。

目前主要有两种接入方式：

方式一 接入本地 MCP Server（标准协议）

项目内置了零第三方依赖、无需 npm install 的本地 stdio 服务，单次查询响应时间不到 5 毫秒（提供 inspect_place、inspect_person、search_atlas 三个原生工具）。你可以在 Claude Code、Cursor、DSH（@deepseek-ai/dsh-mcp-client）或 WorkBuddy 等客户端的 mcpServers 配置文件中加入以下代码，或者直接把这段配置发给你的 Agent 让它自动挂载：

mcpServers 配置MCP CONFIG

{

“mcpServers”: {

“jiangshan-atlas”: {

“command”: “node”,

“args”: [“/absolute/path/to/jiangshan-map/scripts/mcp_server.js”]

}

}

}

注意将 /absolute/path/to/jiangshan-map/scripts/mcp_server.js 替换为你本地克隆的实际项目路径。

以 DSH 客户端为例：

DSH 客户端挂载 MCP 后的实测

挂载成功后，我们直接用自然语言提问：“画出安史之乱三年间杜甫的流亡路线”。

Agent 会自动调用地图引擎解析年份与古地名，并直接生成一张带朱砂轨迹的历史疆域图：

方式二 安装 Agent Skill（开箱即用）

仓库里还打包好了现成的技能目录 skills/jiangshan-atlas/（内含零依赖 CLI 渲染出图脚本 jiangshan.py）。现在的 Agent 安装技能非常轻量，直接给它发送下面这句指令即可：

学习并安装这个skill:

https://github.com/DeanChensj/jiangshan-map/tree/main/skills/jiangshan-atlas

我们以 WorkBuddy 为例，安装完成后先让它做个自我介绍：

接着实测一个经典问题：

李白和杜甫在哪相遇

Agent 不仅给出了天宝三载（744 年）两人在洛阳初次相逢的史实，还直接调用技能渲染出了当年的唐代舆图与落点卡片：

划重点

MCP 服务零第三方依赖，单次查询不到 5 毫秒；Agent 只需给出 year 和 place 两个参数。

08 数据考据与开源许可

作为一个数字人文项目，「江山时序」的数据来源与版权边界梳理得非常清晰。

数据考据：疆域轮廓与政区边界的来源说明

它的宏观疆域轮廓以开源历史底图（aourednik/historical-basemaps）为起点，再对照《资治通鉴》与历代正史手工重绘校勘；郡、州、府一级政区边界源自哈佛燕京学社与复旦大学联合建设的 CHGIS V6 数据集，以及历史学家 Robert M. Hartwell 的中国历史 GIS 数据集（精度简化至 0.01°），并参照谭其骧主编的《中国历史地图集》进行文字考据校对（未包含原书图像与测绘数据）；现代省界取自阿里云 DataV GeoAtlas。

在开源协议上，项目代码与自建数据采用 GPL-3.0 协议开放；源自 CHGIS 与 Hartwell 数据集的州郡边界及战国疆域数据，则严格遵循原始学术条款（仅限学术及非商业用途）。作者也在文档中坦诚说明，图中的古代疆域与政区属于示意性近似复原，旨在帮大众建立直观的时空框架，不替代严谨的现代测绘成果。

划重点

与 Hartwell 数据集的州郡边界仅限学术及非商业用途，二次开发前要看清条款。

写在最后

打开网页，去亲手翻一遍这 2400 年的万里江山吧。

TAKEAWAY 好工具让记忆有了坐标。

「拖动时间轴的那一刻，朝代终于成了脚下可以反复往返的山河。」——项目博客里记下的一条读者留言

想看哪一年的山河，打开网页自己拖一遍。