使用 HTML5 文件 Reader 并将其发送到 Leaflet Omnivore

Question

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

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

我正在为我的工作构建一个工具。它允许用户上传包含 lat/long 信息的 CSV 文件，并通过 Leaflet Omnivore 将其绘制在地图上。

我能够使 html5 示例正常工作。但是，我什么时候处理它读入的数据呢？ Leaflet Omnivore 需要上传文件的本地路径，如下所示：

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

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

有没有其他方法可以获取文件路径？还是我完全错了？

Answer 1

如果您不需要通过 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/

使用 HTML5 文件 Reader 并将其发送到 Leaflet Omnivore

Use HTML5 File Reader and send it to Leaflet Omnivore

html

layer

filereader

leaflet