将 csv 文件拖放到 Leaflet 地图中答案

【问题标题】：Drag and drop csv file into Leaflet map将 csv 文件拖放到 Leaflet 地图中
【发布时间】：2021-10-23 09:22:01
【问题描述】：

不必为将 CSV 文件拖放到传单地图中找到任何解决方案。有一个用于 GeoJSON、TopoJSON 和压缩 Shapefile Drag and Drop calvinmetcalf 的插件。对于这些文件，您需要可以转换为这些文件类型的 GIS 软件或特殊工具。我想要一个普通的 CSV 文件，用户无需特殊软件即可使用。

Esri 具有类似于我正在寻找的功能。将 CSV 简单拖放到地图上，CSV 当然需要有纬度/经度值才能工作...

我一直在尝试使用以下脚本使用拖放功能和这个插件Leaflet.geoCSV。但不确定如何让删除的文件与插件交互。该文件已上传到浏览器，但无法将数据显示在地图上并且没有错误...我遗漏了某些内容或所有内容都出错了...

<div id="map" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);"></div>

<script type="text/javascript" src="../js/leaflet.geocsv.js"></script>

 function dragOverHandler(ev) {
  console.log('File(s) in drop zone');

  // Prevent default behavior (Prevent file from being opened)
  ev.preventDefault();
}

function dropHandler(ev) {
  console.log('File(s) dropped');

  // Prevent default behavior (Prevent file from being opened)
  ev.preventDefault();

  if (ev.dataTransfer.items) {
    // Use DataTransferItemList interface to access the file(s)
    for (var i = 0; i < ev.dataTransfer.items.length; i++) {
      // If dropped items aren't files, reject them
      if (ev.dataTransfer.items[i].kind === 'file') {
        var file = ev.dataTransfer.items[i].getAsFile();
        console.log('... file[' + i + '].name = ' + file.name);
      }
    }
  } else {
    // Use DataTransfer interface to access the file(s)
    for (var i = 0; i < ev.dataTransfer.files.length; i++) {
      var geoLayer = L.geoCsv(ev.dataTransfer.files[i].name, {firstLineTitles: true, fieldSeparator: ';'});
      map.addLayer(geoLayer);
      geoLayer.addTo(map);
      //console.log('... file[' + i + '].name = ' + ev.dataTransfer.files[i].name);
    }
  }

  // Pass event to removeDragData for cleanup
 // removeDragData(ev)
}

function removeDragData(ev) {
  console.log('Removing drag data')

  if (ev.dataTransfer.items) {
    // Use DataTransferItemList interface to remove the drag data
    ev.dataTransfer.items.clear();
  } else {
    // Use DataTransfer interface to remove the drag data
    ev.dataTransfer.clearData();
  }
}

/*
//Example script from Leaflet.geoCSV
(function() {
'use strict';

var map = L.map('mapContainer');

$.get('data.csv', function(csvContents) {
  var geoLayer = L.geoCsv(csvContents, {firstLineTitles: true, fieldSeparator: ','});
  map.addLayer(geoLayer);
});
}); */

【问题讨论】：

标签： csv drag-and-drop leaflet

【解决方案1】：

您需要将文件内容添加到 L.geoCsv 而不是文件名：L.geoCsv(ev.dataTransfer.files[i].name, 您可以使用 FileReader 来执行此操作，例如 here。

PS：这两行是一样的，你可以去掉其中的一行：

      map.addLayer(geoLayer);
      geoLayer.addTo(map);

【讨论】：

【解决方案2】：

我设法让它工作，感谢您将我指向 FileReader。我用了以下，如果有人有类似的问题...

<div id="map" 
ondrop="dropHandler(event);" 
ondragover="dragOverHandler(event);"></div>

function dragOverHandler(ev) {
console.log('File(s) in drop zone');

// Prevent default behavior (Prevent file from being opened)
ev.preventDefault();
}

function dropHandler(ev) {
console.log('File(s) dropped');

// Prevent default behavior (Prevent file from being opened)
ev.preventDefault();

if (ev.dataTransfer.items) {
// Use DataTransferItemList interface to access the file(s)
for (var i = 0; i < ev.dataTransfer.items.length; i++) {
  // If dropped items aren't files, reject them
  if (ev.dataTransfer.items[i].kind === 'file') {
    var file = ev.dataTransfer.items[i].getAsFile();
    var reader = new FileReader();
    reader.onload = function() {
        if (reader.readyState != 2 || reader.error){
            return;
      } else {
            convertToLayer(reader.result)       
        }};

reader.addEventListener('progress', (event) => {
if (event.loaded && event.total) {
  const percent = (event.loaded / event.total) * 100;
  console.log(`Progress: ${Math.round(percent)}`);
}
});       
    reader.readAsText(file)
  }}
}
}

function convertToLayer(CSV) {
var geoLayer = L.geoCsv(CSV, {
    longitudeTitle: 'lng',
    latitudeTitle: 'lat',
    firstLineTitles: true,
    fieldSeparator: ';',
    pointToLayer: function (feature, latlng) {
        return L.circle(latlng, {
            radius: 5,
            fillColor: '#969696',
            fillOpacity: 0.5,
            color: '#252525',
            weight: 1,
            });
}
});
  geoLayer.addTo(map);
}

【讨论】：