一、地理信息系统基础:GIS 是什么
GIS(Geographic Information System) 本质是:
用计算机处理“带有空间位置的数据”。
普通数据:
用户ID 年龄 性别GIS 数据:
经度 纬度 人口 温度例如:
116.397, 39.908 → 北京所以 GIS 数据 =
空间位置 + 属性数据例如:
| 经度 | 纬度 | 城市 | 人口 |
|---|---|---|---|
| 116.39 | 39.90 | 北京 | 2100万 |
二、坐标系统(最重要)
地图必须知道:
地球上的一个点在哪里最常见是 经纬度坐标:
经度:东西
纬度:南北例如北京:
116.397°E
39.908°N这个坐标系统叫:
WGS84
GPS 用的就是这个。
很多地图都用它,例如:
- GPS
- Google Map
三、为什么需要“坐标投影”
问题来了:
地球是球体 屏幕是平面
必须把 球 → 平面
这就叫:
坐标投影(Projection)就像:
橙子皮 → 摊平一定会产生 变形。
四、常见投影:Web Mercator
互联网地图基本用:
Web Mercator
很多地图用它:
- Google Maps
- OpenLayers
- Leaflet
- Mapbox
坐标叫:
EPSG:3857特点:
单位不是经纬度
而是 米例如:
经纬度
116.397,39.908转换后:
12958000, 4850000这就是:
WGS84 → WebMercator五、中国地图为什么不一样
中国地图有坐标加密。
常见三种:
| 坐标系 | 用在哪 |
|---|---|
| WGS84 | GPS |
| GCJ02 | 高德 / 腾讯 |
| BD09 | 百度 |
例如:
北京
WGS84
116.397 39.908
GCJ02
116.403 39.915所以开发经常需要:
坐标转换六、空间关系(Spatial Relationship)
GIS 的核心能力其实是:
判断空间对象之间的关系
例如:
1 相交
两个图形是否交叉
A ∩ B例如:
一个区域
是否覆盖某个城市2 包含
A 包含 B例如:
一个点是否在区域内这叫:
Point In Polygon3 距离
两个点之间距离例如:
配送距离公式:
Haversine4 最近点
例如:
找最近的充电站七、GIS 数据类型
GIS 有两种数据:
1 矢量数据(Vector)
点:
城市线:
道路面:
行政区格式:
GeoJSON示例:
json
{
"type":"Point",
"coordinates":[116.397,39.908]
}2 栅格数据(Raster)
其实就是:
图片例如:
卫星图地图瓦片:
256x256八、互联网地图渲染原理
地图其实是:
很多瓦片拼起来例如:
Zoom 10会加载很多:
256x256 图片例如:
/tile/10/532/342.png九、前端 GIS 技术栈
常见:
地图:
- Mapbox GL JS
- OpenLayers
- Leaflet
可视化:
- deck.gl
- ECharts
十、你懂 GIS 原理吗?
标准回答:
GIS 的核心是处理带空间坐标的数据。 基础包括三个部分:
第一是坐标系统,比如 GPS 使用 WGS84。
第二是坐标投影,因为地球是球体,地图是平面,所以需要投影,互联网地图通常使用 Web Mercator(EPSG:3857)。
第三是空间关系,例如点是否在多边形内、两个图形是否相交、距离计算等。
在前端开发中,我们通常会处理 GeoJSON 数据,通过 Mapbox 或 OpenLayers 做渲染,同时需要做坐标转换,比如 WGS84、GCJ02 之间转换。