采纳腾讯地图的热力组件库,引入腾讯地图就不多赘述了,本篇次要讲如何应用
重点:热力高下只能通过相邻比拟近的热力点的多少来管制,所以要想实现热力较高的区域,能够通过减少四周热力点的数量来实现

<div id="topMessageMap"></div>// HTML代码 记得给宽高
//    const initTopMap = (window) => {      let mapInit = reactive({})      let mapQQ = reactive({})      mapQQ = window.TMap  // 引入的腾讯地图      const center = new (mapQQ as any).LatLng(lat.value, lng.value)      const options = {        zoom: zoomValue.value,        // minZoom: 14,        center: center,        mapStyleId: 'style1',        mapTypeControl: false,        zoomControl: false,        scaleControl: false,        panControl: false,        showControl: false      }      mapInit = new (mapQQ as any).Map(document.getElementById('topMessageMap'), options)      const heat = new (mapQQ as any).visualization.Heat({        max: 180, // 热力最强阈值        min: 0, // 热力最弱阈值        height: 0, // 峰值高度        // map: mapInit, // 必填参数,指定显示热力求的地图对象        radius: 60 // 辐射半径,默认为20      }).addTo(mapInit)      console.log(heat)      // 获取热力数据      // const data = getHeatData(50, 50, 0)      const data = topHeat()      // 向热力求传入数据      heat.setData(lukouList)    }
// 数据格式const lukouList = [{        lng: 117.044054,        lat: 39.068611,        count: 10}]