用六种颜色标记你到访过的中国每一座城市。
灵感来自日本的 JapanEx（日本制县）——用颜色标记到访过的都道府县。中国有 333 个地级行政区，是日本 47 个都道府县的 7 倍，因此本项目采用两级交互设计：全国省级总览 → 点击省份进入地级市视图。
| 等级 | 含义 | 颜色 |
|---|---|---|
| L0 | 没去过 | 天水蓝 |
| L1 | 路过过 | 青黛 |
| L2 | 停留过 | 缥（浅碧） |
| L3 | 游玩过 | 金（琥珀黄） |
| L4 | 住宿过 | 朱砂 |
| L5 | 居住过 | 赭（深赤） |
- 两级地图交互：全国省级地图 → 点击省份放大到地级市 → 点击城市设置等级
- 直辖市区级视图：北京/天津/上海/重庆可放大查看各区
- 港澳放大窗口：右下角 inset map，解决港澳在全国地图上太小的问题
- 数据持久化：自动保存到浏览器 localStorage，刷新不丢失
- URL 分享码：333 个城市的等级压缩到 ~168 字符的 URL，一键分享
- 导出大图：生成包含全部地级市着色的 2400×1600 PNG 图片
- 中华历史风格：竹黄宣纸底色、朱砂强调色、思源宋体，呈现古典舆图质感
- 打开网站，看到全国省级地图
- 点击任意省份，进入该省的地级市视图
- 点击城市，弹出等级选择面板，选择你的到访等级
- 点击左上角「返回全国」回到总览
- 工具栏：「保存图片」导出 PNG / 「分享」复制分享链接 / 「重置」清除所有标记
# 安装依赖
npm install
# 启动开发服务器
npm run dev
# 构建静态文件（输出到 out/ 目录）
npm run build本项目配置了 output: "export"，构建产物是纯静态文件，可部署到任何静态托管服务。
Vercel（推荐）：fork 本仓库 → Vercel 导入 → 自动部署，零配置。
自建服务器：npm run build → 将 out/ 目录上传到 Nginx 即可。
详见 部署指南。
- 框架：Next.js 16 (App Router, 静态导出)
- 地图渲染：D3.js (d3-geo) — 仅做投影计算，SVG 由 React 渲染
- 样式：Tailwind CSS 4
- 地理数据：阿里 DataV.GeoAtlas GeoJSON
- 字体：Noto Serif SC（思源宋体）
技术细节与踩坑记录见 技术说明。
├── public/geojson/ # GeoJSON 地理数据
│ ├── china.json # 全国省级边界
│ └── provinces/*.json # 各省地级市/区级边界
├── src/
│ ├── app/ # Next.js 页面
│ ├── components/ # React 组件（地图、面板、工具栏）
│ ├── hooks/ # 自定义 Hook（状态管理、D3 投影）
│ ├── lib/ # 工具库（城市数据、分享编码、导出）
│ └── types/ # TypeScript 类型定义
├── scripts/ # GeoJSON 数据下载脚本
└── docs/ # 设计稿、部署指南、技术说明
MIT