# 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.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 + 小程序统一架构

💡 核心设计理念

不依赖第三方地图（如高德/腾讯）

全部地图数据可控

支持离线 / 私有部署

面向定向运动深度定制

📌 适用场景

定向运动赛事

校园活动

城市探索游戏

户外训练

教育互动地图

🧠 一句话总结

这是一个“自研地图引擎 + 定向运动系统”的小程序项目，而不是普通地图应用。