openlayer 热力图开发 about blog

[rottenpen]

source 的对应的数据形式是 名为 vector 的矢量数据。
我们可以通过

let source = new ol.source.Vector({
      url, // GeoJSON格式数据资源
      format: new ol.format.GeoJSON()
    })

创建它。
但是，问题就来了，它提供的数据源，只能通过 geoJson 或者 KML 格式的文件加载

 const vector = new HeatmapLayer({
        source: new VectorSource({
          url: 'data/kml/2012_Earthquakes_Mag5.kml',
          format: new KML({
            extractStyles: false
          })
        }),
        blur: parseInt(blur.value, 10),
        radius: parseInt(radius.value, 10)
      });

如上面的官网例子

这在我们实际开发当中很明显是不合理的，因为很多时候我们热力图的点都是由后端接口返回的，而不是直接请求静态资源。那么我们该如何转化后端返回的数据，形成热力图的点呢？

[rottenpen]

首先，补充一下，vector 是可以配置 feature 的。
我们通过生成把坐标点，转化成feature的点。

function createFeature ({type = 'Point', coordinates = [0, 0]}) {
  return new ol.Feature({
    geometry: new ol.geom[type](coordinates)
  })
}

我们就可以通过点数据生成 feature 了。添加到一个空的 vector 里，再把 vector 配置到 heatmap图层内。
完整代码：

// 这里 data 的格式自然是 [[0, 0],[0, 0],[0, 0]] 的坐标集合
createHeatmapLayer ({data, blur = 15, radius = 5}) {
    let source = new ol.source.Vector({})
    let features = []
    for (let i in data) {
      let newFeature = createFeature({coordinates: data[i]})
      features.push(newFeature)
    }
    source.addFeatures(features)
    let Heatmap = new ol.layer.Heatmap({
      source,
      blur,
      radius
    })
    return Heatmap
  }

以上

[uct8086]

请问如何设置每个Feature的大小呢

[rottenpen]

@uct8086 通过控制每个点的radius来实现 5大概是5公里好像