リーフレットヒートマップで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

は、私は次のリーフレットのプラグインを使用します3210これを試してください。実際には、CSVファイルを読み込むためにAJAX呼び出しが必要です。成功関数では、これを変数に代入します（例として、ここにあるように、テキストエリアを使用するのではなく）。

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> 

そしてちょうど1ヒートマッププラグイン：

---

まず第一には、私はつもり利用リーフレットの最新バージョンです。なぜ2つのヒートマッププラグインが同時に必要なのかは、地球上に理由はありません。

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

... partsがあることを念頭に置いて、あなたは heatmap pluginが好きになるという形で、ヒートマップに表示するデータを取得します0インデックス配列...

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

...回線上でループが終わり、heatDataの準備ができたらと、ヒートマップのinit：

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を参照してください。

---

盲目的にコードをコピーして貼り付けないでください。コードをコピーして貼り付けるたびに、スタックオーバーフローの神々は子猫を殺し、誰かがエンドウ豆と魚で米を料理し、それをパエラと呼びます。子猫を考える。パエリア

私は問題は、小さな問題のいくつかで分かれてきたことに注意してください：

• （ヒートマップの実装、リーフレット版）適切なツールを選択し
• テキストファイルを読む（アヤックス/ XHR /フェッチ/など）
• ファイルから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'