如何从CSV加载数据以在Leaflet热图中使用它？

Question

我试图从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> 

我的代码如下：

<script> 

    window.onload = function() { 

    var baseLayer = L.tileLayer(
     'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{ 
     attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>', 
     maxZoom: 18 
     } 
    ); 
    var testData = { 
     max: 8, 
     data: [ 
     {lat: 24.6408, lng:46.7728, count: 3}, 
     {lat: 50.75, lng:-1.55, count: 1}, 
     {lat: 52.6333, lng:1.75, count: 1} 
     ] 
    }; 
    var cfg = { 
     "radius": 2, 
     "maxOpacity": .8, 
     "scaleRadius": true, 
     "useLocalExtrema": true, 
     latField: 'lat', 
     lngField: 'lng', 
     valueField: 'count' 
    }; 
    var heatmapLayer = new HeatmapOverlay(cfg); 
    var map = new L.Map('map', { 
     center: new L.LatLng(25.6586, -80.3568), 
     zoom: 4, 
     layers: [baseLayer, heatmapLayer] 
    }); 
    heatmapLayer.setData(testData); 
    layer = heatmapLayer; 
    }; 
</script> 

CSV文件看起来是这样的：

id;Código postal;Localidad;Valoracion;lat;lng 
1;46100;Burjassot;8;39.51;-0.425055 
2;18005;Granada;7;37.169266;-3.597161 

Answer 1

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

mapData = []; 
 
CSV = $('#input').val(); 
 
var lines = CSV.split("\n"); 
 
var result = []; 
 
var headers = lines[0].split(";"); 
 
for (var i = 1; i < lines.length; i++) { 
 
    var obj = {}; 
 
    var nextline = lines[i].split(";"); 
 
    for (var j = 0; j < headers.length; j++) { 
 
    obj[headers[j]] = nextline[j]; 
 
    } 
 
    result.push(obj); 
 
} 
 
$.each(result, function(i, el) { 
 
    lat = el.lat; 
 
    lng = el.lng; 
 
    newData = { 
 
    lat: lat, 
 
    lng: lng 
 
    }; 
 
    mapData.push(newData); 
 
}); 
 
console.log(mapData);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<textarea id="input"> 
 
id;Código postal;Localidad;Valoracion;lat;lng 
 
1;46100;Burjassot;8;39.51;-0.425055 
 
2;18005;Granada;7;37.169266;-3.597161</textarea>

Answer 2

有很多不同的方法的问题。我要描述的只是其中之一。

---

首先，我会用单张的最新版本：

<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> 

而且只是一个热图插件。地球上没有理由为什么你应该同时需要两个heatmap插件。

<script src="https://unpkg.com/leaflet.heat@0.2.0/dist/leaflet-heat.js"></script> 

接下来是reading the contents of a text file into a JS variable。有几种方法，但我特别喜欢fetch API的：

fetch('http://something/something/data.csv').then(function(response){ 
    return response.text(); 
}).then(function(text){ 
    // Handling of the text contents goes here 
}).catch(function(err){ 
    // Error handling goes here (e.g. the network request failed, etc) 
}) 

拆分文成线......

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

...通过线循环，除了第一个。 ...

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

...将行分割成以逗号分隔的部分（在这种情况下，以分号分隔）;我假设一个简单的CSV格式（things can get a bit more complicated with some CSV files）...

var parts = lines[i].split(";"); 

...让你想显示的热图，在形式的heatmap plugin会喜欢数据，牢记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) 
// }) 

看到一个working example here。

---

请不要盲目复制粘贴代码。每当你复制粘贴代码，stackoverflow神杀死一只小猫，有人用豌豆和鱼煮饭，并称之为海鲜饭。想想小猫。和海鲜饭。

请注意，我已经分裂问题是几，小问题：

• 选择正确的工具（单张版本，热图实现）
• 阅读文本文件（读取/ AJAX/XHR /等）
• 解析CSV（从文件分割线和字段形成线）
• 创建用于热图（循环数据结构，选择字段）

根据您的具体情况，您可能需要修改任何这些较小的问题。

Answer 3

有很多方法可以做到，但我更喜欢使用D3.js库来读取CSV文件。它可能是有用的，你可以做更多的数据计算或读取它！

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

后来干脆：

安装D3之后

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

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

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