高德地图api 热力图基础实现

初始化地图和热力图

center: {
  type: Array,
  default:  => [113.388, 23.03]
}
zoom: {
  type: Number,
  default: 12
}
//热力图半径
radius: {
  type: Number,
  default: 8
}
//热力图透明度
opacity: {
  type: Array,
  default:() => [0.6, 0.9],
}
//热力图颜色渐变
gradient: {
  type: Object,
  default: ()=>{
    0.5: 'blue',
    0.65: 'rgb(117,211,248)',
    0.7: 'rgb(0, 255, 0)',
    0.9: "#ffea00",
    1.0: 'red'
  }
//热力图最大值
max:{
  type: Number,
  default: 100,
}

const init async ()=> {
  try{
    map = new AMap.Map(mapContainer.value, {
    center: props.center,
    zoom: props.zoom,
    resizeEnable: true
  }
  await new Promise(resolve => map.on('complete'resolve))

    //加载热力图插件
// api 2.0 版本 要用 大写 HeatMap， 而不是 Heatmap 小写
    await new Promise(resolve => {
      map.plugin(['AMap.HeatMap'], resolve)
    }}

//创建热刀图买例
    heatmap = new AMap.HeatMap(map,{
      radius: props.radius,
      opacity: props.opacity,
      gradient: props.gradient,
    } )
//热力图数据heatmapData格式为数组 [{lng:number, lat : number ,count:number}]
   heatmap.setDataSet({
      data: props.heatmapData
      max: props.max,
})

image.png