Openlayers创建热力图

Posted 2020-11-22 devinzh

1.使用es6模块化方式引入HeatMap和VectorSource

import Heatmap from ‘ol/layer/Heatmap‘
import VectorSource from ‘ol/source/Vector‘

 2.创建热力图图层并添加到map上

let heatMapLayer = new Heatmap({
    name: ‘heatLayer‘,
    source: new VectorSource(),
    gradient: [‘#00f‘, ‘#0ff‘, ‘#0f0‘, ‘#ff0‘, ‘#f00‘], //颜色
    blur: 25, // 模糊半径
    radius: 20 //半径
})

//当添加feature到热力图层上时，设置热力值
heatMapLayer.getSource().on(‘addfeature‘, function (event) {
    let num = event.feature.get(‘num‘) // 热力值，从feature的属性中读取
    let magnitude = parseFloat(num)
    event.feature.set(‘weight‘, magnitude)// 设置热力值
})

map.addLayer(heatMapLayer)

3.创建feature并添加到热力图图层上

let feature = null
if (data.pointWkt) { 
    feature = wkt.readFeature(data.pointWkt) //使用wkt格式个点坐标创建feature
    // 添加属性到feature中,用于保存相关数据
    for (let prop in data) {
        feature.set(prop, data[prop])
    }
}

// 将feaure添加到t热力图图层上
heatMapLayer.getSource().addFeature(feature)