Question

我尝试使用JSON格式的数据中的leaflet.js和leaflet.heat来构建热图。到目前为止，我已经能够使用jQuery的getJSON获取和解析我的JSON文件了，但我仍然停留在我遍历文件并返回数组leaflet.heat需要的部分。在传单上构建热图图层。

根据leaflet.heat的文档，我需要传递给库的是一个像这样构造的数组：

[latitude, longitude, intensity]

我的JSON看起来像这样：

[{"Lat":"39.51","Long":"-76.164","Intensity":"0.0017980221756068300"},
{"Lat":"39.463","Long":"-76.12","Intensity":"0.0332634102487264000"}, 
...more data...]

这是我的代码：

$.getJSON( 'data.json',
    function(data){
        var heat = L.heatLayer(data, {radius: 25}).addTo(map);
    });
});

当我运行它时，我收到以下错误：

TypeError: null is not an object (evaluating 't.lat')

我认为这是因为当库需要没有键的数组时传递JSON 对象。我查看了this similar SO question，但是当我使用此代码将输出记录到控制台时，

var arr = $.map(data, function(el) { return el });
console.log(arr);

...它仍然作为带键的对象输出。不确定我做错了什么。

Answer 1

我认为应该这样做：

var arr = data.map(function(el) {
  return [+el.Lat, +el.Long, +el.Intensity];
});

map一次为您提供一个数组的每个元素，并允许您对其进行转换。

每个元素看起来都像{"Lat":"39.51","Long":"-76.164","Intensity":"0.0017980221756068300"}，您希望将其转换为[39.51, -76.164, 0.0017980221756068300]之类的内容。您可以使用.Lat，.Long和.Intensity来获取每个值，前面的+会将值从字符串转换为数字。

Answer 2

您实际上并不需要手动解析它。现代浏览器支持JSON反序列化：

var json_string = file.read("filename");
var json_to_array = JSON.parse( json_string );

循环通过JSON对象并将它们转换为数组

2 个答案: