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