基于openlayers的react热力图组件的开发

最近在做公司的项目中，遇到需要通过热力图来展示案件的事发分布情况，需要使用热力图来展示，原来接触过openlayers于是就

想用这个js库来做。从官网的api中找到关于热力图的事例，但是它的数据源是kml格式的，当前后台只能提供的是坐标点和权值。

经过一番，资料的查找，最后的解决方案就是通过权重设置每一个feature样式的透明度来展示热力图，

具体的代码思路如下：

 //创建热力图层
 const vector = new ol.layer.Heatmap({
      gradient: ['#00f', '#0ff', '#0f0', '#ff0', '#f00'],
      blur: 10,
      radius: 10,
      shadow: 250,
      source: new ol.source.Vector({
        wrapX: false
      })
    });
//创建要素
let features = [];
    _dataArray.forEach(function (data) {
      var _feature = new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.transform(data.coordinate, 'EPSG:4326', 'EPSG:3857')),
        data: data,
        weight: data.weight
      });
      features.push(_feature);
    })
//将要素添加到热力图层的source中
 vector.getSource().addFeatures(features)

最后的效果如下： 

具体关于react的热力图组件代码，可以去github上下载组件。

转载自：https://blog.csdn.net/jagger_guo/article/details/81608691