https://jlhu.iliujia.com/jlhu-map/#/?hid=84036

1. 项目背景与目标
本项目是一个基于地理信息的手绘地图展示与管理系统，主要用于园区、景区、校园、小镇等场景的可视化导览。
系统目标：
提供美观流畅的手绘地图 H5 页面，支持地图浏览、点位查看、详情展示。
提供稳定的服务端接口，支撑地图、点位、分类、图片等数据的读取与管理。
提供易用的后台管理系统，让管理员可维护地图、点位、分类、弹窗内容等。
2. 核心功能
H5 手绘地图端
手绘地图图片展示、缩放、拖拽
地图点位（POI）图标展示
点击点位弹出详情（名称、介绍、图片、联系方式）
点位分类筛选（如景点、服务点、厕所、出入口）
地图定位、地图复位
服务端
地图基础信息接口
点位列表、点位详情接口
点位分类接口
图片上传、数据增删改查接口
后台管理系统
地图管理：上传手绘底图、配置地图尺寸、开关状态
点位管理：新增 / 编辑 / 删除点位、设置坐标、图标、详情
分类管理：点位分类增删改查
系统设置、管理员登录

1. 整体架构
采用 前后端分离架构，分为三层：
H5 前端层：手绘地图交互展示
服务端 API 层：提供数据接口、业务逻辑、权限验证
后台管理前端层：管理员操作界面
2. 技术栈
H5 手绘地图端
HTML5 + CSS3 + JavaScript + 第三方地图交互库（如 pinchzoom、leaflet 或手写拖拽缩放）
服务端
SpringBoot + MyBatis/MyBatis-Plus + MySQL
后台管理系统
Vue2/Vue3 + Element UI + Axios
数据库
MySQL（存储地图信息、点位、分类、管理员）
文件存储
本地存储 / 云存储（地图图片、点位图片）
三、数据库设计（核心表）
map 地图表
id、地图名称、地图图片、宽度、高度、状态、创建时间
category 分类表
id、分类名称、图标、排序
point 点位表
id、地图 id、分类 id、点位名称、坐标 x、坐标 y、介绍、图片、联系方式、状态
admin 管理员表
id、用户名、密码、昵称
四、H5 手绘地图端（核心功能）
地图加载与渲染
加载后台配置的手绘地图图片，自适应屏幕显示。
手势交互
支持单指拖动、双指缩放、双击放大。
点位展示
根据坐标在地图上渲染对应图标。
点位详情弹窗
点击点位弹出信息面板，展示文字与图片。
分类筛选栏
顶部 / 底部切换分类，只显示对应类型点位。
地图复位按钮
一键恢复地图初始大小与位置。
五、服务端接口（核心）
获取地图基础信息 /api/map/info
获取所有分类 /api/category/list
获取点位列表 /api/point/list
获取点位详情 /api/point/detail
后台管理：登录、地图 CRUD、点位 CRUD、分类 CRUD、文件上传
六、后台管理系统（核心）
管理员登录
地图管理
上传手绘底图
设置地图宽高
启用 / 禁用地图
点位管理
可视化选择点位坐标
填写点位名称、介绍、图片、分类
启用 / 隐藏点位
分类管理
添加、编辑、删除分类
数据统计
点位数量、分类数量、地图访问量（可选）
七、我负责的模块
我负责整个项目的前后端全流程开发：
完成 H5 手绘地图端 开发，实现地图拖拽、缩放、点位展示、弹窗、筛选等交互功能。
完成 服务端 搭建，设计数据库表结构，开发所有接口，实现数据增删改查。
完成 后台管理系统 开发，实现地图、点位、分类的可视化管理。
完成前后端联调、图片上传、地图坐标拾取、页面适配与优化。