中国行政区划学习应用

一个使用真实GeoJSON地理数据的交互式中国行政区划学习工具，专为儿童地理教育设计。

🌟 功能特色

📍 真实地理数据

• 使用阿里云DataV提供的官方中国行政区划GeoJSON数据
• 包含34个省、自治区、直辖市的精确地理轮廓
• 支持实时数据加载和本地缓存

🎯 学习功能

• 随机学习模式：系统随机选择省份进行学习
• 分步引导：观察轮廓 → 显示名称 → 显示省会
• 进度跟踪：记录已学习的省份数量
• 视觉反馈：已学省份在地图上高亮显示

📱 移动端优化

• 响应式设计，完美适配手机和平板
• 触摸友好的交互界面
• 优化的字体和布局

🚀 快速开始

方式一：本地运行（推荐）

1. 下载代码

   # 如果已在项目目录中，直接运行
   python3 -m http.server 8080

2. 访问应用

   • 打开浏览器访问：http://localhost:8080/real-map.html
   • 或在手机浏览器中输入电脑IP地址：http://[电脑IP]:8080/real-map.html

方式二：部署到服务器

1. 上传文件

   上传所有文件到Web服务器目录
   

2. 配置HTTPS

   # 推荐使用HTTPS，因为某些地理数据API需要安全连接
   

📁 文件结构

provinces/
├── real-map.html          # 真实地图版本主页面
├── index.html             # 简化版本页面
├── styles.css             # 样式文件
├── geo-data-loader.js     # 地理数据加载器
├── real-map-app.js        # 真实地图应用逻辑
├── app.js                 # 简化版应用逻辑
├── data.js                # 简化版数据文件
└── README.md              # 说明文档

🛠️ 技术架构

前端技术栈

• HTML5 + CSS3：现代Web标准
• 原生JavaScript：无框架依赖，加载快速
• SVG：矢量图形，适合地图显示
• GeoJSON：标准地理数据格式

数据来源

• 阿里云DataV：https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json
• 备用数据源：GitHub开源中国地图数据
• 降级机制：网络失败时使用本地简化数据

坐标投影

• 使用简化的墨卡托投影
• 适配中国地理范围（73.5°E-135°E, 18°N-53.5°N）
• 自动计算最佳显示比例

🎮 使用说明

基本操作

1. 开始学习：点击"开始学习"按钮
2. 观察轮廓：仔细观察显示的省份形状
3. 显示名称：点击"显示省份名称"查看答案
4. 显示省会：点击"显示省会"查看省会位置
5. 下一个：点击"下一个省份"继续学习

快捷键

• 数字键1：显示省份名称
• 数字键2：显示省会
• 数字键3：下一个省份
• ESC键：返回全国地图

交互功能

• 点击省份：直接在全国地图上点击任意省份开始学习
• 悬停提示：鼠标悬停显示省份和省会信息
• 进度统计：实时显示学习进度

🔧 自定义配置

修改数据源

// 在 geo-data-loader.js 中修改数据源URL
const response = await fetch('你的地图数据URL');

调整地图样式

/* 在 styles.css 中修改省份颜色 */
.province {
    fill: #your-color;
    stroke: #your-border-color;
}

添加新功能

// 在 real-map-app.js 中扩展应用功能
class RealMapProvinceApp {
    // 添加你的自定义方法
}

🐛 故障排除

地图数据加载失败

• 检查网络连接：确保能访问外部API
• 查看控制台：打开浏览器开发者工具查看错误信息
• 使用HTTPS：某些数据源需要安全连接
• 等待重试：网络暂时不稳定时会自动重试

移动端显示问题

• 检查视口设置：确保meta viewport标签正确
• 测试触摸事件：在真实设备上测试交互
• 调整缩放：根据屏幕尺寸调整地图大小

性能优化

• 数据缓存：已访问的地图数据会缓存到浏览器
• 按需加载：只加载当前需要的省份详细数据
• 图片压缩：SVG矢量图形自适应分辨率

🎓 教育应用建议

适用年龄

• 小学3-6年级：认识省份形状和位置
• 初中地理课：巩固行政区划知识
• 成人学习：快速复习中国地理

学习策略

1. 形状记忆：先观察省份独特的形状特征
2. 位置关联：关注相邻省份的位置关系
3. 重复练习：多次学习加深印象
4. 分组学习：按地理区域分组学习

扩展活动

• 绘制地图：让孩子手绘学过的省份
• 地理故事：讲述各省份的历史和文化
• 实地探索：结合旅行计划学习目的地地理

📈 未来规划

• 添加地市级行政区划
• 集成省份文化和历史信息
• 支持多种地图投影方式
• 添加语音播报功能
• 开发离线版本
• 支持自定义学习计划

📄 开源协议

本项目采用 MIT 协议开源，欢迎贡献代码和建议。

🤝 贡献指南

1. Fork 本项目
2. 创建功能分支
3. 提交你的修改
4. 推送到分支
5. 创建 Pull Request

📞 技术支持

如有技术问题或改进建议，欢迎：

• 提交 Issue
• 发送邮件
• 参与讨论

---

让地理学习更有趣！ 🌍✨