Leaflet Draw导出GeoJSON功能实现求助：新手自学遇阻

嘿，我来帮你搞定Leaflet Draw导出GeoJSON的功能！其实这个步骤并不复杂，我给你拆解成几个简单的步骤，照着做就行：

1. 修改导出按钮文本 #

先把你原来的按钮改成GeoJSON相关的，这样用户一眼就知道是导出什么格式：

<input type='button' id='export' value='Export Feature (.geojson)' class='btn' />

2. 绑定导出逻辑的JavaScript代码 #

接下来给这个按钮添加点击事件，核心是获取绘制的要素、转成GeoJSON格式，再触发浏览器下载。直接把这段代码加到你的地图脚本里就行：

// 第一步：获取Leaflet Draw管理的绘制要素组
// 如果你自己定义了featureGroup（比如const drawnItems = L.featureGroup().addTo(map);），就替换成你的变量
const drawnItems = map.drawControl.options.featureGroup;

// 第二步：给导出按钮绑定点击事件
document.getElementById('export').addEventListener('click', function() {
  // 将绘制的要素转换为GeoJSON对象
  const geojsonData = drawnItems.toGeoJSON();
  
  // 把GeoJSON对象格式化为易读的字符串
  const geojsonString = JSON.stringify(geojsonData, null, 2);
  
  // 创建Blob对象用于生成下载文件
  const blob = new Blob([geojsonString], { type: 'application/json' });
  
  // 创建临时下载链接
  const downloadUrl = URL.createObjectURL(blob);
  
  // 创建隐藏的a标签触发下载
  const link = document.createElement('a');
  link.href = downloadUrl;
  link.download = 'my-drawn-features.geojson'; // 自定义下载的文件名
  link.click();
  
  // 释放临时URL资源
  URL.revokeObjectURL(downloadUrl);
});

几个关键注意点 #

• 确保你的Leaflet Draw控件初始化时，正确关联了要素组。如果是手动初始化Draw控件，代码大概是这样的（供参考）：

  const drawnItems = L.featureGroup().addTo(map);
  const drawControl = new L.Control.Draw({
    edit: {
      featureGroup: drawnItems
    }
  });
  map.addControl(drawControl);
  

  这种情况下，你就直接用自己定义的drawnItems变量，不用再从map.drawControl.options.featureGroup获取了。
• 测试的时候记得先在地图上绘制几个点、线或者面，再点击导出按钮，不然下载的文件会是空的GeoJSON结构哦。

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