关于javascript:腾讯地图-热力图使用

13次阅读

共计 875 个字符,预计需要花费 3 分钟才能阅读完成。

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

<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
}]
正文完
 0