leaftlet 加载热力图 且改变热力图大小不随着地图层级改变而改变

加载leaftlet 热力图只需要下载 heatmap.js  leaflet-heatmap.js 

下载地址，下载只需要引入相关JS就可以了

https://github.com/pa7/heatmap.js/tree/develop/plugins

  <script src="./static/js/leaflet.js"     type="text/javascript"></script>
  <script src="./static/js/heatmap.js"     type="text/javascript"></script>
  <script src="./static/js/leaflet-heatmap.js"     type="text/javascript"></script>

热力图数据格式

  let  arr={
              max:8,
              data:[
              { lat: 36.386719, lng: 119.047852, count: 1 },
              { lat: 28.300781, lng: 115.532227, count: 1 },
              { lat: 36.958179, lng: 118.085346, count: 1 },
              { lat: 29, lng: 45, count: 1},
              { lat: 31, lng: 37, count: 1 },
              { lat: 32, lng: 32, count: 1 },
              { lat: 35, lng: 30, count: 1 },
              { lat: 30, lng: 29, count: 1 }
              ]}

热力图圆圈设置

let hotOptions = {
  //设置半径
  "radius": 4,
  //透明度
  "maxOpacity":3,
  //半径随地图缩放而动态变化
  "scaleRadius": true,
  "useLocalExtrema": true,
  //代表纬度的字段名称，默认为lat
  latField: 'lat',
  //代表经度的字段名称，默认为lng
  lngField: 'lng',
  //代表权值的字段名称，默认为value
  valueField: 'count'
};

热力图加载

 let arrHotLayer;
 arrHotLayer = new HeatmapOverlay(hotOptions).addTo(map);
 arrHotLayer.setData(arr);   

至此热力图就出来了

后续:  若有需求，热力图不跟随地图的层级放大而放大只修要修改 leaflet-heatmap.js 103行

   scale = Math.pow(2, zoom); 修改为 scale =3 （随意填写）

这样不会导致地图层级放大的时候，热力图也跟随放很大

删除热力图图层:     map.removeLayer(arrHotLayer);