turf使用线数据切割面返回切割后的多个面

原始代码来源：几何计算-基于Turf.js实现多边形的拆分及合并 - 知乎

整理后代码

/**
 * 使用turf工具进行切割面
 * @param line 线段数据
 * @param outerPolygon 面数据
 * return  返回切割的面数据
 */
function splitPolygon(line,outerPolygon){
    let truncatedSplitter = turf.truncate(turf.lineString(outerPolygon.geometry.coordinates[0]), {precision: 7});

    //求交点
    let intersectCollection = turf.lineIntersect(line, truncatedSplitter);
    if (intersectCollection.features.length < 2) {
        return null;
    }

    //将点合并成MultiPoint
    let intersectCombined = turf.combine(intersectCollection).features[0];

    //分别获取切割线
    let outerPieceCollection = turf.lineSplit(line, intersectCombined);
    let splitterPieceCollection = turf.lineSplit(truncatedSplitter, intersectCombined);

    //将所有的线段放到一起
    let pieceCollection = turf.featureCollection(outerPieceCollection.features.concat(splitterPieceCollection.features));

    //使用turf将闭合线组成多边形
    let polygonCollection = turf.polygonize(pieceCollection);

    //对多边形进行判断，切割外的多边形丢弃
    let innerPolygons = polygonCollection.features.filter(polygon => {
        let center = turf.centroid(polygon);
        return turf.booleanWithin(center, outerPolygon);
    });

    //处理镂空数据（多处镂空数据会导致计算错误，因为polygonize方法无法正常的返回数据）
    if(outerPolygon.geometry.coordinates?.length > 1){
        //获取镂空的面数据
        let holeCollection  =  turf.featureCollection(outerPolygon.geometry.coordinates.slice(1).map(item=>turf.polygon([item])));

        //剔除掉镂空的部分数据
        innerPolygons = innerPolygons.map(polygon => {
            let diff = polygon;
            turf.featureEach(holeCollection, (hole) => {
                diff = turf.difference(diff, hole);
            });
            return diff;
        });
    }

    return innerPolygons;
}

测试数据

  let line = {
        "type": "Feature",
        "properties": {},
        "geometry": {
            "coordinates": [
                [
                    103.40846391193196,
                    35.633712881886666
                ],
                [
                    103.37826957111037,
                    35.65061690606042
                ],
                [
                    103.40326377545739,
                    35.66969779622532
                ],
                [
                    103.43345811627898,
                    35.6465275507266
                ],
                [
                    103.43681304303738,
                    35.6555238561357
                ],
                [
                    103.45073598908192,
                    35.6476180659504
                ]
            ],
            "type": "LineString"
        }
    };
    let polygon = {
        "type": "Feature",
        "properties": {},
        "geometry": {
            "coordinates": [
                [
                    [
                        103.3793297775191,
                        35.66810805895443
                    ],
                    [
                        103.3783272883013,
                        35.634953857753274
                    ],
                    [
                        103.42895299384264,
                        35.63585009816798
                    ],
                    [
                        103.42835150031044,
                        35.66875960067411
                    ],
                    [
                        103.3793297775191,
                        35.66810805895443
                    ]
                ],
                [
                    [
                        103.39330561157192,
                        35.659921729248424
                    ],
                    [
                        103.39272803528064,
                        35.65811291497887
                    ],
                    [
                        103.39394920353908,
                        35.65590797049143
                    ],
                    [
                        103.39639154005721,
                        35.65425422217548
                    ],
                    [
                        103.396687760362,
                        35.64094275846179
                    ],
                    [
                        103.41622645272867,
                        35.6414941033663
                    ],
                    [
                        103.41568371128017,
                        35.65196893751293
                    ],
                    [
                        103.41269863331354,
                        35.66189119766757
                    ],
                    [
                        103.39330561157192,
                        35.659921729248424
                    ]
                ],
                [
                    [
                        103.38594376717606,
                        35.65249018622967
                    ],
                    [
                        103.38350143065787,
                        35.64752862625943
                    ],
                    [
                        103.38499396964056,
                        35.643779687686006
                    ],
                    [
                        103.39042138412526,
                        35.646095229341014
                    ],
                    [
                        103.39082844021101,
                        35.65237993268943
                    ],
                    [
                        103.38594376717606,
                        35.65249018622967
                    ]
                ]
            ],
            "type": "Polygon"
        }
    };
    window.onload = function(){
        splitPolygon(turf.lineString(line.geometry.coordinates),turf.polygon(polygon.geometry.coordinates))
    }

找到一个mapbox插件专门处理这些面切割，线切割，镂空之类的操作框架可以参考照抄

https://github.com/map-ir/mapbox-gl-draw-geospatial-tools