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

Question

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

此示例显示了全球温度水平。但我需要使用我自己的非温度数据来表示污染级别。

我试过"Heatmap"层，但对我没用，因为它主要用来表示人口水平：

如何使用 Bing 或 Google 地图创建这样的 "Temperature map" api？
如果没有使用 Google 或 Bing api 的本机解决方案，是否有可以帮助我的事物方库？

Answer 1

您不希望使用热图，而是希望进行数据分箱，这就像聚类和热图的组合。你要做的是将地图分解成大小相等的几何形状，这些形状可以很好地组合在一起，比如三角形、正方形或六边形。然后，您将根据与形状相交的任何数据的度量对每个进行颜色编码。现在这不会像上面那样为您提供渐变热图，但它会创建一个基于指标而不是 density/population 数据点的热图。现在，您可能将单个城市表示为数据中的一个点。要为城市着色，您可以使用 Bing 地图中的 GeoData API 之类的东西获取城市的边界，然后对该区域中的所有形状进行交叉测试并设置相交的形状到相同的度量值。这将防止您最终得到一个代表大面积区域（如城市）的小形状。如果您 运行 遇到一个容器中有多个数据点的情况，您可以采用有助于将数据混合在一起的平均度量值。最后，您可以根据每个 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 是一个 javascript 库，它使用 canvas 创建温度图。该库遍历数据点，计算加权值并设置颜色。

This 是一个使用 leaflet.

显示天气图的 WebGL 存储库