地图不是图片，是空间数据
前端做地图，本质上是在折腾空间数据的可视化与交互。这玩意儿横跨 GIS、图形学和前端工程化，光会写页面不够，还得懂点地球科学——这也解释了为什么很多人觉得地图开发上手偏重。
下面从地图服务类型、坐标系、主流 SDK 和几个绕不开的概念出发，把基础铺一遍。
地图服务类型
矢量地图由点、线、面数学定义，缩放不失真，数据量小，样式能动态改，对 GPU 渲染也友好。新版 Google Maps 和 Mapbox GL JS 是典型。
卫星图是真实地表遥感影像，地貌还原度高，但体积大、加载慢，图层也没法交互修改。Google Earth、高德卫星图层常用。
地形图突出海拔与坡度，依赖数字高程模型（DEM），一般用等高线和伪三维来表现。户外导航、地质勘探用得多，比如 Mapbox Terrain、百度地形图。
坐标系乱斗：WGS84 / GCJ-02 / BD09
同一个经纬度在高德和百度上能差出几百米，根子就在坐标系。
WGS84 国际通用，GPS、国际航运都用它，全球统一基准。
GCJ-02 是国家测绘局搞的'火星坐标系'，在 WGS84 基础上加密偏移，国内互联网地图服务（高德、腾讯）必须用这个。官方算法没公开，但民间有一版近似转换：
// WGS84 -> GCJ-02 近似转换
function wgs84ToGcj02(wgsLat, wgsLon) {
const x = wgsLon - 0.0065;
const y = wgsLat - 0.006;
const z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * Math.PI);
const theta = Math.atan2(y, x) - 0.0003 * Math.cos(x * Math.PI);
return {
lat: z * Math.sin(theta),
lon: z * Math.cos(theta)
};
}
BD09 是百度在 GCJ-02 基础上二次加密的专属坐标系，只在百度生态里用。转换逻辑：
() {
x = gcjLon;
y = gcjLat;
z = .(x * x + y * y) + * .(y * .);
theta = .(y, x) + * .(x * .);
{
: z * .(theta) + ,
: z * .(theta) +
};
}
