Leaflet.Draw插件：GeoJSON转KML功能实现技术问询

Hey there! Since you’re already set up with Leaflet Draw and can export your drawn features as GeoJSON, converting that output to KML is totally achievable. Here are two reliable ways to pull this off:

Option 1: Use a Dedicated GeoJSON-to-KML Library #

The easiest and most robust approach is to use a well-maintained library that handles all the edge cases (like complex geometries, property mapping, and proper KML formatting). A great choice is @mapbox/geojson-to-kml—it’s lightweight and designed exactly for this task.

Steps to Implement: #

1. Add the library to your project:

   • If you’re using npm, install it with:

     npm install @mapbox/geojson-to-kml
     

   • For browser-based projects, download the minified script from the package’s repository and include it in your HTML.

2. Modify your export code:
   Update your existing click handler to convert the GeoJSON to KML instead of exporting it directly:

   document.getElementById('export').onclick = function(e) {
     // Extract GeoJSON from your featureGroup
     const geoJsonData = featureGroup.toGeoJSON();
     
     // Convert GeoJSON to KML string
     const kmlString = geojsonToKml(geoJsonData);
     
     // Prepare the download link
     const encodedKml = 'application/vnd.google-earth.kml+xml;charset=utf-8,' + encodeURIComponent(kmlString);
     const exportLink = document.getElementById('export');
     
     exportLink.setAttribute('href', 'data:' + encodedKml);
     exportLink.setAttribute('download', 'drawn-features.kml');
   };
   

   This will generate a valid KML file with all your drawn features, including their properties.

Option 2: Manual Conversion (No External Libraries) #

If you want to avoid adding extra dependencies, you can roll your own conversion function—though it’s a bit more work, it’s totally feasible for basic geometries (points, lines, polygons).

Example Conversion Function: #

function geoJsonToKml(geoJson) {
  // Start with the KML root structure
  let kmlContent = `<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
  <Document>`;

  // Loop through each feature in the GeoJSON
  geoJson.features.forEach(feature => {
    kmlContent += `
    <Placemark>`;

    // Add feature name (if available)
    if (feature.properties.name) {
      kmlContent += `
      <name>${feature.properties.name}</name>`;
    }

    // Handle different geometry types
    const geometry = feature.geometry;
    switch (geometry.type) {
      case 'Point':
        const pointCoords = geometry.coordinates.join(',');
        kmlContent += `
      <Point>
        <coordinates>${pointCoords}</coordinates>
      </Point>`;
        break;
      case 'LineString':
        const lineCoords = geometry.coordinates.map(coord => coord.join(',')).join(' ');
        kmlContent += `
      <LineString>
        <coordinates>${lineCoords}</coordinates>
      </LineString>`;
        break;
      case 'Polygon':
        // Process polygon rings (outer + inner holes)
        const polygonRings = geometry.coordinates.map(ring => 
          ring.map(coord => coord.join(',')).join(' ')
        ).join('\n          ');
        kmlContent += `
      <Polygon>
        <outerBoundaryIs>
          <LinearRing>
            <coordinates>${polygonRings}</coordinates>
          </LinearRing>
        </outerBoundaryIs>
      </Polygon>`;
        break;
      // Add cases for MultiPoint, MultiLineString, etc. if needed
    }

    // Add feature properties as extended data
    kmlContent += `
      <ExtendedData>`;
    for (const [key, value] of Object.entries(feature.properties)) {
      kmlContent += `
        <Data name="${key}">
          <value>${value}</value>
        </Data>`;
    }
    kmlContent += `
      </ExtendedData>
    </Placemark>`;
  });

  // Close the KML structure
  kmlContent += `
  </Document>
</kml>`;

  return kmlContent;
}

Use the Function in Your Export: #

Just replace the library conversion step with your custom function:

document.getElementById('export').onclick = function(e) {
  const geoJsonData = featureGroup.toGeoJSON();
  const kmlString = geoJsonToKml(geoJsonData);
  
  const encodedKml = 'application/vnd.google-earth.kml+xml;charset=utf-8,' + encodeURIComponent(kmlString);
  const exportLink = document.getElementById('export');
  
  exportLink.setAttribute('href', 'data:' + encodedKml);
  exportLink.setAttribute('download', 'drawn-features.kml');
};

Notes on Manual Conversion: #

• This basic function handles common geometry types, but you’ll need to extend it if you support MultiPoint, MultiLineString, or GeometryCollection features.
• It maps GeoJSON properties to KML’s <ExtendedData> for compatibility with tools like Google Earth.

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