动态热力图
地图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);
上一篇
#####
上一篇
下一篇
本篇文章对您是否有帮助?