I have defined my own featureOverlay for the purposes of highlighting any polygon layer I hover over. When I try to make this work with featureOverlay.getSource(), I get the error featureOverlay.getSource() is not a function. Below is the code where I define my feature Overlay, as well as the functionality for adding the featureOverlay(which is essentially a new Overlay with designated highlight details.
const featureOverlay = new Overlay({
source: new VectorSource(),
zIndex: 0,
map: map,
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: [155, 155, 0],
width: 3.5
}),
fill: new ol.style.Fill({
color: 'rgba(0, 0, 0, 0.8)'
})
})
});
map.on('pointermove', function(e){
if (cursorSet) return;
if (e.dragging) return;
var pixel = map.getEventPixel(e.originalEvent);
var hit = map.hasFeatureAtPixel(pixel);
// console.log("Place break point here")
if(hit) {
var feature = map.forEachFeatureAtPixel(e.pixel,function(feature) {
if (clicked && feature) {
e.map.getTargetElement().style.cursor = hit ? 'pointer' : '';
cursorSet = true;
return;
console.log("clicked and Feature");
}
featureToRemove = feature;
if (!clicked && feature !== highlight) {
if (highlight) {
featureOverlay.getSource().removeFeature(highlight);
}
if (!clicked && feature) {
featureOverlay.getSource().addFeature(feature);
}
console.log("Hit me man")
highlight = feature;
}
});
} else {
console.log("do something ELSE")
}
});