Как загрузить данные из CSV, чтобы использовать их в печатной карте листовка?

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-файла. В функции успеха назначьте его переменной (вместо использования текстового поля, как я здесь, для иллюстрации).

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 готов, инициализировать Heatmap:

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 убивают котенка, а кто-то готовит рис с горохом и рыбой на нем и называет его паэлья. Подумайте о котятах. И паэлья.

Пожалуйста, обратите внимание, что я расколоть проблема несколько, небольшие проблемы:

• Выберите правильные инструменты (листовка версия, реализация Heatmap)
• Чтение текстового файла (выборки/Ajax/XHR/и т.д.)
• Разбирает CSV (разделенные строки из файла, и поля образуют строки)
• Создать структуру данных для тепловой карты (петли, выбор поля)

В зависимости от вашего конкретного сценария вам может потребоваться изменить любую из этих небольших проблем.

Answer 3

Существует много способов сделать это, но я предпочитаю читать CSV-файлы, используя библиотеку D3.js. Это может быть полезно, когда вы можете делать больше вычислений на своих данных или, возможно, просто читать его!

после установки 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'