✅ 一、GIS 与 WebGIS 的区别（先搞清楚）
| 方向 | GIS（传统） | WebGIS |
|---|---|---|
| 内容 | 地理空间数据采集、建模、地图制图、空间分析 | 通过浏览器展示地图、可视化、空间数据接口调用 |
| 技术 | ArcGIS、QGIS、遥感、投影与坐标系、空间分析 | JavaScript、WebGL、地图框架（Mapbox、Leaflet、Cesium） |
| 就业 | 政企、规划、测绘、自然资源、环评、国企 | 大厂地图业务、可视化平台、数字孪生、互联网类公司 |
👉 WebGIS = GIS + Web 前端开发 + 可视化技术
🚀 二、GIS + WebGIS 完整学习路线图（超详细）
阶段 1：GIS 基础理论（必学）
✔ 必学内容
-
地理信息系统（GIS）基础概念
-
地图投影、地理坐标系、投影坐标系
→ WGS84、CGCS2000、Web Mercator
-
空间数据类型
→ Vector（点/线/面）、Raster（瓦片、遥感影像）
-
地理数据库
→ Shapefile、GeoJSON、KML、GPKG
-
空间分析基础
→ 缓冲区、叠加分析、最近邻、可达性分析等
✔ 推荐工具
-
ArcGIS（强大，但收费）
-
QGIS（开源、必须学）
-
Global Mapper（影像处理）
-
GDAL（命令行处理空间数据）
阶段 2：Web 开发基础（WebGIS 必学）
✔ 必学知识
-
HTML / CSS / JavaScript
-
ES6、Promise、async/await
-
前端工程化
→ Webpack / Vite
-
前端框架（至少会一种）
→ React（企业最常用）
→ Vue（GIS 行业大量使用）
✔ 推荐路线
-
JavaScript 基础
-
ES6 进阶
-
React/Vue
-
Axios 请求、状态管理（Redux/Pinia）
阶段 3：WebGIS 核心（重点阶段）
⭐ 必须掌握的 WebGIS 技术栈
| 技术 | 说明 |
|---|---|
| Leaflet.js | 轻量级 2D 地图，简单易上手 |
| OpenLayers | 政企常用，功能极强，支持专业 GIS 业务 |
| Mapbox GL JS | WebGL 地图，炫酷 3D 可视化 |
| CesiumJS | 真·三维地球、数字孪生、三维建模最强 |
| MapLibre GL | Mapbox 开源替代品，商业使用自由 |
⭐ WebGIS 必学功能点（面试常考）
-
切片地图加载（XYZ 瓦片）
-
WMS / WMTS / WFS 服务调用
-
GeoJSON 渲染
-
绘制点/线/面
-
鼠标交互：测距、测面积、定位
-
地理编码（地址 → 坐标）
-
逆地理编码（坐标 → 地址）
-
热力图
-
聚合点（Cluster）
-
实时轨迹可视化（公交/物流）
-
三维可视化（Cesium）
阶段 4：服务端 GIS 能力（进阶）
如果你要做"数据服务端"，必须掌握：
✔ 空间数据库
-
PostgreSQL + PostGIS（最强）
-
MySQL GIS 扩展
-
MongoDB GeoJSON 空间查询
✔ 地图服务发布
-
GeoServer（开源最常用）
-
MapServer
-
ArcGIS Server（国企常用）
✔ 学会发布服务
-
WMS（地图）
-
WMTS（瓦片）
-
WFS（矢量）
-
TMS（瓦片）
-
REST API（自建接口）
阶段 5：三维 GIS / 数字孪生（进阶方向）
如果你希望走高薪路线，可以继续：
⚡ 必学
-
CesiumJS（行业第一）
-
glTF 模型、三维 Tiles
-
三维场景搭建
-
BIM + GIS 融合
应用场景
-
智慧城市
-
数字孪生
-
实时可视化大屏
-
交通仿真
-
三维园区
📘 三、完整学习顺序（按阶段）
入门 → 中级 → 高级
-
GIS 基础 → 坐标系、投影、空间数据
-
QGIS / ArcGIS 基础实操
-
JavaScript / Vue / React
-
WebGIS 框架（Leaflet → OpenLayers → Mapbox）
-
Cesium（如需要三维）
-
GeoServer + PostGIS 后端
-
项目实战（WebGIS + 后端空间分析）
⭐ 四、学习资料 + 视频合集（精选）
📺 视频课程
-
B站：OpenLayers / Leaflet / Cesium 系列课程（免费）
-
慕课网：地图可视化 / MapboxGL
-
极客时间：地理信息系统实战
-
YouTube：Cesium 官方教程
📚 文档
-
MapboxGL 官方文档
-
CesiumJS 官方教程
-
Leaflet 文档：leafletjs.com
-
OpenLayers 文档：openlayers.org
📦 实战项目（建议做）
-
在线地图应用（POI 搜索）
-
轨迹回放系统
-
地图测距/面积工具
-
地图标绘系统
-
Cesium 三维城市大屏