腾讯地图 热力图使用

Posted 2021-09-13 south

采用腾讯地图的热力组件库，引入腾讯地图就不多赘述了，本篇主要讲如何使用
重点：热力高低只能通过相邻比较近的热力点的多少来控制，所以要想实现热力较高的区域，可以通过增加周围热力点的数量来实现

<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
}]