Leaflet：MultiPolygon图层转GeoJSON时触发类型错误

问题 #

我已在Leaflet中成功实现MultiPolygon图层，但在将其转换为GeoJSON对象时出现错误。接收的GeoJSON经纬度顺序颠倒，所以我实现了swapCoords函数进行转换，但调用multipolygon.toGeoJSON(8)时出现以下错误：

GeoJSON.js:272 Uncaught TypeError: Cannot read properties of null (reading 'alt')
    at Mi (GeoJSON.js:272:16)
    at zi (GeoJSON.js:288:4)
    at zi (GeoJSON.js:287:4)
    at zi (GeoJSON.js:287:4)
    at e.toGeoJSON (GeoJSON.js:368:16)
    at anadirPoligono (busqueda:477:28)
    at <anonymous>:1:1

我的代码如下：

let colecccionPoligonos=[];
const multiPolygonOptions = {color:'red', weight:2, fillOpacity: 0.5};

function swapCoords(coords){
    for (const val of coords[0]){
        const aux=val[0];
        val[0]=val[1];
        val[1]=aux;
    }
    return coords;
}

function anadirPoligono(poligono){
    colecccionPoligonos.push([[swapCoords(poligono.geometry.coordinates)]]);
    
    if(multipolygon){
        map.removeLayer(multipolygon);
    }

    multipolygon=L.polygon(colecccionPoligonos,multiPolygonOptions);
    console.log(multipolygon);
    
    map.addLayer(multipolygon);
    console.log(colecccionPoligonos);
    console.log(multipolygon.toGeoJSON(8));
}

问题分析与解决 #

1. 错误使用L.polygon创建多多边形 #

Leaflet中，L.polygon仅用于创建单个多边形，多多边形（MultiPolygon）必须使用L.multiPolygon。用L.polygon嵌套多层坐标会导致内部解析结构异常，触发toGeoJSON时的空值错误。

2. 坐标嵌套层级冗余 #

GeoJSON的MultiPolygon结构是[[[环坐标组1], [环坐标组2]]]，但你的代码中colecccionPoligonos.push([[swapCoords(...)]]);额外多嵌套了一层，变成[[[[...]]]]，Leaflet无法正确解析该结构，进而转GeoJSON时出错。

3. swapCoords函数覆盖不全 #

你的函数仅处理了coords[0]（即第一个环），如果输入多边形包含内环（带洞的多边形），会漏掉其他环的坐标转换，需遍历所有环层级。

修正后的代码 #

let colecccionPoligonos = [];
const multiPolygonOptions = {color:'red', weight:2, fillOpacity: 0.5};
let multipolygon; // 声明全局变量

// 修正坐标转换：处理所有环层级
function swapCoords(coords) {
    // coords格式为GeoJSON多边形坐标：[[环1坐标], [环2坐标]...]
    return coords.map(ring => {
        return ring.map(coord => {
            // 交换经纬度顺序
            return [coord[1], coord[0]];
        });
    });
}

function anadirPoligono(poligono) {
    // 直接添加转换后的多边形坐标（无需额外嵌套）
    colecccionPoligonos.push(swapCoords(poligono.geometry.coordinates));
    
    if(multipolygon){
        map.removeLayer(multipolygon);
    }

    // 使用L.multiPolygon创建多多边形
    multipolygon = L.multiPolygon(colecccionPoligonos, multiPolygonOptions);
    map.addLayer(multipolygon);
    
    // 现在可正常转换为GeoJSON
    console.log(multipolygon.toGeoJSON(8));
}

验证要点 #

• 确认poligono.geometry.type为Polygon，因为逻辑是逐个添加单个多边形到多多边形集合中
• 转换后的坐标层级需为[[[环坐标]], [[另一多边形的环坐标]]]，符合L.multiPolygon的参数要求

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