Javascript 如何从CSV加载数据以在传单热图中使用？

我正在尝试以CSV格式显示一些数据的热图。我试图将CSV文件中的数据转换成JavaScript变量，但我不知道如何实现

我使用以下传单插件：

<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

<script src="heatmap.js"></script>

<script src="leaflet-heatmap.js"></script>

---

试试这个。实际上，您需要一个AJAX调用来加载CSV文件。在success函数中，将其分配给一个变量（而不是像我在这里所做的那样，使用textarea进行说明）

mapData=[]；
CSV=$（“#输入”）.val（）；
变量行=CSV.split（“\n”）；
var结果=[]；
var headers=行[0]。拆分（“；”）；
对于（变量i=1；i

身份证件科迪戈邮政；地方性；瓦洛拉西奥恩；lat；液化天然气
1.46100;布哈索特；8.39.51;-0.425055
2.18005;格拉纳达；7.37.169266;-3.597161
解决这个问题有很多不同的方法。我要描述的只是其中的一个


首先，我将使用最新版本的传单：

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>

将文本拆分为行

var lines = text.split("\n");

…遍历除第一行之外的所有行

for (var i=1; i<lines.length; i++) {

…获取要在热图上显示的数据，以用户喜欢的形式显示，请记住，
parts
是一个0索引数组

var heatData = []
for(...){
   ...
   // heatData.push( lat, lng, weight )
   heatData.push( [ parts[4], parts[5], parts[3] ] )

…一旦线路上的循环结束并且
heatData
准备就绪，初始化热图：

var heat = L.heatLayer(heatData, {radius: 25}).addTo(map);

把它们放在一起：

    var map = new L.Map('map').fitWorld();

    var positron = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
    }).addTo(map);

    // I'll just ignore the network request and fake some data.

//    fetch('http://something/something/data.csv').then(function(response){
//        return response.text();
//    }).then(function(text){

          text = "id;Código postal;Localidad;Valoracion;lat;lng\n1;46100;Burjassot;8;39.51;-0.425055\n2;18005;Granada;7;37.169266;-3.597161";

          var lines = text.split("\n");
          var heatData = [];
          for (var i=1; i<lines.length; i++) {
            var parts = lines[i].split(";");
            heatData.push( [ parts[4], parts[5], parts[3] ] );
          }

          var heat = L.heatLayer(heatData, {radius: 25}).addTo(map);

//    }).catch(function(err){
//        // Error handling for the fetch goes here (e.g. the network request failed, etc)
//    })

var-map=new L.map（'map'）.fitWorld（）；
var positron=L.tileLayer（'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png'{
属性：'©；贡献者，©；'
}).addTo（地图）；
//我将忽略网络请求并伪造一些数据。
//取（'http://something/something/data.csv，然后（函数（响应）{
//返回response.text（）；
//}）。然后（函数（文本）{
text=“id；Código postal；Localidad；Valoracion；lat；lng\n1；46100；Burjassot；8；39.51；-0.425055\n2；18005；格拉纳达；7；37.169266；-3.597161”；
变量行=text.split（“\n”）；
var heatData=[]；
对于（var i=1；i有很多方法可以做到这一点，但我更喜欢使用D3.js库读取CSV文件。在您可以对数据进行更多计算或只是读取数据的地方，它可能很有用

安装d3后：

<script src="https://d3js.org/d3.v4.js" charset="utf-8"></script>

url指的是您的数据源，可能是这样的

url = 'http://something/something/data.csv'

如果你能复制粘贴CSV文件的前几行，那会很有帮助。谢谢你解释这部分代码，但我的主要问题是我不能用我以前写的代码生成热图。好的。我在你的问题中遗漏了这一点。另一个答案可能会有帮助。谢谢伊万，我理解下面的代码是用于通过CSV的来自web的文件：fetch（{return response.text（）；}）{但是有必要在文本中引入csv的所有行吗？没有。您应该只使用fetch API，它将用文件的内容填充
text
变量。复制粘贴csv在我的代码中的内容只是一个例子。顺便说一句，
fetch（…）
code不是«for pass»CSV文件。该代码使您的浏览器获取远程资源，在本例中为CSV文件。这有区别。您好，我想您可能是想说：关于小猫，vs关于小猫。但我可能错了。：-）顺便说一句，写得很棒。太棒了！
var heatData = []
for(...){
   ...
   // heatData.push( lat, lng, weight )
   heatData.push( [ parts[4], parts[5], parts[3] ] )

var heat = L.heatLayer(heatData, {radius: 25}).addTo(map);

    var map = new L.Map('map').fitWorld();

    var positron = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
    }).addTo(map);

    // I'll just ignore the network request and fake some data.

//    fetch('http://something/something/data.csv').then(function(response){
//        return response.text();
//    }).then(function(text){

          text = "id;Código postal;Localidad;Valoracion;lat;lng\n1;46100;Burjassot;8;39.51;-0.425055\n2;18005;Granada;7;37.169266;-3.597161";

          var lines = text.split("\n");
          var heatData = [];
          for (var i=1; i<lines.length; i++) {
            var parts = lines[i].split(";");
            heatData.push( [ parts[4], parts[5], parts[3] ] );
          }

          var heat = L.heatLayer(heatData, {radius: 25}).addTo(map);

//    }).catch(function(err){
//        // Error handling for the fetch goes here (e.g. the network request failed, etc)
//    })

<script src="https://d3js.org/d3.v4.js" charset="utf-8"></script>

d3.csv(url, function(data) {
console.log(data)
})

url = 'http://something/something/data.csv'