使用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

开放层热图几乎没有可以调整的属性。 请参阅开放层api文档 。

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

关键是为每个数据点设置权重将定义其颜色强度。

因此，在上述我共享的代码中，我只是在创建栅格变量之前添加了以下内容。

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

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

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