浙江大学紫金港校区 · 秋季植物地图

一个基于 React + TypeScript + MapLibre GL 的交互式校园植物地图应用。

🚀 技术栈

• React 18 - UI框架
• TypeScript - 类型安全
• Vite - 构建工具
• Tailwind CSS - 样式框架
• MapLibre GL - 地图库（开源替代 Mapbox）
• Zustand - 轻量级状态管理
• pnpm - 包管理器

📁 项目结构

src/
├── components/          # React组件
│   ├── Map/            # 地图相关组件
│   ├── Plants/         # 植物相关组件
│   └── UI/             # 通用UI组件
├── contexts/           # React Context
├── data/               # 数据文件
├── hooks/              # 自定义Hooks
├── stores/             # Zustand状态管理
├── types/              # TypeScript类型定义
└── utils/              # 工具函数

🛠️ 开发

安装依赖

pnpm install

启动开发服务器

pnpm dev

构建生产版本

pnpm build

预览生产构建

pnpm preview

构建独立单文件 HTML

生成一个完全自包含的 standalone HTML 文件，所有 CSS、JS 都内联在其中：

pnpm build:standalone

构建完成后，在 dist-standalone 目录中会生成一个独立的 index.html 文件，可以直接在浏览器中打开使用。

注意：

• standalone HTML 文件包含所有 JavaScript 和 CSS（内联）
• 图片资源（如植物图片、地图瓦片）仍需要从服务器加载或使用在线服务
• 地图瓦片会使用在线服务（CartoDB、Esri），不依赖本地文件
• 生成的 HTML 文件较大（通常几 MB），但可以完全离线使用（除了地图瓦片）

🚀 部署

GitHub Pages 部署

项目已配置 GitHub Actions 自动部署到 GitHub Pages。

部署步骤：

1. 在 GitHub 仓库设置中启用 GitHub Pages：

   • 进入仓库的 Settings → Pages
   • 在 Source 中选择 GitHub Actions

2. 推送代码到 main 或 master 分支：

   git push origin main

3. GitHub Actions 会自动构建并部署到 GitHub Pages

4. 访问地址：https://<你的用户名>.github.io/<仓库名>/

注意：

• 如果是 fork 的仓库，URL 使用的是你的 GitHub 用户名，不是原作者的
• 例如：如果你的用户名是 yourname，仓库名是 Autumn_map，则访问地址为 https://yourname.github.io/Autumn_map/
• base 路径会根据仓库名自动设置（例如：/Autumn_map/）
• 如果遇到资源文件 404 错误，检查 GitHub Pages 的 URL 路径是否与 base 配置匹配
• 如需手动设置 base 路径，可以在 workflow 中添加环境变量：VITE_BASE_PATH=/your-path/
• 确保 GitHub Pages 设置中使用 GitHub Actions 作为源
• 部署后可能需要几分钟才能生效

📝 功能特性

• 🗺️ 双图层地图（卫星影像 + 简约导航）
• 📱 响应式侧边栏（可折叠）
• 🌿 植物信息卡片展示
• 📍 实时GPS定位
• 🧭 路径导航功能
• 🎨 现代化UI设计

📚 参考文件

原始HTML版本保存在 reference/ 文件夹中，包括：

• index.html - HTML基础示例
• MAP_wa.html - Leaflet入门示例
• map_zju.html - 早期版本
• map_final.html - 完整功能版本

📄 许可证

MIT