使用HTML5文件阅读器并将其发送给Leaflet Omnivore

时间:2017-07-27 19:38:35

标签: html5 leaflet filereader layer

我正在使用Leaflet JavaScript并遵循本教程:

https://www.html5rocks.com/en/tutorials/file/dndfiles/

我正在为我的工作建立一个工具。它允许用户上传带有纬度/经度信息的CSV文件,并通过Leaflet Omnivore将其绘制在地图上。

我能够让html5示例正常运行。但是,我何时处理它读入的数据? Leaflet Omnivore要求上传文件的本地路径如下:

         var testCSV = omnivore.csv('path/to/file.csv').addTo(map).on('error', function(error) {
                                console.log(error);
                            });

据我所知,出于安全原因,这是不可能的。

还有其他方法可以获取文件路径吗?或者我是否完全错了?

1 个答案:

答案 0 :(得分:4)

如果您不需要通过AJAX调用远程检索文件(例如使用omnivore.csv),但您已将CSV内容作为字符串,则可以直接使用omnivore.csv.parse功能:

var layer = omnivore.csv.parse(csvStringContent).addTo(map);
// Executed synchronously, so no need to use the .on('ready') listener.
map.fitBounds(layer.getBounds());

演示:https://jsfiddle.net/3v7hd2vx/358/