地图基础：地图投影、坐标系与瓦片原理
各位同学好，我是老张。做GIS开发这些年，我踩过最多的坑，就是坐标系问题。你想想看，明明数据是对的，地图上却偏了几百米，这种经历我至少遇到过十几次。今天咱们就把地图基础这块彻底讲透。
1. 地图投影——把地球摊平的艺术
地球是个球体，但屏幕是平的。怎么把球面信息映射到平面上？这就是投影要解决的问题。说白了，投影就是一套数学规则，把经纬度坐标转成平面坐标。
我刚开始做项目时，总觉得投影是数学家的事，跟我没关系。直到有一次，我在北极附近做项目，用墨卡托投影显示高纬度区域，结果格陵兰岛比非洲还大——这显然不对。嗯，从那以后我再也不敢小看投影了。
常见投影类型：
- 墨卡托投影：等角投影，方向准确，但面积变形严重。Web地图的标配。
- 高斯-克吕格投影：等角横切椭圆柱投影，我国大比例尺地形图的标准。
- 兰勃特投影：等角圆锥投影，适合中纬度地区。
Web地图几乎清一色用墨卡托投影。为什么？因为它的等角特性让航线、道路的方向保持正确，这对导航来说太重要了。至于面积变形？反正用户平时也看不出来。
2. 坐标系——地图的灵魂
坐标系这东西，我建议你把它理解成「地图的身份证」。不同坐标系之间，同一个点的经纬度可能差几十米甚至几百米。国内开发最头疼的就是三种坐标系：WGS84、GCJ02、BD09。
| 坐标系 | 全称 | 使用场景 | 偏移量 |
|---|---|---|---|
| WGS84 | World Geodetic System 1984 | GPS原始数据、国际标准 | 基准 |
| GCJ02 | 国测局坐标系 | 高德、腾讯、Google中国 | 约100-700米随机偏移 |
| BD09 | 百度坐标系 | 百度地图 | 在GCJ02基础上再加偏移 |
避坑指南：我曾经在项目里直接把GPS设备采集的WGS84坐标扔到百度地图上，结果所有点位都偏了300多米。排查了整整两天才发现是坐标系没转换。记住：国内互联网地图必须用GCJ02或BD09，直接用WGS84是违法的。
为什么会这样？因为国家规定，公开地图必须经过加密偏移处理。GCJ02就是这套加密算法，BD09是百度在GCJ02基础上又加了一层自己的偏移。说白了，就是给地图数据加了个「密码锁」。
3. 坐标系转换实战
我个人的习惯是：所有数据统一用WGS84存储，只在显示时转换成目标坐标系。这样数据层干净，显示层灵活。下面给出一段常用的转换代码：
// WGS84 转 GCJ02
function wgs84ToGcj02(lng, lat) {
const a = 6378245.0;
const ee = 0.00669342162296594323;
let dlat = transformLat(lng - 105.0, lat - 35.0);
let dlng = transformLng(lng - 105.0, lat - 35.0);
let radlat = lat / 180.0 * Math.PI;
let magic = Math.sin(radlat);
magic = 1 - ee * magic * magic;
let sqrtmagic = Math.sqrt(magic);
dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * Math.PI);
dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * Math.PI);
return {
lng: lng + dlng,
lat: lat + dlat
};
}小技巧：如果你不想自己写转换算法，直接用开源库coordtransform，支持WGS84、GCJ02、BD09三者互转。我在三个项目里都用过，没出过问题。
4. 比例尺与瓦片原理
比例尺就是地图上的距离和实际距离的比值。但Web地图里，我们更常用「层级」这个概念。层级越高，显示越精细。比如层级18，一个像素可能对应0.5米；层级1，一个像素可能对应几百公里。
瓦片原理，说白了就是把地图切成小方块。每个层级的地图，都被切成256x256像素的图片。你想想看，如果一整张世界地图直接加载，那数据量得有多大？切成瓦片后，浏览器只加载当前屏幕范围内的瓦片，性能瞬间提升。
瓦片核心参数：
- 瓦片大小：标准256x256像素，也有512x512的高清瓦片
- 瓦片编号：通常用xyz编号，x是列号，y是行号，z是层级
- 瓦片数量：层级每增加1，瓦片数量翻4倍。层级18的瓦片数量是2^36，约687亿张
我记得第一次做瓦片服务时，没注意缓存策略，结果同一张瓦片被反复请求，服务器直接被打挂了。后来加了CDN和本地缓存，问题才解决。嗯，这里要注意：瓦片服务一定要做好缓存，不然并发一上来就崩。
5. 知识体系总览
下面这张图，是我自己总结的地图基础知识体系。你看一遍，心里就有谱了。
这张图把今天的内容串起来了。你记住：投影决定形状，坐标系决定位置，瓦片决定性能。这三样东西，是Web地图的三大基石。
个人建议：初学者最容易犯的错误是「坐标系混用」。我的做法是：在项目初期就定好坐标系规范，所有数据统一用WGS84存储，显示时再转换。这样后期维护成本最低。
好了，地图基础就讲到这里。这些概念虽然基础，但真到了项目里，每一个都能让你头疼好几天。我当年就是吃了不少亏才总结出这些经验。你先把这些基础打牢，后面讲瓦片加载、地图渲染的时候，你就知道为什么这么设计了。