javascript 使用 d3 为传单创建密度和值热图层
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19830527/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using d3 to create a density & value heatmap layer for leaflet
提问by dgorissen
I would like to implement a heatmap layer on top of a leaflet map with d3. I have around 2-3k datapoints.
我想在带有 d3 的传单地图之上实现一个热图层。我有大约 2-3k 个数据点。
My data is of the following format:
我的数据格式如下：
[{lat: .., lon: .., value: ..}, {lat: .., lon: .., value: ..}, ...]
Ideally I would like to toggle between a heatmap based on the values, as well as based on the density of points. I also need to be able to update the data dynamically. Visually I was aiming for something like this:
理想情况下，我想在基于值和点密度的热图之间切换。我还需要能够动态更新数据。从视觉上看，我的目标是这样的：
I know leaflet has a couple of heatmap plugins, neither of which seem very active. Heatmap.jscomes closest to what I need. However, it seems unmaintained, the docs are inconsistent with the source code and it runs far too slow. I already use d3 extensively and would prefer to use that for the heatmap layer if possible.
我知道传单有几个热图插件，但看起来都不是很活跃。Heatmap.js最接近我的需要。但是，它似乎没有维护，文档与源代码不一致，而且运行速度太慢。我已经广泛使用 d3，如果可能的话，我更愿意将它用于热图层。
There are one or two blocks floating around (e.g., this one) but I did not find one that worked. This comes closestto what I need. It still works with the latest leaflet version but ideally I would like to use gradual gradients (as in heatmap.js) instead of hexbins. I would also need to rewrite the way the code handles data and tweak some other bits (e.g., it plots density, not values).
有一两个块漂浮在周围（例如，这个），但我没有找到一个有效的。这最接近我需要的。它仍然适用于最新的传单版本，但理想情况下我想使用渐变渐变（如在 heatmap.js 中）而不是 hexbins。我还需要重写代码处理数据的方式并调整其他一些位（例如，它绘制密度，而不是值）。
Ideally I was hoping for a solution in the style of Mikes leaflet example. Any suggestions?
理想情况下，我希望找到Mikes 传单示例风格的解决方案。有什么建议？
Update: I also found this leaflet wrapperfor webgl-heatmap but it seems broken
回答by MarcoL
If you're concerned by performances of the heatmap I would recommend you two options: Leaflet.heatand Google Maps JS API v3.
如果您担心热图的性能，我会向您推荐两个选项：Leaflet.heat和Google Maps JS API v3。
Recently I've been working with Leaflet heatmaps and after trying several ones like you I ended up with Leaflet.heat. The only reason of discarding the Google one was the license but it really performs good as well.
最近我一直在使用 Leaflet 热图，在尝试了像你这样的几个热图后，我最终得到了Leaflet.heat。放弃谷歌的唯一原因是许可证，但它确实表现良好。
This is an example from the demopage with 10k points:
It is made by the same author of Leaflet and even if it's still a alpha/beta is quite stable on my tests. It is not mentioned in the official Leaflet plugins pageand it took me a while to find it.
它是由 Leaflet 的同一作者制作的，即使它仍然是 alpha/beta 在我的测试中也非常稳定。官方Leaflet 插件页面中没有提到它，我花了一段时间才找到它。
It is based on simpleheatand it creates an HTML5 canvas on top of Leaflet to draw the heat map: so bare in mind that it will work only IE9+ only.
它基于simpleheat，它在 Leaflet 之上创建了一个 HTML5 画布来绘制热图：请记住，它仅适用于 IE9+。
It is pretty fast even to draw 1k points every frame from my tests.
即使从我的测试中每帧绘制 1k 点也非常快。
The data format is an array of lat, long and value like the following:
数据格式是一个由 lat、long 和 value 组成的数组，如下所示：
[[lat, lon, value], [...], [...], ... ]
You can specify your own gradient passing it as an option on creation - it is a bit weird that the keys are actually the values but it works - just be careful with the 0:
您可以指定自己的渐变将其作为创建选项传递 - 键实际上是值有点奇怪但它有效 - 只是要小心0：
{
...,
gradient: {0.4: 'blue', 0.65: 'lime', 1: 'red'}
}
If you're looking instead more for an hexagonal shape style, just this morning I've found this on bl.ocks.org: there's an hexbin plugin for d3that you may try to use in case.
如果您正在寻找更多的六边形样式，就在今天早上，我在 bl.ocks.org 上找到了这个：有一个用于 d3的hexbin 插件，您可以尝试使用以防万一。
The integration with Leaflet shouldn't been so bad: once created a layer on it you should be able to put your hexagons and fill them as an heat map (like in this example)
与 Leaflet 的集成应该不会太糟糕：一旦在其上创建了一个图层，您应该能够放置六边形并将它们填充为热图（如本例中所示）
回答by Bwyss
Another (leaflet) option is: webgl-heatmap-leafletallowing one to scale up to hundreds of thousands of data points thanks to WebGL!
另一个（传单）选项是：webgl-heatmap-leaflet允许一个人扩展到数十万个数据点，这要归功于 WebGL！
回答by Mfbaer
I know this question is pretty old but i have been looking into kind of the same question and came across a few things:
我知道这个问题已经很老了，但我一直在研究同样的问题，并遇到了一些事情：
This looks like a nice tutorial: http://www.delimited.io/blog/2013/12/1/hexbins-with-d3-and-leaflet-maps
这看起来像一个不错的教程：http: //www.delimited.io/blog/2013/12/1/hexbins-with-d3-and-leaflet-maps
Here is a link to tnightingales code (which you referenced) but as a working block: http://bl.ocks.org/tnightingale/4668062
这是 tnightingales 代码（您引用的）的链接，但作为一个工作块：http://bl.ocks.org/tnightingale/4668062
Here is a dynamic hexbin example from Bostock: http://bl.ocks.org/mbostock/7833311
这是来自 Bostock 的动态 hexbin 示例：http://bl.ocks.org/mbostock/7833311
And finally here is an example again from Bostock using both size and colour as dynamic variables: http://bl.ocks.org/mbostock/4330486
最后这里是 Bostock 的一个例子，使用大小和颜色作为动态变量：http: //bl.ocks.org/mbostock/4330486
I hope this helps someone looking into the same questions.
我希望这有助于有人研究相同的问题。
