Openlayers創建熱力圖

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)