I'd like to filter features on the map using the feature properties.
For example if I have this property in the geojson:
...
"properties": {
"Start": 10
}
...
And I want to see only featuers with Start > 10
, how can I implement that features with Start < 10
are hidden?
If I change the style with following code the features are transparent but they are still available after click if I use forEachFeatureAtPixel
. I want that features are not displayed and there are not available for clicking etc.
let invisibleStyle = new ol.style.Fill({
color: [0,0, 0, 0],
});
const NewLayer= new ol.layer.VectorImage ({
source: new ol.source.Vector({
url: *url*,
format: new ol.format.GeoJSON(),
}),
visible: true,
style: function (feature) {
if (feature.get('Start')>10) {
let style = new ol.style.Style({
fill: fillStyle,
stroke: strokeStyle
})
return style;
} else {
let style = new ol.style.Style({
fill: invisibleStyle,
})
return style;
}
});
map.addLayer(NewLayer);
I tried also to use the visible
like this but it doesn't work:
const NewLayer= new ol.layer.VectorImage ({
source: new ol.source.Vector({
url: *url*,
format: new ol.format.GeoJSON(),
}),
visible: function(feature) {
if (feature.get('Start')<10) {
return true;
} else {
return false;
}
},
style: new ol.style.Style({
fill: fillStyle,
stroke: strokeStyle,
})
});
map.addLayer(NewLayer);
Transparent fill cannot be seen but is hit detected (so you can select a polygon by clicking inside it). To avoid display and hit detection simply don't return a style
style: function (feature) {
if (feature.get('Start')>10) {
let style = new ol.style.Style({
fill: fillStyle,
stroke: strokeStyle
})
return style;
}
}