harmonynextsdk | 百度地图API SDK

类名	接口方法名称	功能解释&使用方法
HeatMapBuilder	setDatas(WeightedLatLng[][])	设置热力图绘制的数据，必须设置
	isRadiusMeterValue(isMeter: boolean)	是否设置米单位半径
	maxHighValue(high: number)	设置热力图最大高度
	maxIntensityValue(intensity: number)	设置热力图的最大权重，默认为1
	minIntensityValue(intensity: number)	设置热力图的最小权重，一般为0，默认0
	opacityValue(opacity: number)	设置热力图层透明度，默认 0.6，可不设置该接口
	radiusValue(radius: number)	设置热力图点半径，默认为12ps，可不设置该接口
	radiusMeterValue(radius: number)	设置热力图点半径，默认为12米设置该接口的同时，必须设置isRadiusMeter(true)，将半径单位设为米
	maxShowLevelValue(level: number)	设置热力图最大显示层级，默认为22
	minShowLevelValue(level: number)	设置热力图最小显示层级，默认为4

渐变类Gradient属性：

属性	类型	说明
colors	string[]	渐变色用到的所有颜色数组，有默认值
startPoints	number[]	每一个颜色的起始点数组，有默认值

动画类HeatMapAnimation属性：

属性	类型	注释
duration	number	动画时长
type	AnimationType	动画缓动函数类型
isAnimation	boolean	是否开启动画

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

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);

#####

瓦片图层

2D蜂窝热力图

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

动态热力图

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

渐变类Gradient属性：

动画类HeatMapAnimation属性：