vue+leaflet实现热力图

功能说明

vue+leaflet实现热力图

功能截图

热力图效果

实现方式

leaflet-heatmap插件

功能实现

安装插件

npm install heatmap.js

引入插件

import HeatmapOverlay from 'heatmap.js/plugins/leaflet-heatmap'

初始化热力图层

let cfg = {//热力图层配置
       "radius": 0.015,////热力点的半径,根据效果自行调整
       "blur": 0.95,//系数越高,渐变越平滑,默认是0.85,
       "maxOpacity": 0.8, //设置最大的不透明度
       "scaleRadius": true,//设置热力点是否平滑过渡
       "useLocalExtrema": true, //使用局部极值
       latField: 'lat', //纬度
       lngField: 'lng',    //经度
       valueField: 'count', //热力点的值
       "gradient": {//热力图色带
         "0.99": "rgba(255,0,0,1)",
         "0.9": "rgba(255,255,0,1)",
         "0.8": "rgba(0,255,0,1)",
         "0.5": "rgba(0,255,255,1)",
         "0": "rgba(0,0,255,1)"
      }
    };
let heatmapLayer = new HeatmapOverlay(cfg);//初始化热力图层

设置热力图数据

let heatData= { data: [], max: 0 };//max 热力点最大值
//数据解析示例
data.forEach(i => {
heatData.data.push({ lat: i.lat, lng: i.lng, count: i.count })
   if (i.count > heatData.max) {
         heatData.max = i.count
    }    
})
heatmapLayer.setData(heatData);//设置数据
heatmapLayer.addTo(map);//添加到地图上

You may also like...


Warning: Division by zero in /var/www/html/giserdqy/wp-includes/comment-template.php on line 1457

发表评论