Leaflet.draw 無法編輯multipolygon類型多邊形 解決方法

問題說明

在做面要素的編輯的時候，當對multiploygon類型的面要素進行編輯的時候，出現如下錯誤：

TypeError: Cannot read property 'lat' of null

通過查看github issues發現Leaftlet.Draw插件並不支持multipolygon類型的要素

https://github.com/Leaflet/Leaflet.draw/issues/268

解決方法

通過測試發現可以通過將multipolygon拆分成多個polygon要素的方法可以解決這個問題

拆分方法如下：

function multiPolygon2polygons (multiPolygon){
    if(multiPolygon.type !== 'MultiPolygon'){
        return
    }
    var polygons = [];
    multiPolygon.coordinates.forEach((item)=>{
        var polygon = {
            type: "Polygon",
            coordinates: []
        };
        polygon.coordinates = item;
        polygons.push(polygon)
    });
    return polygons;
}

有時候原始數據可能還是需要保存成multipolygon類型的數據 這時就需要再講拆分的polygons合並成一個multipolygon

合並方法如下：

function polygons2MultiPolygon(geoJson) {
    var newGeoJson = {
        type: "FeatureCollection",
        features: [{geometry: {coordinates: [], type: "MultiPolygon"}, type: "Feature", properties: {}}]
    };
    geoJson.features.forEach((item) => {
        if(item.geometry.type === "Polygon"){
            newGeoJson.features[0].geometry.coordinates.push(item.geometry.coordinates);
        }else{
            item.geometry.coordinates.forEach((item) => {
                newGeoJson.features[0].geometry.coordinates.push(item);
            })
        }
    })
    return newGeoJson;
}