Angular项目中Leaflet绘制图形导出GeoJSON未触发下载问题求解

你遇到的点击下载无响应核心有三个问题：

• 模板事件绑定错误：Angular不支持原生onclick属性绑定组件方法，原生onclick会在全局window作用域查找方法，而你的导出方法是组件内部方法，不在全局作用域，调用直接报错无响应，必须使用Angular内置的(click)事件绑定语法
• exportJson方法逻辑缺失：该方法仅修改了不存在的id="export"的a标签属性，没有触发下载动作
• 冗余的a标签嵌套：按钮外层的a标签没有实际作用，还可能干扰点击行为

你已经写好的geoExport方法逻辑完全正确，不需要修改，只需要修正模板绑定即可直接使用。

app.component.html #

<div class="map"
  leaflet
  leafletDraw
  [leafletOptions]="options"
  [leafletLayersControl]="layersControl"
  [leafletDrawOptions]="drawOptions"
  (leafletDrawCreated)="onDrawCreated($event)">

    <div [leafletLayer]="drawnItems"></div>
</div>

<div style="margin: 2px 0px 2px 0px;">
    <button (click)="geoExport()">Download</button>
</div>

• 启动项目后在地图上绘制任意图形
• 点击Download按钮，会自动校验是否存在绘制内容，空内容会弹出提示，有内容会直接下载带日期命名的GeoJSON文件
• 下载的文件可以直接导入支持GeoJSON的GIS工具验证格式正确性

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