将csv文件拖放到传单地图中

Question

没有找到任何拖放CSV文件到传单地图的解决方案。有一个插件GeoJSON, TopoJSON，和压缩形状文件拖放calvinmetcalf。对于这些文件，您需要能够转换为这些文件类型的GIS软件或特殊工具。我想要一个普通的CSV文件，用户可以使用，而不需要特殊的软件。

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

我一直在尝试拖放功能和这个插件传单。使用以下脚本创建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);
});
}); */

Answer 1

您需要将文件内容添加到L.geoCsv而不是文件名:L.geoCsv(ev.dataTransfer.files[i].name,您可以这样做，例如FileReader，如下所示。

PS:这两行是相同的，所以你可以删除其中的一个:

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

Answer 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);
}