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

Question

我想创建一张类似这样的地图：

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

我尝试过“热图”层，但它对我不起作用，因为它主要用于表示人口水平：

如何使用 Bing 或 Google 地图 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 显示天气图。