使用 d3 为传单创建密度和值热图图层答案

【问题标题】：Using d3 to create a density & value heatmap layer for leaflet使用 d3 为传单创建密度和值热图图层
【发布时间】：2013-11-07 07:51:24
【问题描述】：

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

我的数据格式如下：

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

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

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

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

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

更新：我也为 webgl-heatmap found this leaflet wrapper，但它似乎坏了

【问题讨论】：

你看过example Lars Kotthoff的这个吗？
@user1614080 看了看，但没有看到任何相关内容（即，没有给定的特征数据，传单集成）？
我认为您可以在 Maya 站点气候示例中采用等高线技术，您也可以在 Mike Bostock 的 example 中看到。将 svg 容器绑定到传单地图也包含在您指出的示例中。
出于性能和简单性的原因，我建议对数据进行预处理并离线生成热图轮廓（例如作为 geojson）。除非你想对你的点进行分类，否则计算热图将是非常重要的。
感谢@LarsKotthoff，经过一番挖掘之后，看来这就是我必须要做的。只需要找到一个小库来生成轮廓。我确实让那个人发布了 laflet-webgl-heatmap 包装器，它确实工作得很好而且很快，但不是我想要的效果。 github.com/ursudio/webgl-heatmap-leaflet

标签： javascript svg d3.js geospatial leaflet

【解决方案1】：

如果您担心热图的性能，我建议您使用两个选项：Leaflet.heat 和 Google Maps JS API v3。

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

这是一个有 10k 点的 from the demo 页面示例：

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

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

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

数据格式是一个 lat、long 和 value 的数组，如下所示：

[[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 中）

【讨论】：

【解决方案2】：

另一个（传单）选项是：webgl-heatmap-leaflet 借助 WebGL，可以将数据点扩展到数十万个！

【讨论】：

【解决方案3】：

我知道这个问题已经很老了，但我一直在研究同样的问题并遇到了一些事情：

这看起来是个不错的教程：http://www.delimited.io/blog/2013/12/1/hexbins-with-d3-and-leaflet-maps

这是一个指向 tnightingales 代码的链接（您引用了它），但作为一个工作块：http://bl.ocks.org/tnightingale/4668062

这是来自 Bostock 的动态 hexbin 示例：http://bl.ocks.org/mbostock/7833311

最后这里又是一个来自 Bostock 的示例，使用大小和颜色作为动态变量：http://bl.ocks.org/mbostock/4330486

我希望这对研究相同问题的人有所帮助。

【讨论】：