第4章 · Web GIS 端开发技术

第4章 · Web GIS 端开发技术

章节摘要：用户通过浏览器看地图。本章讲二维 Web GIS 框架、三维可视化、客户端分析交互——前端怎么消费 GIS 服务。

先说结论

阅读完本章，你应当能够：

1. 选合适的 Web GIS 框架
2. 做三维地图可视化
3. 实现客户端分析和交互

核心概念速览

前端是用户和空间数据的桥梁——渲染要快、交互要顺。

子章节导航

4.1 二维 Web GIS 框架

OpenLayers、Leaflet、Mapbox GL。

4.2 三维 Web GIS 与可视化

Cesium、Three.js 三维。

4.3 客户端分析与交互

绘制、量算、空间查询。

子章节之间的逻辑关系

4.1 二维框架（基础）
4.2 三维可视化（进阶）
4.3 分析交互（功能）
​

先二维基础，再三维进阶，最后分析交互功能。

前端开发常见误区

Web GIS 前端最容易踩的坑，这一章都会正面处理：

• 框架选错：轻量展示用 Leaflet 几行就够，非要上 OpenLayers 反而把项目拖重；反过来，要做复杂 OGC 交互却选了 Leaflet，后面到处补功能。4.1 节给出选型对照。
• 三维误当二维用：只是展示几个建筑物，用 Mapbox 的三维拉伸即可；要加载倾斜摄影、做数字孪生，才需要 Cesium 和 3D Tiles。4.2 节讲清楚边界。
• 分析全塞前端：点选、量算、缓冲可以在浏览器里做，但几十万要素的叠加分析绝不能放前端。4.3 节给了一条"客户端做什么、后端做什么"的分界线。

另外提醒一点：前端渲染再炫，数据和服务端不稳都是空中楼阁。所以建议读本章之前先跑通第 3 章的服务发布，再回来写前端代码。

学习检验

1. OpenLayers、Leaflet、Mapbox GL 各自的强项是什么？你的项目该选哪个？
2. 3D Tiles 解决了什么问题？LOD 是什么意思？
3. Turf.js 能在浏览器里做哪些分析？哪些分析必须交给后端？
4. 客户端量算距离时，为什么不能把经纬度直接当平面坐标算？

这一章学完，建议做一个完整的"小地图应用"：用第 3 章发布的 WMS 做底图，用 OpenLayers 叠加一个业务图层，再做点选查询和量算。把二维框架、三维渲染、客户端交互三个能力串起来用一遍，比分别看代码印象深刻得多。遇到坐标系相关的显示问题，回看第 1 章。

前置知识与后续延伸

• 前置：第 1-3 章
• 后续：第 5 章空间分析算法（前端调用后端或本地算）