Maplibre处理EPSG:27700坐标系GeoJSON的最佳方案咨询

嘿，这个问题我刚好踩过坑，给你分享两个实用的方案，你可以根据自己的场景来选：

方案一：提前把GeoJSON坐标转换为EPSG:4326（最省心的方式） #

如果你的数据量不大，或者可以提前预处理，我首推这种方法，避免在前端额外处理带来的性能开销。

工具类方法（适合批量处理） #

用GDAL的ogr2ogr命令行工具就能快速搞定，一行命令就行：

ogr2ogr -f GeoJSON -t_srs EPSG:4326 转换后的文件名.geojson 原EPSG27700文件.geojson

这个工具处理速度快，支持各种空间数据格式，批量转换一堆文件也不在话下。

代码转换（适合动态处理场景） #

如果需要在前端或者代码里实时转换，可以用proj4js库来做。先定义好EPSG:27700的投影参数，然后遍历GeoJSON的每个坐标点进行转换：

// 先注册EPSG:27700的投影定义
proj4.defs("EPSG:27700", "+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 +units=m +no_defs");

// 递归转换坐标的函数
function transformCoords(coords) {
  // 处理Point类型
  if (typeof coords[0] === 'number') {
    return proj4("EPSG:27700", "EPSG:4326", coords);
  }
  // 处理LineString/Polygon的环
  else if (typeof coords[0][0] === 'number') {
    return coords.map(c => proj4("EPSG:27700", "EPSG:4326", c));
  }
  // 处理MultiPolygon等嵌套类型
  else {
    return coords.map(transformCoords);
  }
}

// 转换整个FeatureCollection
function convertGeoJSON(originalGeoJSON) {
  const converted = JSON.parse(JSON.stringify(originalGeoJSON));
  converted.features.forEach(feature => {
    feature.geometry.coordinates = transformCoords(feature.geometry.coordinates);
  });
  return converted;
}

// 使用示例
const convertedData = convertGeoJSON(yourOriginalGeoJSON);

方案二：让Maplibre直接支持EPSG:27700坐标系 #

如果你的数据量很大，或者需要动态加载无法提前转换，可以让Maplibre直接处理EPSG:27700的坐标，但这个方法需要额外配置投影转换：

1. 确保项目里已经集成了proj4js库
2. 注册EPSG:27700的投影定义（和上面代码里的一致）
3. 在初始化Maplibre地图时，通过customProjection选项指定自定义投影转换，或者用maplibregl.addCoordinateTransforms添加坐标系转换规则。不过要注意，Maplibre的GeoJSON源默认仅支持EPSG:4326或EPSG:3857，所以你可能需要把GeoJSON源的坐标通过转换函数实时处理后再添加到地图上，或者改用矢量瓦片格式配合自定义投影。

小提醒 #

如果选择方案二，要考虑前端的性能问题，大量坐标转换可能会导致地图加载变慢，所以能提前预处理的话，方案一肯定是更优选择。

备注：内容来源于stack exchange，提问作者vogomatix