Leaflet.snogylop多多边形图层反转异常问题修复咨询

I’ve run into this exact headache before—when using invert: true directly with L.geoJson for MultiPolygon data, the library splits the MultiPolygon into separate sub-polygon layers and inverts each one individually. That leads to overlapping inverted areas, which is totally not what you want. Here’s how to fix it:

The Root Cause #

L.geoJson automatically breaks MultiPolygon features into multiple independent Polygon layers. When you apply invert: true to the GeoJSON layer, each of those sub-polygons gets its own inverted mask, causing the messy overlap you’re seeing.

The Solution: Treat MultiPolygon as a Single Layer #

Instead of letting L.geoJson split the MultiPolygon, we’ll manually create a single L.Polygon instance that includes all sub-polygon coordinates as multiple rings. Snogylop handles this correctly, inverting the union of all those polygons rather than each one separately.

Here’s your modified code:

function handleJson(data) {
  // Check if we're dealing with a MultiPolygon Feature
  if (data.type === 'Feature' && data.geometry.type === 'MultiPolygon') {
    // Extract all sub-polygon coordinates to use as rings in a single Polygon
    const polygonRings = data.geometry.coordinates;
    
    // Create a single inverted Polygon layer with all rings
    const invertedArea = L.polygon(polygonRings, {
      invert: true,
      worldLatLngs: [
        L.latLng([90, 360]),
        L.latLng([90, -180]),
        L.latLng([-90, -180]),
        L.latLng([-90, 360])
      ]
    });
    
    invertedArea.addTo(lmap);
    lmap.fitBounds(invertedArea.getBounds());
  } else {
    // Fallback for single Polygon or other GeoJSON types (keep original logic)
    const selectedArea = L.geoJson(data, {
      invert: true,
      worldLatLngs: [
        L.latLng([90, 360]),
        L.latLng([90, -180]),
        L.latLng([-90, -180]),
        L.latLng([-90, 360])
      ]
    });
    
    selectedArea.addTo(lmap);
    lmap.fitBounds(selectedArea.getBounds());
  }
}

How This Works #

• L.polygon accepts an array of coordinate rings, which perfectly matches the structure of a MultiPolygon’s coordinates.
• Snogylop processes all these rings as part of one polygon, so the inversion applies to the area outside all sub-polygons combined, not each one individually.
• The fallback logic preserves your original behavior for single Polygon features or other GeoJSON types.

Bonus: Handling FeatureCollections #

If your input is a FeatureCollection with MultiPolygon features, loop through each feature and apply the same check:

function handleJson(data) {
  if (data.type === 'FeatureCollection') {
    const allBounds = L.latLngBounds();
    data.features.forEach(feature => {
      let layer;
      if (feature.geometry.type === 'MultiPolygon') {
        const polygonRings = feature.geometry.coordinates;
        layer = L.polygon(polygonRings, {
          invert: true,
          worldLatLngs: [
            L.latLng([90, 360]),
            L.latLng([90, -180]),
            L.latLng([-90, -180]),
            L.latLng([-90, 360])
          ]
        });
      } else {
        layer = L.geoJson(feature, {
          invert: true,
          worldLatLngs: [
            L.latLng([90, 360]),
            L.latLng([90, -180]),
            L.latLng([-90, -180]),
            L.latLng([-90, 360])
          ]
        });
      }
      layer.addTo(lmap);
      allBounds.extend(layer.getBounds());
    });
    lmap.fitBounds(allBounds);
  } else {
    // Use the single feature logic from earlier
    // ... [same as the first code block]
  }
}

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