javascript - 使用 d3 为传单创建密度和值(value)热图层

Question

我想用 d3 在传单 map 之上实现一个热图层。我有大约 2-3k 个数据点。

我的数据格式如下:

[{lat: .., lon: .., value: ..}, {lat: .., lon: .., value: ..}, ...]

理想情况下，我想在基于值的热图和基于点密度的热图之间切换。我还需要能够动态更新数据。从视觉上看，我的目标是这样的:

我知道传单有一个 couple of heatmap plugins ，两者似乎都不活跃。 Heatmap.js最接近我需要的。但是，它似乎没有维护，文档与源代码不一致，而且运行速度太慢。我已经广泛使用 d3，如果可能的话，我更愿意将它用于热图层。

周围有一两个方 block (例如 this one)，但我没有找到有效的方 block 。 This comes closest到我需要的。它仍然适用于最新的传单版本，但理想情况下我想使用渐变(如在 heatmap.js 中)而不是 hexbins。我还需要重写代码处理数据的方式并调整其他一些位(例如，它绘制密度，而不是值)。

理想情况下，我希望有一个 Mikes leaflet example 风格的解决方案.有什么建议吗？

更新:我也是found this leaflet wrapper对于 webgl-heatmap 但它似乎坏了

Answer 1

如果您担心热图的性能，我会向您推荐两个选项:Leaflet.heat和 Google Maps JS API v3 .

最近我一直在使用 Leaflet 热图，在尝试了几个像你这样的热图之后，我最终得到了 Leaflet.heat .放弃 Google 的唯一原因是许可证，但它确实表现不错。

这是一个例子 from the demo有 10k 点的页面:

它是由 Leaflet 的同一作者制作的，即使它仍然是 alpha/beta，在我的测试中也相当稳定。官方没有提到Leaflet plugins page我花了一段时间才找到它。

它基于simpleheat并在 Leaflet 之上创建一个 HTML5 Canvas 来绘制热图:请记住，它仅适用于 IE9+。

在我的测试中，即使每帧绘制 1k 个点也非常快。

数据格式是经纬度数组，如下所示:

[[lat, lon, value], [...], [...], ... ]

您可以指定您自己的渐变，将其作为创建时的一个选项传递 - 键实际上是值有点奇怪，但它有效 - 请注意 0:

{
  ...,
  gradient: {0.4: 'blue', 0.65: 'lime', 1: 'red'}
}

如果您更喜欢六边形样式，就在今天早上，我找到了 this on bl.ocks.org : 有一个 hexbin plugin for d3以防万一。

与 Leaflet 的集成应该不会那么糟糕:一旦在其上创建了一个层，您应该能够放置六边形并将它们填充为热图(如 this example )