使用angular下载geoJSON的传单，未触发下载

Question

我需要实现一个按钮，用于将多边形(或任何形状)下载到一个geojson文件中，但不会触发下载。(尝试两个不同的函数，但都不起作用)我实际上不知道我是把函数弄错了/遗漏了什么，还是问题出在.html中

app.component.ts

import { Component } from '@angular/core';

import { latLng, tileLayer, DrawOptions, DrawEvents } from 'leaflet';
import { icon, marker, polyline, circle, rectangle, polygon} from 'leaflet';
import { LeafletModule } from '@asymmetrik/ngx-leaflet';
import { LeafletDrawModule } from '@asymmetrik/ngx-leaflet-draw';

import { DomSanitizer, SafeUrl, SafeResourceUrl } from '@angular/platform-browser';

import { FeatureGroup, featureGroup } from 'leaflet';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'tesiangularp';

  options = {
    layers: [
      tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap contributors'
      })
    ],
    zoom: 7,
    center: latLng([ 41.471276, 12.907632 ])
  };

  layersControl = {
    baseLayers: {
      'Open Street Map': tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { 
maxZoom: 18, attribution: '...' }),
      'Satellite View Map': tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', { 
maxZoom: 18, attribution: '...',  subdomains:['mt0','mt1','mt2','mt3']})
    },
    overlays: {

    }
      }

  drawnItems: FeatureGroup = featureGroup();

  drawOptions = {
    edit: {
      featureGroup: this.drawnItems
    },
    Draw: {

    }
  };

  public onDrawCreated(e: any) {
    this.drawnItems.addLayer((e as DrawEvents.Created).layer);
  }

  geoExport =() => {
    let nodata = '{"type":"FeatureCollection","features":[]}';
    let jsonData = (JSON.stringify(this.drawnItems.toGeoJSON()));
    let dataUri = 'data:application/json;charset=utf-8,'+ encodeURIComponent(jsonData);
    let datenow = new Date();
    let datenowstr = datenow.toLocaleDateString('en-GB');
    let exportFileDefaultName = 'export_draw_'+ datenowstr + '.geojson';
    let linkElement = document.createElement('a');
    linkElement.setAttribute('href', dataUri);
    linkElement.setAttribute('download', exportFileDefaultName);
    if (jsonData == nodata) {
      alert('No features are drawn');
    } else {
      linkElement.click();
    }
  }

  exportJson() {
    var data = this.drawnItems.toGeoJSON();
    var convertedData = 'text/json;charset=UTF-8,' + encodeURIComponent(JSON.stringify(data));
    document.getElementById('export')?.setAttribute('href', 'data:' + convertedData);
    document.getElementById('export')?.setAttribute('download', 'data.json');
  }

}

app.component.html

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

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

</div>

<a>
  <div style="margin: 2px 0px 2px 0px;">
      <button onclick= "exportJson()">Download</button>
  </div>
</a>

Answer 1

浏览器处理客户端文件创建的方式有所不同。因此，我将使用一个名为file-saver的库。

npm install file-saver

然后将其导入组件中

import { saveAs } from 'file-saver';

并保存你的geojson

const geojson = this.drawnItems.toGeoJSON();
const blob = new Blob([geojson], {type: 'application/json;charset=utf-8'});
saveAs(blob, 'drawnItems.geojson');