How to export GeoJSON in Javascript

你。 提交于 2019-12-09 01:36:20

问题


I have created a GeoJSON list and am trying to export it to file via a button in the webpage. Everything works fine except that the file that is exported only displays 'undefined' and none of the GeoJSON data. What am I doing wrong?

HTML:

  <button onclick="exportToJsonFile()">Download GeoJSON</button>

Script:

 var api = $.getJSON("https://api.data.gov.sg/v1/environment/rainfall?date=2019-07-03",
   function rainfall(data_rainfall){
   apiGeo = { type: "FeatureCollection", features: []};
             //---- apiGeo is populated here ----//

  console.log(apiGeo);     //displays data in GeoJSON format in browser console
});

function exportToJsonFile(apiGeo) {
let dataStr = JSON.stringify(apiGeo);
let dataUri = 'data:application/json;charset=utf-8,'+ encodeURIComponent(dataStr);

let exportFileDefaultName = 'data.json';

let linkElement = document.createElement('a');
linkElement.setAttribute('href', dataUri);
linkElement.setAttribute('download', exportFileDefaultName);
linkElement.click();
} 

回答1:


Takes some time to load data (even this shorter json version, button name is changed to full after load). But works even in snippet. Problem was unused function parameter and then when data was not loaded.

function loadData() {
  var api = $.getJSON("https://api.data.gov.sg/v1/environment/rainfall",
    function rainfall(data_rainfall) {
      apiGeo = { type: "FeatureCollection", features: [], input: api.responseJSON };
      //---- apiGeo is populated here ----//

      console.log(apiGeo);     //displays data in GeoJSON format in browser console
      document.body.getElementsByTagName("BUTTON")[0].innerText += " GeoJSON";
    });
}
function exportToJsonFile() {
  downloadObjectAsJson(apiGeo, "data");
}
function downloadObjectAsJson(exportObj, exportName) {
  if (navigator.msSaveBlob) { // IE10+
    var blob = new Blob([JSON.stringify(exportObj)], {type : 'application/json'});
    return navigator.msSaveBlob(blob, exportName + ".json");
  }
  var dataStr = "data:application/json;charset=utf-8," + encodeURIComponent(JSON.stringify(exportObj));
  var downloadAnchorNode = document.createElement('a');
  downloadAnchorNode.setAttribute("href", dataStr);
  downloadAnchorNode.setAttribute("download", exportName + ".json");
  downloadAnchorNode.innerText = exportName;
  document.body.appendChild(downloadAnchorNode); // required for firefox
  downloadAnchorNode.click();
  downloadAnchorNode.remove();
}
loadData()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="exportToJsonFile()">Download</button>


来源:https://stackoverflow.com/questions/56886672/how-to-export-geojson-in-javascript

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!