一、踩坑起因：经纬度转自定义投影导致图层偏移的真实场景

1.1 项目背景

我做过一个产业园的智慧地图项目，园区占地约2平方公里，需要对接当地测绘院提供的高精度自定义平面坐标系。这种坐标系是为了园区工程测量定制的，比通用的WGS84坐标在小范围测量中误差更小，是项目要求必须使用的基准坐标。

1.2 踩坑现象

项目上线前，园区内的建筑Marker、门禁点位全部出现偏移：本来应该在产业园大门的Marker，直接跑到了对面的市政公路上，整体偏差约40米，现场测试时连物业的工作人员都能一眼看出错位，急得我们差点延期上线。

二、先搞懂L7地图的坐标系和投影基础

2.1 生活化理解坐标系

其实可以把坐标系比作“坐标地图的语言”：WGS84是GPS用的全球通用语，就像英语，适合全球范围；GCJ02是国内火星坐标，相当于国内的普通话；而项目用的自定义平面坐标系，是当地测绘院给的“方言”，只在这个产业园范围内通用，换个地方就不顶用了。

2.2 投影是什么

投影就是把球面的地理坐标转换成平面坐标的“翻译过程”。比如地球是个球体，直接画成平面会变形，投影的作用就是尽量减少小范围区域的变形，让测量的距离、角度更准。L7地图作为常用的Web地图渲染框架，核心就是处理不同坐标系之间的“翻译”，让坐标能正确显示在画布上。

三、排查思路：一步步找偏移的根源

3.1 第一步：确认坐标系基准是否匹配

首先核对测绘院给的自定义投影参数，我们当时查了半天才发现，把中央子午线的经度写错了1度（本来是117度，写成118度），这1度的偏差在平面上直接对应约111公里？不对，哦不对，小范围的话，1度大概对应111公里，但因为是园区的小范围，其实是投影的参数错误，比如平面原点的偏移量，或者投影类型选错了。

3.2 第二步：检查投影转换代码

一开始用Leaflet的默认投影，代码是这样的：

// 错误的投影转换代码，直接用了默认的经纬度投影
const customCRS = L.CRS.extend({
  projection: L.Projection.LonLat, // 这里用了全球经纬度投影，不是自定义平面投影
  transformation: new L.Transformation(1, 0, -1, 0)
});

这段代码的问题是没有把经纬度转成自定义平面坐标，直接用了全球坐标，自然就偏移了。

3.3 第三步：检查图层坐标是否混用

当时园区的建筑坐标是自定义平面坐标，Marker却用了WGS84的经纬度，两种不同坐标系的坐标混在一起，相当于把英语和中文硬放在同一句话里，肯定会出错。

四、解决方案：完美适配自定义投影的正确姿势

4.1 用proj4js处理投影转换

proj4js是专门处理坐标系转换的“翻译官”，能把不同坐标系的坐标互相转换，适合Web地图项目使用。正确的代码示例如下，技术栈用Leaflet + proj4js：

// 引入proj4js，npm安装：npm install proj4 --save
import proj4 from 'proj4';
// 定义自定义坐标系的PROJ参数，这个必须从测绘院拿，不能自己瞎写
// 这里用某市产业园的自定义平面坐标系示例，参数是固定的
proj4.defs('EPSG:3078', '+proj=tmerc +lat_0=0 +lon_0=117 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs');
// 自定义Leaflet的CRS坐标系
const customCRS = L.CRS.extend({
  projection: {
    // 把经纬度转成自定义平面坐标
    project: function(latlng) {
      const [x, y] = proj4('EPSG:3078', [latlng.lng, latlng.lat]);
      return L.point(x, y);
    },
    // 把平面坐标转回经纬度（反向转换用）
    unproject: function(point) {
      const [lng, lat] = proj4('EPSG:3078').inverse([point.x, point.y]);
      return L.latLng(lat, lng);
    }
  },
  // 翻转Y轴，因为地图画布的Y轴向下，地理坐标系的Y轴向上，不翻转会上下颠倒
  transformation: new L.Transformation(1, 0, -1, 0)
});
// 初始化地图，必须用自定义CRS
const map = L.map('map', {
  crs: customCRS,
  center: [31.2, 117.3], // 这里是经纬度，会被转成自定义平面坐标
  zoom: 16
});
// 添加图层，所有图层都必须用同一个CRS，否则会偏移
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '© OpenStreetMap contributors',
  crs: customCRS
}).addTo(map);
// 添加Marker，用经纬度，proj4会自动转换
L.marker([31.2, 117.3]).addTo(map);

4.2 注意事项

  1. PROJ参数必须从官方测绘机构获取，哪怕差1个秒的数值，平面坐标可能差几十米；
  2. 所有图层、Marker、路径都必须用同一个坐标系，不能混用不同的坐标体系；
  3. 测试时要验证3个以上已知点位，比如园区大门、停车场入口，确保转换正确；
  4. 遇到偏移时，先打印转换前后的坐标，对比测绘院的标准值，快速定位问题。

五、应用场景与总结

5.1 应用场景

这种自定义投影方案适合园区高精度地图、市政工程测绘、矿山测量、机场区域地图等需要小范围高精度坐标的场景，这些场景对距离、角度的精度要求高，通用的全球坐标系无法满足需求。

5.2 技术优缺点

优点：小范围坐标精度极高，无明显变形，符合工程测量的要求； 缺点：需要处理投影转换，增加了代码复杂度，不同地图框架的实现方式可能不同；

5.3 总结

这次踩坑的核心是投影参数错误和转换代码没适配自定义坐标系，后来用proj4js统一处理转换，所有图层用同一个CRS，很快就解决了偏移问题。以后遇到地图图层偏移，优先从坐标系基准、投影代码、图层坐标混用这三个方面排查，能快速定位问题。