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

问题描述

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

I'm using Leaflet JavaScript and following this tutorial:

https://www.html5rocks.com/zh-CN/tutorials/file/dndfiles/

我正在为我的工作构建工具.它允许用户上载带有经/纬度信息的CSV文件，并通过Leaflet Omnivore在地图上绘制该文件.

I'm building a tool for my work. It allows the user to upload a CSV file with lat/long info and plot it on a map via Leaflet Omnivore.

我能够使html5示例正常工作.但是，何时读取读入的数据?传单Omnivore需要这样上传的文件的本地路径:

I am able to get the html5 examples to work. But, when do I do with the data it reads in? Leaflet Omnivore requires the local path to the file being uploaded like this:

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

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

As far as I know, that's not possible to get for security reasons.

还有其他方法可以获取文件路径吗?还是我要把这完全错了?

Is there any other way to go about getting file path? Or am I going about this totally wrong?

推荐答案

对于不需要通过AJAX调用远程检索文件的情况(例如，使用 omnivore.csv )，但是您已经拥有CSV内容作为字符串，则可以直接使用 omnivore.csv.parse 函数:

For the case where you do not need to retrieve your file remotely through an AJAX call (e.g. using omnivore.csv), but you already have the CSV content as string, you can directly use the omnivore.csv.parse function:

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/

这篇关于使用HTML5文件阅读器并将其发送到Leaflet Omnivore的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！