产品服务
解决方案
文档与支持
定价

动态热力图

下载开发文档

地图SDK支持动态热力图功能,支持以3D的形式表示数据的密度和分布情况,示例图如下:

动态热力图构造类HeatMapBuilder相关方法如下:

渐变类Gradient属性:

动画类HeatMapAnimation属性:

添加热力图图层前,请您提前准备好带有经纬度坐标的数据集,具体步骤如下:

1.准备经纬度分布数据集,如

const data :Record<string, number>[] = [
{"lng": 116.895579, "lat": 24.306521},
{"lng": 113.951068, "lat": 22.772504},
{"lng": 110.00006, "lat": 40.603564},
{"lng": 111.846788, "lat": 21.897821},
{"lng": 120.607979, "lat": 28.022674},
{"lng": 120.244238, "lat": 27.642108},
{"lng": 113.304118, "lat": 23.154842},
{"lng": 113.924164, "lat": 23.219795},
{"lng": 101.692567, "lat": 36.945368},
{"lng": 121.595172, "lat": 38.977931},
{"lng": 117.215115, "lat": 39.211625},
{"lng": 117.29184, "lat": 34.208296},
]

2.设置热力图属性

// 获取热力图数据集
const heatMapDatas = data.map(item=>{
return new WeightedLatLng(new LatLng(item.lat,item.lng), 1)
})
//设置渐变色
const gradinet = new Gradient([
'rgba(0,0,200,1)', 'rgba(0,225,0,1)', 'rgba(255,0,0,1)'
], [0.3, 0.7, 1.0]);
this.heatMap = new HeatMapBuilder().setDatas(heatMapDatas).gradientValue(gradinet).isRadiusMeterValue(true).radiusMeterValue(100).opacityValue(1.0).maxIntensityValue(1).frameAnimationValue(new HeatMapAnimation(true, 2000,AnimationType.OutQuad))
.build();

3.添加热力图

this.mapController.addHeatMap(this.heatMap);

4.开启热力图帧动画

this.mapController.startHeatMapFrameAnimation();

5.停止热力图帧动画

this.mapController.stopHeatMapFrameAnimation();

6.调整热力图帧数

// 设置热力图为第2帧
this.mapController?.setHeatMapFrameAnimationIndex(1);

上一篇

#####

上一篇

位置短地址分享

下一篇

请求状态码说明

本篇文章对您是否有帮助?