03abe28d8c97bdc646d04cb2d022529ea8b9899d
CMR Mini Program(彩图奔跑小程序)
📌 项目简介
CMR Mini Program 是一个基于微信小程序的定向运动平台,支持:
- 自定义地图(非第三方地图)
- 基于瓦片(XYZ)渲染
- TFW / GIS 数据定位
- 控制点(打卡点)与路线系统
- 适用于赛事、训练、互动地图等场景
本项目核心目标:
构建一套完全自研的「轻量级地图引擎 + 定向运动系统」
🧠 技术架构
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.js(LTS)
开发模式
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 + 小程序统一架构
💡 核心设计理念
不依赖第三方地图(如高德/腾讯)
全部地图数据可控
支持离线 / 私有部署
面向定向运动深度定制
📌 适用场景
定向运动赛事
校园活动
城市探索游戏
户外训练
教育互动地图
🧠 一句话总结
这是一个“自研地图引擎 + 定向运动系统”的小程序项目,而不是普通地图应用。
Description
Languages
TypeScript
100%