使用openlayers的热图

Question

我正在尝试使用openlayers创建热图。

我想要做的是说我有一个自定义分数函数，它返回一些浮点值，我想用这个值来决定数据点的颜色。

值越高，色点越暗（越朝红色）。值越小，色点越浅（越绿色或蓝色）。

请有人建议我如何实现这一目标。

我的热图的javascript代码如下

var vector = new ol.layer.Heatmap({
    source: new ol.source.Vector({
        url: 'http://localhost:8080/heatmapKML',
      format: new ol.format.KML({
        extractStyles: false
      })
    }),
    blur: 15,
    radius: 5
  });

  var raster = new ol.layer.Tile({
    source: new ol.source.Stamen({
      layer: 'toner'
    })
  });

  var map = new ol.Map({
    layers: [raster, vector],
    target: 'map',
    view: new ol.View({
      center: [0, 0],
      zoom: 3
    })
  });

由于

Answer 1

开放层热图有几个可以调整的属性。请参阅open layer api documentation。

可以设置权重属性以区分数据点的颜色。 您可以在javascript端或后端实现自定义分数功能，然后在javascript端获取值。

重点是，为每个数据点设置权重将定义它的颜色强度。

所以在我分享的上面代码中，我只是在创建栅格变量之前添加了以下行。

vector.getSource().on('addfeature', function(event) {
        var score = event.feature.get('score');
        event.feature.set('weight', score);
      });

得分值来自后端定义的自定义得分函数。

如您所见，两个数据点的颜色强度不同。