使用热力图的时候，你是不是也为分布规律不同的问题烦恼不已？

 

地图缩小的时候，热力图缩成一块，地图放大的时候，热力图太破碎，看不出分布规律。

 

今天，我们就来告诉大家如何使用“我秀地图JavaScript API”，固定住热力图的形式。干货满满，赶紧get起来！

 

下面三张图就是不同缩放尺度的热力图。

 

 

 

可以看出，缩放在14级的时候，热力图的分布模式是适合的，能看到路南和路北的不同的分布效果。如何固定住这个热力图的形态，使之在各种缩放尺度下都能保持一致？

 

其实很简单，通过下面的热力图讲解，您就能明白。我们通过我秀地图JavaScript API来进行讲解。

 

当你要制作一个热力图时，你需要构建一个热力图对象，下表为热力图构建对象参数。

 

热力图构建对象参数

 

 

 

Opts参数对象的构造函数

 

 

 

这个半径是一个很重要的参数，这个半径是数据点扩散的像素距离，radius: 25指屏幕25个像素点。

 

当屏幕缩放的时候，由于比例尺的变化，相同的25个屏幕距离所代表的实际地面距离也发生变化，这个就是为什么我们的热力图在不同缩放级别下表现出来的特征不一致的原因。

 

 

 

现在只要保证地面半径不变，那么热力图的形态就能保持不变。由于地图每次缩放时候，比例尺都会*2。所以，只需要让radius参数随着地图Zoom level的值以2的倍数增加就能保证地面半径不变。

 

 

 

所以，我们需要这样做：添加地图缩放事件，让热力图半径等于实际距离*2zoomLevel

 

map.addEventListener(

IMAP.Constants.ZOOM_CHANGE, function(map){

var zoomLevel = map.getZoom;

var ground_radius = 0.02*pow(2,zoomLevel);

heatmapOverlay = new IMAP.HeatmapOverlay(datas,{radius: ground_radius });

map.getOverlayLayer().addOverlay(heatmapOverlay)

        }, map);

 

来看下效果吧！

 

 

 

现在我秀地图已经集成了这个功能，只需要在创建热力图的时候在opt中添加{scaleRadius:true}的参数就能实现这个功能，大家快来试试吧！

 

本文作者简介：我秀中国物联网地图服务平台

 

我秀中国是一个最开放的物联网地图服务平台，以“高精度+定制+开放平台”为特征，满足汽车、智能终端、可穿戴设备、智能家居、工业设备、智能飞行器等的位置服务要求，帮助客户管理好智能设备采集的数据并与空间数据和时间相融合，以实现数据的最大价值，提升企业运营能力。

 

本文为原创文章，转载请注明作者，并附带作者简介。