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

Question

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

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

我尝试了"热图"图层,但它对我不起作用,因为它主要用于表示人口水平:

如何使用Bing或Google maps 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