mini-prog

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）

1. 数据层

TFW 解析

meta.json（可选）

控制点 JSON

1. 覆盖物系统

控制点（打卡点）

路线绘制

编号 / 标记

高亮 / 状态变化

1. 交互系统

点击点位

GPS 定位

判定是否到达控制点

1. 游戏逻辑

打卡顺序

计时

成绩记录

NPC / 问答扩展

📍 当前进度

✅ QGIS 瓦片生成

✅ XYZ 瓦片加载

✅ TFW 自动定位（支持 4326 / 3857）

✅ 浏览器调试页

🚧 小程序地图引擎开发中

🧩 后续计划

地图引擎小程序版（Canvas / View）

控制点系统

路线规划

离线地图支持

B端赛事管理系统

Web + 小程序统一架构

💡 核心设计理念

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

全部地图数据可控

支持离线 / 私有部署

面向定向运动深度定制

📌 适用场景

定向运动赛事

校园活动

城市探索游戏

户外训练

教育互动地图

🧠 一句话总结

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