添加热力图

调用方法

addHeatmapOverlay(option)

1. 仅能创建一个热力图，确保所有数据准备完后渲染
2. 要开启热力图，需要配置组件属性useHeatmap=true，此时才会加载热力图所需js数据，否则不生效。

option

名称	类型	说明	默认
points	PointsItem[]	配置数组，必填	-
visible	boolean	热力图默认是否显示	true
opacity	number	热力的透明度,1-100	-
radius	number	热力图的每个点的半径大小	30
gradient	object	热力图的渐变区间，格式	-
value	string	颜色值	-
max	number	颜色值数据集中值的最大值	300
success	function	调用成功回调	-
fail	function	调用失败回调	-

PointsItem

名称	类型	说明
name	string	点名称，必填
lng	number	点经度，必填
lat	number	点纬度，必填
count	number	值，必填

gradient

{
  ".2": "rgb(0, 255, 255)",
  ".5": "rgb(0, 110, 255)",
  ".8": "rgb(100, 0, 255)"
}

示例代码

// 数据
const data: any = [
  { name: '海门', value: 9 },
  { name: '招远', value: 12 },
  { name: '舟山', value: 12 },
];
// 坐标数据
const geoCoordMap: any = {
  海门: [121.15, 31.89],
  招远: [120.38, 37.35],
  舟山: [122.207216, 29.985295]
};
// 数据整合
const convertData = (data: any) => {
  let res = [];
  for (let i = 0; i < data.length; i++) {
    let geoCoord = geoCoordMap[data[i].name];
    if (geoCoord) {
      res.push({
        name: data[i].name,
        lat: geoCoord[1],
        lng: geoCoord[0],
        count: data[i].value
      });
    }
  }
  return res;
};
const points = convertData(data);
// 创建热力图
TDTRenderRef.value
  .addHeatmapOverlay({
    points: points
  })

贡献者

mosowe