使用前端JavaScript创建自定义“温度”地图

Question

我想创建一个与此类似的地图：

此示例显示了世界范围的温度水平。但我需要使用自己的非温度数据来表示污染程度。

我试过＆＃34; Heatmap＆＃34;层，但它对我没有用，因为它主要用于表示人口水平：

如何创建此类＆＃34;温度图＆＃34;使用Bing或谷歌地图api？
如果没有使用Google或Bing api的原生解决方案，是否有可以帮助我的东西派对？

Answer 1

您需要进行数据分级，而不是使用热图，这类似于聚类和热图的组合。你要做的是将地图分成相同大小的几何形状，很好地配合在一起，如三角形，正方形或六边形。然后，您将根据与形状相交的任何数据的度量标准对每个颜色进行颜色编码。现在，这不会像上面那样为您提供渐变梯度热图，但它会创建一个基于度量而非数据点密度/数量的热图。现在，您可能将单个城市表示为数据中的一个点。要为城市着色，您可以使用Bing地图中的GeoData API等方式获取城市边界，然后对区域中的所有形状进行相交测试，并将相交的形状设置为相同的度量值。这将阻止您以一个代表像城市这样的大区域的小形状结束。如果遇到bin中有多个数据点的情况，则可以采用平均度量值，这有助于将数据混合在一起。最后，您可以根据每个bin的度量标准值对bin进行着色。

今天这样做的网站的一个很好的例子是http://mouseprice.com请注意，它们不会为空白区域着色，但您可能想要为那些颜色值最低的网站（即蓝色）着色。

以下是一系列指向正确方向的资源：

http://indiemaps.com/blog/2011/10/hexbins/

http://www.visualcinnamon.com/2013/07/self-organizing-maps-creating-hexagonal.html

http://build-failed.blogspot.pt/2014/08/game-development-log-iteration-1-webapi.html

http://build-failed.blogspot.pt/2013/07/dynamically-creating-hexagons-from-real.html

http://awkwardcoder.blogspot.com/2011/11/how-many-pins-can-bing-maps-handle-in.html?q=maps

http://awkwardcoder.blogspot.com/2011/10/tessellating-shapes-on-top-of-bing-maps.html

Answer 2

我认为@brundritt解释了如何通过首先对地图进行网格化，计算数据点以及为什么热图不适合你来解决这个问题。最重要的是，我能够找到一些实际上可以实时进行数据分级，着色和显示地图的指针。

This是一个使用canvas创建温度贴图的JavaScript库。该库遍历数据点，计算加权值并设置颜色。

This是一个WebGL存储库，用于使用leaflet显示天气图。