openlayer 是一个比较小众的 gis 框架，这里要说的是，它集成的 heatmap 模块。首先，我们可以从<a href="http://openlaye

source 的对应的数据形式是名为 <a href="http://openlayers.org/en/latest/apidoc/module-ol_source_V

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

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

openlayer 热力图开发 about blog HOT 4 OPEN

rottenpen commented on September 27, 2024

openlayer 热力图开发

from blog.

Comments (4)

rottenpen commented on September 27, 2024

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

如上面的官网例子

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

from blog.

rottenpen commented on September 27, 2024

首先，补充一下，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
  }