[英]Using d3 to create a density & value heatmap layer for leaflet
I would like to implement a heatmap layer on top of a leaflet map with d3. 我想用d3在传单地图上实现热图图层。 I have around 2-3k datapoints.
我有大约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.js comes closest to what I need.
Heatmap.js最接近我的需要。 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.
我已经广泛使用d3,如果可能的话,我更愿意将它用于热图图层。
There are one or two blocks floating around (eg, this one ) but I did not find one that worked. 有一个或两个块浮动(例如, 这一个 )但我找不到一个有效。 This comes closest to 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.
它仍然适用于最新的传单版本,但理想情况下我想使用渐变渐变(如heatmap.js)而不是hexbins。 I would also need to rewrite the way the code handles data and tweak some other bits (eg, it plots density, not values).
我还需要重写代码处理数据的方式并调整其他一些位(例如,它绘制密度,而不是值)。
Ideally I was hoping for a solution in the style of Mikes leaflet example . 理想情况下,我希望以Mikes传单风格的方式提供解决方案。 Any suggestions?
有什么建议?
Update: I also found this leaflet wrapper for webgl-heatmap but it seems broken 更新:我还发现了webgl-heatmap的这个传单包装 ,但似乎已经破了
If you're concerned by performances of the heatmap I would recommend you two options: Leaflet.heat and 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 . 最近我一直在使用Leaflet热图,在尝试了几个像你这样的人后,我最终得到了Leaflet.heat 。 The only reason of discarding the Google one was the license but it really performs good as well.
丢弃谷歌的唯一原因是许可证,但它确实也表现良好。
This is an example from the demo page with 10k points: 这是一个带有10k点的演示页面的示例:
It is made by the same author of Leaflet and even if it's still a alpha/beta is quite stable on my tests. 它由Leaflet的同一作者制作,即使它仍然是alpha / beta在我的测试中相当稳定。 It is not mentioned in the official Leaflet plugins page and it took me a while to find it.
在官方的Leaflet插件页面中没有提到它,我花了一段时间才找到它。
It is based on simpleheat and 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 d3 that 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的集成不应该那么糟糕:一旦在其上创建了一个图层,你应该能够放置六边形并将它们填充为热图(如本例所示 )
另一个(传单)选项是: webgl-heatmap-leaflet ,借助WebGL,可以扩展到数十万个数据点!
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/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. 我希望这可以帮助有人调查相同的问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.