TurfJS多面相交合并异常：绘制第三个街道区域时出错

问题背景 #

我正在实现地图街道区域（Street Zones）的自动避让功能：新绘制区域与已有区域相交时，自动裁剪掉重叠部分，只保留不重叠的区域。核心逻辑是：

1. 绘制完成后，用TurfJS的intersection获取新区域与所有已有区域的交集
2. 用union合并所有交集
3. 用difference计算新区域与合并后交集的差集，得到最终保留部分

现有实现代码 #

获取合并交集的函数（含truncate处理） #

const format = new GeoJSON();
const feaPoly = format.writeFeatureObject(feature) as GeoJSONPolygon;

const intersections = featuresToGetIntersectionsWith
  .filter(existingFea =>
    existingFea.get('type') !== feature.get('type') ||
    existingFea.getId() !== feature.getId())
  .map((existingFea) => {
    const existingFeaturePoly = format.writeFeatureObject(existingFea) as GeoJSONPolygon;
    return intersect(feaPoly, existingFeaturePoly);
  })
  .filter(intersection => intersection);

if (!intersections.length) { return null; }

return intersections
  .reduce((prev, curr) => union(truncate(prev), truncate(curr)));

避让逻辑主函数 #

try {
  const format = new GeoJSON();
  const feaPoly = format.writeFeatureObject(feature) as GeoJSONPolygon;
  const unionIntersection = this.getUnionIntersection(feature, featuresToBend);
  if (!unionIntersection) { return; }
  const diff = difference(feaPoly, unionIntersection) as GeoJSONPolygon | GeoJSONMultiPolygon;

  if (!diff) { throw Error('Inner fea'); }
  if (diff.geometry.type === 'MultiPolygon' && !ignoreMultiPolygon) { throw Error('Many shapes'); }
  
  return { difference: diff, intersection: unionIntersection, bendedFeatures: featuresToBend };
} catch (e) {
    this.handleBendError(objType, e);
    throw Error(e.message);
}

问题详情 #

我的场景仅支持差集结果为Polygon类型，前两个区域绘制正常，但第三个区域出现两个问题：

1. 经truncate处理后的两个交集，用union合并后得到MultiPolygon（包含两个独立的交集多边形），但我需要合并为单个Polygon
2. 因为使用了truncate，difference返回的多边形在交集边界存在残留点

涉及的坐标数据 #

• 第一个已有多边形（蓝色）：

[[9227079.586445518,7361106.72521227],[9226950.666712714,7358240.1570358025],[9229240.8878484,7358528.330556187],[9227079.586445518,7361106.72521227]]

• 第二个已有多边形（紫色）：

[[9227891.022410812,7361228.061431374],[9227789.82178895,7360259.4269078225],[9229240.8878484,7358528.330556187],[9229230.813561888,7358527.062930729],[9229976.488676753,7358452.495419242],[9227891.022410812,7361228.061431374]]

• 新区域与第一个多边形的交集：

[[9227440.736314,7359644.350225],[9228159.754835,7359818.103274],[9227491.252183,7360615.615209],[9227440.736314,7359644.350225]]

• 新区域与第二个多边形的交集：

[[9227789.821789,7360259.426908],[9228159.754835,7359818.103274],[9228476.375107,7359894.615543],[9227821.439394,7360562.052554],[9227789.821789,7360259.426908]]

解决方案 #

问题1：合并交集生成MultiPolygon而非Polygon #

两个交集原本通过[9228159.754835,7359818.103274]这个点相连，但truncate截断精度后，这个公共点的坐标被修改，导致两个多边形变成独立个体，union无法自动合并。

解决方法：

• 调整truncate的精度参数，比如保留6位以上小数，确保公共点不会因为截断丢失关联；或者不在每次union前截断，改为合并所有交集后再统一做一次truncate。
• 如果调整精度无效，可手动检查两个交集的公共点，用turf.lineString连接公共点后，再合并为单个多边形执行union。

问题2：差集边界残留点 #

truncate修改坐标精度后，原区域和交集区域的边界出现微小偏差，difference计算时会残留这些微小碎片。

解决方法：

• 避免在union前对每个交集做truncate，改为在最终差集结果上执行一次truncate，同时配合turf.cleanCoords清理冗余坐标点。
• 用turf.simplify对差集结果做简化处理，设置合适容差去除边界微小残留点。

修改后的合并交集函数示例：

const format = new GeoJSON();
const feaPoly = format.writeFeatureObject(feature) as GeoJSONPolygon;

const intersections = featuresToGetIntersectionsWith
  .filter(existingFea =>
    existingFea.get('type') !== feature.get('type') ||
    existingFea.getId() !== feature.getId())
  .map((existingFea) => {
    const existingFeaturePoly = format.writeFeatureObject(existingFea) as GeoJSONPolygon;
    return intersect(feaPoly, existingFeaturePoly);
  })
  .filter(intersection => intersection);

if (!intersections.length) { return null; }

// 先合并所有交集，再统一做truncate处理
const mergedUnion = intersections.reduce((prev, curr) => union(prev, curr));
return truncate(mergedUnion, { precision: 6 }); // 按需调整精度参数

修改后的避让逻辑函数示例：

try {
  const format = new GeoJSON();
  const feaPoly = format.writeFeatureObject(feature) as GeoJSONPolygon;
  const unionIntersection = this.getUnionIntersection(feature, featuresToBend);
  if (!unionIntersection) { return; }
  let diff = difference(feaPoly, unionIntersection) as GeoJSONPolygon | GeoJSONMultiPolygon;

  if (!diff) { throw Error('Inner fea'); }
  
  // 处理因精度问题拆分的MultiPolygon，尝试合并为单个Polygon
  if (diff.geometry.type === 'MultiPolygon') {
    if (diff.geometry.coordinates.length === 2) {
      const merged = union(
        polygon(diff.geometry.coordinates[0]),
        polygon(diff.geometry.coordinates[1])
      );
      if (merged.geometry.type === 'Polygon') {
        diff = merged;
      } else if (!ignoreMultiPolygon) {
        throw Error('Many shapes');
      }
    } else if (!ignoreMultiPolygon) {
      throw Error('Many shapes');
    }
  }

  // 清理残留点和冗余坐标
  diff = cleanCoords(diff);
  diff = simplify(diff, { tolerance: 0.1 }); // 按需调整容差适配坐标精度
  diff = truncate(diff, { precision: 6 });

  return { difference: diff, intersection: unionIntersection, bendedFeatures: featuresToBend };
} catch (e) {
    this.handleBendError(objType, e);
    throw Error(e.message);
}

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