108 lines
6.2 KiB
Markdown
108 lines
6.2 KiB
Markdown
收到，明白了。您决定走**“硬核极客”**路线：**全开源技术栈 + 自主处理 NASA 数据**。
|
||
|
||
这意味着我们要放弃现成的商业瓦片服务，转而自己搭建一套“地形瓦片生产流水线”。虽然前期工作量稍大，但完全免费且自主可控，非常有成就感。
|
||
|
||
这份修正后的 `ROADMAP.md` 专注于 **MapLibre GL JS** 和 **数据预处理** 流程。
|
||
|
||
***
|
||
|
||
# 🏔️ Project 14 Peaks: Open Source Edition
|
||
|
||
本项目旨在构建一个**完全免费、零商业依赖**的 Web 3D 地球可视化项目，展示全球 14 座 8000 米级雪山。
|
||
|
||
核心理念是“数据自主”：直接从 NASA 获取原始地形数据，自行加工处理，并使用开源引擎 **MapLibre** 进行渲染。
|
||
|
||
## 🛠 技术栈 (Tech Stack)
|
||
|
||
| 模块 | 技术选型 | 说明 | 费用 |
|
||
| :--- | :--- | :--- | :--- |
|
||
| **核心引擎** | **MapLibre GL JS** | Mapbox 的开源分支，API 兼容，完全免费 | **$0** |
|
||
| **3D 渲染** | **Three.js** | 负责渲染攀登路线、营地、光效 | **$0** |
|
||
| **地形数据源** | **NASA SRTM / ASTER** | 30m 精度原始 GeoTIFF 数据 | **$0** |
|
||
| **卫星影像源** | **Esri World Imagery** | 免费且高质量的全球卫星图源 (无需 Key) | **$0** |
|
||
| **数据处理工具** | **GDAL / rio-rgbify** | Python/CLI 工具，用于将 TIFF 切割为 RGB 瓦片 | 开源 |
|
||
| **数据托管** | **GitHub Pages / Vercel** | 静态托管切好的地形瓦片 | **$0** |
|
||
|
||
---
|
||
|
||
## 📅 开发路线图 (Roadmap)
|
||
|
||
### Phase 1: 数据生产流水线搭建 (Data Pipeline Setup)
|
||
**这是本路线最核心、最硬核的部分。** 目标是建立一套将 NASA 原始数据转化为 Web 可用瓦片的工作流。
|
||
|
||
- [ ] **环境准备**
|
||
- [ ] 安装 Python 环境。
|
||
- [ ] 安装 GDAL 库 (地理空间数据处理瑞士军刀)。
|
||
- [ ] 安装 `rio-rgbify` (用于将高程编码为 RGB 颜色)。
|
||
- [ ] 安装 `gdal2tiles` (用于将大图切割为金字塔瓦片)。
|
||
- [ ] **数据获取 (以珠峰为例)**
|
||
- [ ] 注册 NASA Earthdata 或访问 USGS Earth Explorer。
|
||
- [ ] 下载珠峰区域 (27.9N, 86.9E) 的 **SRTM 1 Arc-Second Global** GeoTIFF 文件。
|
||
- [ ] **数据处理脚本编写**
|
||
- [ ] **步骤 1 (编码):** 编写 Shell/Python 脚本，使用 `rio-rgbify` 将原始 DEM 转换为 RGB 编码的 TIFF (`base_val=-10000`, `interval=0.1`)。
|
||
- [ ] **步骤 2 (切片):** 使用 `gdal2tiles` 将编码后的 TIFF 切割为 Zoom Level 10-14 的瓦片文件夹结构。
|
||
- [ ] **步骤 3 (托管):** 将生成的瓦片文件夹 (`/tiles/{z}/{x}/{y}.png`) 上传到本地服务器或静态托管服务进行测试。
|
||
|
||
### Phase 2: 前端引擎实现 (MapLibre Integration)
|
||
目标：使用开源引擎成功加载我们自己生产的地形瓦片。
|
||
|
||
- [ ] **MapLibre 初始化**
|
||
- [ ] 引入 `maplibre-gl.js`。
|
||
- [ ] 配置 `style` 对象，使用 **Esri World Imagery** 作为底图源 (Tiles URL: `https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}`).
|
||
- [ ] **加载自定义地形**
|
||
- [ ] 配置 `raster-dem` 源，指向 Phase 1 中生成的瓦片 URL。
|
||
- [ ] 设置 `encoding: "mapbox"` (因为我们用 rio-rgbify 模仿了 Mapbox 的编码格式)。
|
||
- [ ] 调试：确保珠峰看起来是立体的，而不是平面的。
|
||
- [ ] **Three.js 图层接入**
|
||
- [ ] 实现 MapLibre 的 `CustomLayerInterface` (与 Mapbox API 基本一致)。
|
||
- [ ] 完成坐标同步：将经纬度转换为 MapLibre 的墨卡托坐标。
|
||
|
||
### Phase 3: 14座山峰数据迭代 (Data Scaling)
|
||
目标：将单座山的流程复制到所有 14 座山峰。
|
||
|
||
- [ ] **批量数据处理**
|
||
- [ ] 整理 14 座山峰的坐标列表。
|
||
- [ ] 批量下载这 14 个区域的 SRTM 数据。
|
||
- [ ] 运行自动化脚本，生成所有山峰的地形瓦片包 (注意控制文件体积，仅生成山峰核心区域)。
|
||
- [ ] **路线数据 (GPX)**
|
||
- [ ] 从 OpenStreetMap/SummitPost 获取 14 条路线 GPX。
|
||
- [ ] 编写解析器，利用 MapLibre 的 `queryTerrainElevation` (如果支持) 或在预处理阶段获取海拔，确保路线贴合地面。
|
||
|
||
### Phase 4: 交互与视觉开发 (Visualization)
|
||
目标：在开源引擎上实现不输商业引擎的视觉效果。
|
||
|
||
- [ ] **3D 场景构建**
|
||
- [ ] 绘制攀登路线 (`TubeGeometry`)。
|
||
- [ ] 标记关键营地 (Camp 1, Camp 2, C3, C4, Summit)。
|
||
- [ ] **视觉增强**
|
||
- [ ] **大气层模拟:** 由于 MapLibre 原生天空层较简单，考虑编写 Custom Shader 或使用简单的 CSS 渐变背景模拟高空大气。
|
||
- [ ] **光照:** 在 Three.js 场景中添加模拟太阳的平行光，根据山峰朝向调整光影。
|
||
- [ ] **漫游控制器**
|
||
- [ ] 实现点击列表切换山峰的功能 (Camera FlyTo)。
|
||
|
||
### Phase 5: 优化与部署 (Optimization)
|
||
- [ ] **瓦片加载优化:** 确保只在视野内加载地形瓦片。
|
||
- [ ] **资源压缩:** 压缩 PNG 瓦片以减少带宽消耗。
|
||
- [ ] **部署:** 将前端代码 + 地形瓦片数据一同部署到 GitHub Pages (如果是小范围数据) 或 Cloudflare R2/AWS S3 (如果数据量较大)。
|
||
|
||
---
|
||
|
||
## 📂 数据与资源清单 (Resources)
|
||
|
||
### 1. 核心数据源 (Free Sources)
|
||
* **Elevation:** [NASA Earthdata Search](https://search.earthdata.nasa.gov/) (Collection: SRTM 1 Arc-Second Global)
|
||
* **Imagery:** Esri World Imagery (通过 REST API 访问，无需 Token)
|
||
* **Routes:** OpenStreetMap (Overpass API) / SummitPost
|
||
|
||
### 2. 关键工具 (Tools)
|
||
* **GDAL:** `gdal_translate`, `gdalwarp`
|
||
* **rio-rgbify:** [Mapbox/rio-rgbify](https://github.com/mapbox/rio-rgbify) (用于生成 Terrain-RGB)
|
||
* **MapLibre:** [maplibre-gl-js](https://maplibre.org/)
|
||
|
||
---
|
||
|
||
## 📝 开发者备注 (Notes for Developer)
|
||
|
||
1. **数据体积警告:** 地形瓦片非常占用空间。建议**只切片 14 座山峰周围 50km 的区域**，不要尝试切片整个地球，否则你的硬盘会爆，免费托管也会超限。
|
||
2. **坐标系转换:** GDAL 处理时主要使用 `EPSG:4326` (WGS84)，但在切片 (`gdal2tiles`) 时通常需要转换为 `EPSG:3857` (Web Mercator) 以适配 Web 地图标准。
|
||
3. **接缝处理:** 如果下载的 DEM 是分块的，在转 RGB 之前最好先用 `gdal_merge.py` 把它们拼成一张大图，避免地形出现裂缝。 |