GIS
阅读指南
直觉问题
如果你写过前端、用过 Three.js 或 Babylon.js，第一次打开 Web GIS 引擎的代码，多半会有同一种感觉——
“经纬度我熟啊，经纬度怎么就变成了屏幕上的瓦片？为什么左下角显示的
(116.40°E, 39.90°N)，和 DOM 的(x, y)完全不是一回事？”
更让人崩溃的是术语：WGS84、ECEF、Web Mercator、EPSG:3857、四叉树、LOD、DEM、大地水准面、RTE、3D Tiles——每一个看上去都”应该是常识”，但合在一起就构成一道密不透风的墙。
这套笔记要回答的就是这两个朴素问题：
- Web GIS 这套体系，到底是怎么搭起来的？ 12 篇笔记能不能串成一张完整的知识地图？
- 作为前端转 GIS 的人，该按什么顺序学，学到第几篇能干什么活？
读完这篇阅读指南，你会得到：一张依赖图、一张知识全景图、一份 20+ 术语速查表、3 条按目标人群裁剪的学习路径。
NOTE
这套笔记只讲 GIS 知识本身，不绑定任何具体引擎的源码实现。你可以把这里讲的概念直接迁移到 Cesium、Mapbox、OpenLayers 等任何 Web GIS 系统。
学习路线图：12 篇笔记的依赖关系
12 篇笔记按”读者学习路径”而非”学科分类”排序。每篇笔记都假定你已读完它的前置依赖——所以跳读有风险，至少要按依赖图走。
关键路径：00 → 01 → 02 → 03 → 06 → 07 → 08 → 11。这条链覆盖了”从经纬度到屏幕像素”的最完整推理路径，缺一不可。
可并行：04（影像）和 05（地形）可以在 06 之前任意时间并行学习；09（3D Tiles）和 10（调优手册）可以在 08 之后并行。
TIP
如果你时间有限，至少要读完关键路径上的 7 篇，其他可以按需查表。每篇笔记结尾都给”下一篇导引”，跟着走不会迷路。
GIS 知识全景图：地图渲染金字塔
Web GIS 的所有概念，可以归纳成一座”金字塔”——从底部的真实地球，逐层抽象、逐层变换，最终到达顶部的应用层。每一层都把上一层的数据”加工”成下一层能用的形式。
| 层 | 处理对象 | 输入 | 输出 | 涉及笔记 |
|---|---|---|---|---|
| ① 真实地球 | 大地测量学 | 地壳形状、重力场 | 数学椭球面 + 高程基准 | 02、05 |
| ② 坐标与投影 | 坐标变换 | 经纬度 (度) | 投影米或笛卡尔 (米) | 02 |
| ③ 瓦片金字塔 | 空间索引 | 投影后的全球地图 | z/x/y 编号的瓦片树 | 03 |
| ④ 图层与数据 | 数据加载 | 瓦片 URL、DEM、3D Tiles | GPU 纹理 / 几何 | 04、05、09 |
| ⑤ 渲染管线 | GPU 绘制 | 纹理 + 几何 + 着色器 | 屏幕像素 | 01、08 |
| ⑥ 实体与交互 | 对象系统 | 矢量数据、鼠标事件 | 标注、飞行、拾取结果 | 06、07 |
| ⑦ 应用层 | 业务集成 | 全部上述能力 | Web 地图产品 | 10、11 |
为什么是金字塔？ 因为下层概念是上层的前提——你不能在不理解瓦片的情况下谈图层，不能在不理解坐标系的情况下谈瓦片编号。这就是为什么这套笔记必须按依赖图读。
瓦片数量的指数增长也是金字塔形：
| 缩放级别 z | 瓦片数量 | 单张瓦片覆盖 |
|---|---|---|
| 0 | 1 | 整个地球 |
| 1 | 4 | 一个半球 |
| 5 | 1 024 | 一个中型国家 |
| 10 | 约 100 万 | 一座大城市 |
| 15 | 约 10 亿 | 几条街道 |
| 18 | 约 680 亿 | 一栋楼 |
术语速查表（20+ 一句话定义）
这是读者入口；写作内部用的更详细术语表不发布。这里每条 ≤ 30 字，足够你认出这个词；要理解还要去对应笔记读推导。
坐标系与投影
| 术语 | 一句话定义 | 笔记 |
|---|---|---|
| 经纬度（lonLat） | 地球表面的”地址坐标”，单位是度 | 02 |
| 地理范围（Extent） | 用西南角和东北角两个经纬度点定义的矩形选区 | 03 |
| WGS84 椭球 | 全球通用的标准地球数学形状（赤道略鼓） | 02 |
| 大地水准面（Geoid） | 真实重力场下的海平面延伸，凹凸不平 | 05 |
| ECEF | 以地球质心为原点的三维笛卡尔坐标，单位米 | 02 |
| 投影（Projection） | 把球面坐标变换为平面坐标的方法 | 02 |
| EPSG 编码 | 坐标参考系的国际唯一编号（4326 / 3857 等） | 02 |
瓦片与 LOD
| 术语 | 一句话定义 | 笔记 |
|---|---|---|
| 瓦片（Tile） | 按 z/x/y 编号的小图，通常 256×256 像素 | 03、04 |
| 瓦片金字塔 | 缩放级别每升一级，瓦片数量 4 倍增长 | 03 |
| 四叉树（quadtree） | 每个瓦片分裂为 4 个子瓦片的递归索引结构 | 03 |
| LOD | 按相机距离选不同细节级别的策略 | 03 |
| 视锥剔除 | 跳过相机视锥之外的对象不渲染 | 03、06 |
图层与数据
| 术语 | 一句话定义 | 笔记 |
|---|---|---|
| 图层（layer） | 地图上叠加的”透明胶片”（底图、道路、标注等） | 04 |
| DEM | 数字高程模型，每像素存一个海拔值 | 05 |
| RGB / BIL 编码 | 把高度值编码进像素颜色或二进制的两种方案 | 05 |
| 3D Tiles | OGC 三维空间数据流式传输标准 | 09 |
| OGC 标准 | 开放地理信息协会维护的国际 GIS 标准族 | 04、09 |
渲染与几何
| 术语 | 一句话定义 | 笔记 |
|---|---|---|
| 渲染循环 | 每秒约 60 次重复执行”输入 → 状态 → 剔除 → 绘制 → 提交”的循环 | 01、08 |
| 视锥体（Frustum） | 相机能看到的空间区域（截头锥体） | 06 |
| Framebuffer | GPU 离屏缓冲，按用途分 Color/Depth/Picking/HDR/Screen 等 | 01、08 |
| Tone Mapping | 把 HDR 高动态范围颜色压回显示器 LDR 范围的算法 | 08 |
| 大气散射 | 阳光被大气分子 / 气溶胶 / 臭氧散射的物理过程 | 08 |
| RTE | 相对视点高精度算法，避免大坐标抖动 | 06 |
系统架构与交互
| 术语 | 一句话定义 | 笔记 |
|---|---|---|
| 渲染场景 | 所有可渲染对象的容器（相机、灯光、行星、实体） | 01 |
| 渲染节点 | 渲染场景内可独立渲染的单元 | 01 |
| 行星节点 | 渲染场景内的地球对象，挂载四叉树 | 01、03 |
| 瓦片段 | 单个瓦片的几何 + 影像 + 高程数据 | 03 |
| 实体（Entity） | 地图上的对象（点、线、面、3D 模型） | 07 |
| Worker | Web Worker 异步线程，处理耗时任务不卡帧 | 05 |
| Picking（拾取） | 把鼠标点击的屏幕坐标反查为对象 ID | 06 |
NOTE
表里的”渲染场景""渲染节点""行星节点""瓦片段”是概念性中文——它们对应到不同引擎里的”场景对象”等具体类名可能不同，但概念是统一的。本系列所有笔记都按概念性中文叙述，不绑定具体引擎的实现细节。
前置知识边界：你已知什么，需要新学什么
这套笔记面向”懂前端 TS、用过 WebGL 库（Three/Babylon），但不懂 GIS”的入门者。下面这张对比表帮你快速定位自己的起点。
| 类别 | 你应当已知 | 你需要新学 | 笔记 |
|---|---|---|---|
| 语言/框架 | TS / async / Promise / 模块 / 装饰器 | — | — |
| 浏览器 API | DOM / Canvas / WebGL 基础 / Web Worker | — | — |
| 通用图形学 | 顶点/片元着色器、纹理、深度测试、混合、视锥剔除的概念 | — | — |
| 线性代数 | 向量、矩阵、四元数、坐标系变换 | — | — |
| 浮点精度 | IEEE 754 的概念 | RTE 高精度算法（GIS 大坐标抖动） | 06 |
| 经纬度 | 知道是”度数” | 球面坐标不能直接做平面计算 | 02 |
| 投影 | 听过墨卡托 | Web 墨卡托的失真与 ±85° 限制 | 02 |
| 椭球 | — | WGS84 长半轴 6 378 137 m、扁率 1/298.257 | 02 |
| 大地水准面 | — | 椭球面 vs 大地水准面差异最大 ±100 m | 05 |
| 瓦片 | — | z/x/y 编号数学、四叉树空间索引 | 03 |
| LOD | 听过游戏里的 LOD | 屏幕空间误差、几何误差、LOD 切换策略 | 03、09 |
| 图层 | — | XYZ / WMS / WMTS 协议差异、OGC 标准 | 04 |
| 高程 | — | RGB / BIL 编码、Mapbox Terrain-RGB 公式 | 05 |
| Tone Mapping | — | Reinhard / ACES / Cineon 算法差异 | 08 |
| 大气散射 | — | Rayleigh / Mie / Ozone 三种散射物理 | 08 |
| 3D Tiles | — | boundingVolume、geometricError、refine | 09 |
TIP
如果你已经熟悉 WebGL 渲染管线，可以快速浏览 01 篇的渲染循环骨架部分，把节省的时间留给 02 篇（坐标与投影）——那是 GIS 入门最大的认知坎。
学习路径建议：3 条按目标裁剪的路线
不同读者的目标不同，没必要所有人都按 12 篇顺序读完。下面是 3 条典型路径，每条都能让你到达特定目标。
路径 A：应用开发者（短路径，先跑起来）
目标：在网页上叠加底图、画矢量对象、加载 BIM 模型，做出可用的 Web 地图应用。
顺序：00 → 04 → 07 → 09 → 11
| 顺序 | 笔记 | 学完你能干什么 |
|---|---|---|
| 1 | 00 阅读指南 | 知道整体知识地图 |
| 2 | 04 影像图层 | 加载 OSM / 卫星底图 |
| 3 | 07 矢量与实体 | 画点 / 线 / 面、加标注 |
| 4 | 09 3D Tiles 与 BIM | 加载城市倾斜摄影或 BIM |
| 5 | 11 综合练习 | 拼装一个完整 demo |
可跳过：02、03、06、08 的数学推导细节（坐标系、四叉树、相机、shader）——这些是引擎内部机制，应用层不直接面对。遇到坐标转换问题再回查 02。
路径 B：引擎贡献者（深度路径，理解机制）
目标：能阅读并修改引擎源码，或自己实现一个 Web GIS 引擎。
顺序：00 → 01 → 02 → 03 → 06 → 08 → 10 → 11
| 顺序 | 笔记 | 学完你能干什么 |
|---|---|---|
| 1 | 00 阅读指南 | 知道整体知识地图 |
| 2 | 01 第一帧 | 看懂渲染循环与首帧时序 |
| 3 | 02 坐标与投影 | 写经纬度 ↔ ECEF ↔ 屏幕的变换 |
| 4 | 03 四叉树与 LOD | 实现瓦片调度与剔除算法 |
| 5 | 06 相机与拾取 | 实现 RTE 高精度与 Picking |
| 6 | 08 渲染管线 | 写 shader、调 Tone Mapping、加大气 |
| 7 | 10 调优手册 | 排查帧率瓶颈、内存泄漏 |
| 8 | 11 综合练习 | 验证全栈理解 |
不可跳过：每一篇都关键。额外建议：每读完一篇，对照一个开源引擎（Cesium、Mapbox GL）的实现验证理解。
路径 C：学术研究（理论路径，攻数学）
目标：在 GIS / 计算机图形学领域做研究、发论文、写教材。
顺序：00 → 02 → 05 → 08 → 09（+ 自选 03 / 06）
| 顺序 | 笔记 | 重点攻什么 |
|---|---|---|
| 1 | 00 阅读指南 | 知识全景 |
| 2 | 02 坐标与投影 | 大地测量学、椭球数学、EPSG 体系 |
| 3 | 05 地形与 Worker | 大地水准面、DEM 编码、EGM2008 |
| 4 | 08 渲染管线 | Rayleigh / Mie / Ozone 物理推导、Nishita 模型 |
| 5 | 09 3D Tiles 与 BIM | OGC 标准、geometricError 数学定义 |
额外建议：每篇笔记的”延伸阅读”链接都点开看一遍，包括 OGC 标准原文和学术论文（如 Nishita 1993 大气散射）。
自测题
读到这里，先别急着进入 01。试着回答下面几个问题——能答出 3 题以上再继续，答不出就回看上面的对应章节。
- 金字塔下层：为什么经纬度是”球面坐标”而不是”平面坐标”？球面坐标做平面距离计算会发生什么？
- 瓦片数学：缩放级别 z=12 时，全球总共有多少张瓦片？为什么是这个数量级？
- 依赖关系：为什么 06 篇（相机与拾取）依赖 02（坐标）和 03（四叉树）两篇，而不是只依赖其中一篇？
- 学习路径：如果你的目标是”做一个能加载卫星图、画路径、点击拾取的地图应用”，会选路径 A、B、C 哪一条？为什么？
- 概念性中文：为什么这套笔记用”渲染场景""渲染节点""瓦片段”这种中文词，而不是直接用某个具体引擎的类名？
IMPORTANT
答案不在本篇——回答这些问题需要你主动回忆前面读过的内容。如果只能”看着面熟”但说不出来，说明还没真正掌握，建议回看。
下一篇导引：01 第一帧 将打开渲染循环这个黑盒——从调用引擎初始化的那一刻起，到地球第一次出现在屏幕上的那一帧，中间到底发生了什么。