使用d3在leaflet上创建密度和值热力图层

Question

我希望在leaflet地图上使用d3实现一个热力图层。我的数据大约有2-3k个数据点。

我的数据格式如下：

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

理想情况下，我希望能够在基于值和基于点密度的热图之间切换。我还需要能够动态更新数据。视觉上，我希望实现类似于这样的效果：

我知道leaflet有几个热力图插件（链接1），但似乎都不是很活跃。Heatmap.js最接近我所需求的，但它似乎没有维护，文档与源代码不一致，运行速度太慢。我已经广泛使用d3，如果可能的话，我更愿意使用它来创建热力图层。

有一个或两个块浮动在周围（例如这个），但我没有找到可用的。这个最接近我所需求的，它仍然可以在最新的leaflet版本中工作，但是理想情况下，我希望使用渐变的颜色（如heatmap.js）而不是六边形图。我还需要重写代码处理数据的方式并调整其他一些部分（例如，它绘制密度而不是值）。

理想情况下，我希望有一个类似于Mike的leaflet示例的解决方案。有什么建议吗？

更新：我还找到了这个webgl-heatmap的leaflet包装器，但好像有问题。

- dgorissen

---

你看过Lars Kotthoff的这个示例吗？ - user1614080

@user1614080看了一下，但没有看到任何相关的内容（即没有给定的特征数据、leaflet集成）？ - dgorissen

我在想，你可以将Maya网站气候示例中的轮廓技术应用到这个示例，这也是Mike Bostock所展示的。将SVG容器绑定到leaflet地图上的方法在你提供的示例中已经涵盖了。 - user1614080

我建议预处理数据并离线生成热力图轮廓（例如作为geojson），以提高性能和简单性。除非您想要将点分组，否则计算热力图将变得非常复杂。 - Lars Kotthoff

感谢@LarsKotthoff，经过一番搜索，看起来那就是我必须要做的。只需要找到一个小型库来生成轮廓线即可。我确实让那个人发布了laflet-webgl-heatmap包装器，它的效果相当不错且速度很快，但并不完全符合我想要的效果。https://github.com/ursudio/webgl-heatmap-leaflet - dgorissen

这里有一个很好的教程，可以帮助你了解更多相关内容：点击这里。 - Lars Kotthoff

Answer 1

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

最近我一直在使用 Leaflet 热力图，并尝试了几个像您一样的工具，最终选择了Leaflet.heat。唯一放弃 Google 的原因是许可证，但它的表现也很好。

这是一个拥有 10k 点的示例演示页面： 它由 Leaflet 的同一作者制作，即使它仍处于 alpha/beta 版本，在我的测试中相当稳定。它没有在官方Leaflet 插件页面中提到，花费了我一些时间才找到它。

它基于simpleheat，并在Leaflet上创建一个HTML5画布来绘制热力图：因此请注意它仅适用于IE9+。据我的测试，即使每帧绘制1k个点，它也非常快。

数据格式是一个包含纬度、经度和值的数组，如下所示：

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

您可以在创建时将自己的渐变指定为选项，这有点奇怪，因为键实际上是值，但它可以工作 - 只需小心使用 0：

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

如果你更喜欢六边形的样式，今天早上我发现这个在bl.ocks.org上的：有一个d3的hexbin插件可以尝试使用。

与Leaflet的集成不应该太难：一旦在其上创建了一个图层，您应该能够将六边形放置并将它们填充为热力图（就像这个例子中那样）。

- MarcoL

Answer 2

我知道这个问题有点老，但我一直在研究类似的问题，并找到了一些东西：

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

这是tnightingales的代码链接（你提到的），但作为一个工作块：http://bl.ocks.org/tnightingale/4668062

这是Bostock的一个动态六边形例子：http://bl.ocks.org/mbostock/7833311

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

希望这能帮助那些研究相同问题的人。

- Mfbaer

Answer 3

另一个（leaflet）选项是：webgl-heatmap-leaflet，利用WebGL技术可以扩展到数十万个数据点！

- Bwyss