使用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);
      });

分數的值來自后端定義的自定義分數函數。

如您所見，兩個數據點具有不同的顏色強度。