I am trying to implement an OpenLayers Heatmap to visualize some data on a map. My goal is to display heatmap points with given weights. Currently my poc code looks like this:
const features = [
{ lat: 46.934942, lon: 17.891804, id: 10, value: 6.5 },
{ lat: 46.93489, lon: 17.892713, id: 11, value: 5.2 },
{ lat: 46.934662, lon: 17.892331, id: 12, value: 5.9 },
].map((item) => {
const feature = createFeature({
lon: item.lon,
lat: item.lat,
id: `${item.id}`,
customStyle: new olStyle.Style({
image: new olStyle.Circle({
radius: 5,
fill: new olStyle.Fill({
color: "#AB1F58",
}),
}),
}),
});
feature.setProperties({ value: item.value });
return feature;
});
const newLayer = new olLayer.Heatmap({
source: new olSource.Vector({
features,
}),
blur: 0,
radius: 50,
weight(feature) {
return feature.getProperties().value / 10;
},
});
map.addLayer(newLayer)
My problem is that OpenLayers sums the values when the features overlap but I would like the overlap area to have the average value.
Is this possible or should I look for another solution?
One way that I can think of is by using a Cluster
source. Write your own createCluster
function to return a new feature with an average value and display this.