当然可以搞定！我之前做项目时刚好处理过类似的需求——核心就是把Fabric.js路径的坐标体系转换成OpenLayers兼容的地理坐标，再包装成标准GeoJSON格式就行。下面是一步步的实现思路和代码示例：

1. 提取Fabric.js路径的顶点坐标 #

Fabric.js的自由绘制路径（不管是用freeDrawingBrush画的，还是手动创建的fabric.Path），都可以通过getPathPoints()方法直接提取所有顶点的{x,y}坐标数组，这个方法会自动把曲线类的路径指令（比如贝塞尔曲线）转换成折线顶点，方便后续处理：

// 获取画布上的目标路径对象（这里以选中的对象为例）
const targetPath = canvas.getActiveObject();
// 提取所有顶点坐标
const fabricVertices = targetPath.getPathPoints();

2. 坐标体系转换 #

这是最关键的一步：Fabric.js的画布默认以左上角为原点，y轴向下；而OpenLayers使用的地理坐标系（比如WGS84/EPSG:4326或Web墨卡托/EPSG:3857）是y轴向上的，而且坐标是经纬度/投影坐标。

两种常见转换场景： #

场景A：画布和地图容器完全重合

如果你的Fabric画布是直接叠加在OpenLayers地图容器上的，用OpenLayers自带的坐标转换方法最精准：

// 假设你已经初始化了OpenLayers地图实例
const map = new ol.Map({ /* 你的地图配置 */ });

// 把Fabric的画布坐标转换成地图的地理坐标
const geoVertices = fabricVertices.map(vertex => {
  // Fabric坐标对应地图容器的像素坐标（假设画布和容器位置、大小完全一致）
  const pixel = [vertex.x, vertex.y];
  // 像素坐标转地理坐标
  return map.getCoordinateFromPixel(pixel);
});

场景B：画布是独立的，需要手动映射到地图范围

如果Fabric画布和地图是分离的，你需要先定义画布对应的地图范围，再手动计算坐标映射：

// 定义画布对应的地图范围（示例：北京某区域的经纬度）
const mapExtent = {
  minLon: 116.3,
  maxLon: 116.5,
  minLat: 39.9,
  maxLat: 40.1
};
const canvasWidth = canvas.width;
const canvasHeight = canvas.height;

const geoVertices = fabricVertices.map(vertex => {
  // 转换经度：画布x从0到width对应地图minLon到maxLon
  const lon = mapExtent.minLon + (vertex.x / canvasWidth) * (mapExtent.maxLon - mapExtent.minLon);
  // 转换纬度：翻转y轴，画布y从0到height对应地图maxLat到minLat
  const lat = mapExtent.maxLat - (vertex.y / canvasHeight) * (mapExtent.maxLat - mapExtent.minLat);
  return [lon, lat]; // GeoJSON要求坐标顺序是[经度, 纬度]
});

3. 组装成标准GeoJSON #

OpenLayers的矢量图层支持标准的GeoJSON格式，我们把转换后的坐标包装成Feature对象即可：

// 判断路径是否闭合（Fabric路径末尾有'Z'指令表示闭合）
const isClosed = targetPath.path.some(cmd => cmd[0] === 'Z');

const geoJsonFeature = {
  type: "Feature",
  properties: {
    // 可以添加自定义属性，比如路径颜色、宽度等
    strokeColor: targetPath.stroke,
    strokeWidth: targetPath.strokeWidth
  },
  geometry: {
    type: isClosed ? "Polygon" : "LineString",
    // Polygon类型需要把坐标放在数组的数组里
    coordinates: isClosed ? [geoVertices] : geoVertices
  }
};

4. 在OpenLayers中加载GeoJSON #

最后把生成的GeoJSON加载到OpenLayers的矢量图层中：

// 创建矢量数据源
const vectorSource = new ol.source.Vector({
  features: new ol.format.GeoJSON().readFeatures(geoJsonFeature)
});

// 创建矢量图层（可以自定义样式）
const vectorLayer = new ol.layer.Vector({
  source: vectorSource,
  style: new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: geoJsonFeature.properties.strokeColor || '#ff0000',
      width: geoJsonFeature.properties.strokeWidth || 2
    }),
    fill: isClosed ? new ol.style.Fill({
      color: 'rgba(255,0,0,0.1)'
    }) : null
  })
});

// 添加到地图
map.addLayer(vectorLayer);

注意事项 #

• 如果你的Fabric路径包含复杂曲线，getPathPoints()会自动将其拆分为多个折线顶点，OpenLayers渲染起来完全没问题；如果需要保留曲线，OpenLayers对GeoJSON的曲线支持有限，建议还是用折线形式。
• 如果要批量转换多个Fabric路径，只需要循环处理每个路径，把生成的Feature放到FeatureCollection的features数组里即可。

内容的提问来源于stack exchange，提问作者sriyan