OpenLayers实战：如何高效处理EPSG:3857与EPSG:4326坐标转换

1. 理解Web地图中的坐标系基础

第一次接触OpenLayers开发时，我被各种坐标系搞得晕头转向。记得当时在项目里直接使用了GPS设备采集的坐标数据，结果地图显示完全错位，折腾了一整天才发现是坐标系没转换。这个教训让我深刻认识到理解坐标系的重要性。

在Web地图开发中，最常遇到的就是EPSG:4326和EPSG:3857这对"黄金组合"。简单来说，EPSG:4326是地理坐标系，用经纬度表示位置，比如北京的坐标是[116.4, 39.9]；而EPSG:3857是投影坐标系，用米作为单位，同一个位置会变成像[12958118, 4852834]这样的大数字。

为什么需要两种坐标系？这就像我们生活中用不同尺子量东西：EPSG:4326像软尺，适合记录原始数据；EPSG:3857像钢尺，适合在平面地图上精确测量。OpenLayers默认使用EPSG:3857，但实际开发中90%的数据源都是EPSG:4326格式，这就产生了转换需求。

2. OpenLayers中的坐标转换方法

2.1 基础转换函数实战

OpenLayers提供了三种转换方式，我在项目中都实际使用过。最常用的是fromLonLat和toLonLat这对方法：

import { fromLonLat, toLonLat } from 'ol/proj';

// 将微信获取的GPS坐标转为地图坐标
const mapCenter = fromLonLat([116.4, 39.9]); 

// 将地图坐标转回经纬度
const gpsCoord = toLonLat([12958118, 4852834]);

第二个方法是transform，它更灵活但需要显式指定坐标系：

import { transform } from 'ol/proj