javascript - 使用前端 JavaScript 创建自定义 “temperature” map

Question

我想创建一个类似于这个的 map :

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

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

如何使用 Bing 或 Google map API 创建这样的“温度图”？
如果没有使用 Google 或 Bing api 的 native 解决方案，是否有可以帮助我的事物方库？

Answer 1

您不希望使用热图，而是希望进行数据分箱，这就像聚类和热图的组合。你要做的是将 map 分解成大小相等的几何形状，这些形状可以很好地组合在一起，比如三 Angular 形、正方形或六边形。然后，您将根据与形状相交的任何数据的度量对每个进行颜色编码。现在这不会像上面那样为您提供渐变热图，但它会创建一个基于指标而不是数据点密度/数量的热图。现在，您可能将单个城市表示为数据中的一个点。要为城市着色，您可以使用 Bing map 中的 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