Question

我正在尝试以CSV格式显示某些数据的热图。我正在尝试将CSV文件中的数据转换为JavaScript变量，但我不知道该怎么做。

我使用以下Leaflet插件：

<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文件。在success函数中，将它分配给一个变量（而不是使用textarea，就像我在这里一样，为了说明）。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

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

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

只有一个热图插件。没有理由说你为什么需要同时使用两个热图插件。

<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众神杀死一只小猫，有人用豌豆和鱼做饭，并称之为西班牙海鲜饭。想想小猫。西班牙海鲜饭。

请注意我分解的问题是几个较小的问题：

选择合适的工具（宣传单版，热图实施）
阅读文本文件（fetch / ajax / XHR / etc）
解析CSV（文件中的分割线，以及字段构成的行）
为热图（循环，选择字段）创建数据结构

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

Answer 3

有很多方法可以做到，但我更喜欢使用D3.js库读取CSV文件。在您可以对数据进行更多计算或者只是阅读它时，它可能很有用!!

安装d3后：

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

然后简单地说：

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

url参考您的数据源，它可能是这样的

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

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

3 个答案: