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