feat: initialize mini program map engine

This commit is contained in:
2026-03-19 15:58:48 +08:00
commit 03abe28d8c
49 changed files with 28584 additions and 0 deletions

207
readme.md Normal file
View File

@@ -0,0 +1,207 @@
# CMR Mini Program彩图奔跑小程序
## 📌 项目简介
CMR Mini Program 是一个基于微信小程序的定向运动平台,支持:
- 自定义地图(非第三方地图)
- 基于瓦片XYZ渲染
- TFW / GIS 数据定位
- 控制点(打卡点)与路线系统
- 适用于赛事、训练、互动地图等场景
本项目核心目标:
> 构建一套完全自研的「轻量级地图引擎 + 定向运动系统」
---
## 🧠 技术架构
```text
GeoTIFF + TFW
QGIS 处理
XYZ 瓦片3857
小程序地图引擎
控制点 / 路线 / 游戏逻辑
🗺️ 地图系统设计
坐标体系
类型 说明
EPSG:4326 经纬度WGS84
EPSG:3857 Web Mercator瓦片使用
瓦片规则
/{z}/{x}/{y}.png
标准 XYZ 瓦片
支持本地或服务器部署
支持自定义地图(非在线地图)
TFW 支持
支持读取:
meta.tfw
TFW 六参数:
A 像素宽度
D 旋转
B 旋转
E 像素高度(负)
C 左上角X
F 左上角Y
自动识别:
✅ 经纬度EPSG:4326
✅ 米制坐标EPSG:3857
并转换为地图中心点。
🏗️ 项目结构
cmr-miniprogram/
├── app.js # 全局逻辑
├── app.json # 全局配置
├── app.wxss # 全局样式
├── project.config.json # 项目配置
├── sitemap.json # 索引配置
├── pages/
│ ├── index/ # 首页
│ └── map/ # 地图页(核心)
├── components/ # 公共组件
├── utils/
│ ├── projection.js # 坐标转换
│ ├── tile.js # 瓦片计算
│ ├── tfw.js # TFW解析
├── engine/ # 地图引擎(核心)
│ ├── renderer/ # 渲染
│ ├── gesture/ # 手势处理
│ ├── camera/ # 视图控制
│ ├── overlay/ # 覆盖物(控制点等)
└── assets/
👉 小程序项目结构由 app.js / app.json / pages 等组成,是官方标准结构
⚙️ 开发环境
必备工具
微信开发者工具
VS Code推荐
Node.jsLTS
开发模式
VS Code → 写代码
微信开发者工具 → 编译 / 运行
🚀 功能模块规划
1. 地图引擎(核心)
瓦片加载XYZ
经纬度 ↔ 屏幕坐标转换
拖拽 / 缩放
相机系统center / zoom
2. 数据层
TFW 解析
meta.json可选
控制点 JSON
3. 覆盖物系统
控制点(打卡点)
路线绘制
编号 / 标记
高亮 / 状态变化
4. 交互系统
点击点位
GPS 定位
判定是否到达控制点
5. 游戏逻辑
打卡顺序
计时
成绩记录
NPC / 问答扩展
📍 当前进度
✅ QGIS 瓦片生成
✅ XYZ 瓦片加载
✅ TFW 自动定位(支持 4326 / 3857
✅ 浏览器调试页
🚧 小程序地图引擎开发中
🧩 后续计划
地图引擎小程序版Canvas / View
控制点系统
路线规划
离线地图支持
B端赛事管理系统
Web + 小程序统一架构
💡 核心设计理念
不依赖第三方地图(如高德/腾讯)
全部地图数据可控
支持离线 / 私有部署
面向定向运动深度定制
📌 适用场景
定向运动赛事
校园活动
城市探索游戏
户外训练
教育互动地图
🧠 一句话总结
这是一个“自研地图引擎 + 定向运动系统”的小程序项目,而不是普通地图应用。